本案例使用L7库和Mapbox GL JS创建点数据并加载进地图。
文章目录
- 1. 引入 CDN 链接
- 2. 引入组件
- 3. 创建地图
- 4. 创建场景
- 5. 创建点数据
- 5.1. 普通 json 数据
- 5.2. geojson 数据
- 6. 创建点图层
- 6.1. 普通 json 数据
- 6.2. geojson 数据
- 7. 演示效果
- 8. 代码实现
1. 引入 CDN 链接
<script src="https://unpkg.com/@antv/l7"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
rel="stylesheet"
/>
2. 引入组件
引入 L7-JS 库中的Scene、Mapbox和PointLayer组件。
const { Scene, Mapbox, PointLayer } = L7;
3. 创建地图
我们创建了一个Mapbox GL JS地图实例，设置了地图的容器、默认的地图风格、中心点坐标、地图级别以及默认的地图投影模式。
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v12",
center: [108.280717, 23.157163],
zoom: 12,
projection: "globe",
});
4. 创建场景
Scene组件负责显示地图和其他图层。
const scene = new L7.Scene({
id: "map",
map: new Mapbox({
mapInstance: map,
}),
});
5. 创建点数据
5.1. 普通 json 数据
在这里我们创建了两个坐标点的数据。
const data = [
{
lng: 108.280717,
lat: 23.157163,
name: "武鸣区",
},
{
lng: 108.290717,
lat: 23.167163,
name: "南宁师范大学",
},
];
5.2. geojson 数据
在这里，我们创建一个表示地理数据的 JSON 格式。它包含了一个名为data的变量，该变量是一个包含类型为FeatureCollection的地理数据对象。FeatureCollection是一个包含多个Feature对象的集合，每个Feature对象表示一个地理要素（如点、线或面）。
在这个例子中，data对象包含了两个Feature对象。第一个Feature对象的类型是Point，表示一个点，其坐标是108.280717, 23.157163。第二个Feature对象的类型是Point，表示一个点，其坐标是108.290717, 23.167163。这两个点的坐标分别位于武鸣区和南宁师范大学附近。
const data = {
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {
name: "武鸣区",
},
geometry: {
type: "Point",
coordinates: [108.280717, 23.157163],
},
},
{
type: "Feature",
properties: {
name: "南宁师范大学",
},
geometry: {
type: "Point",
coordinates: [108.290717, 23.167163],
},
},
],
};
6. 创建点图层
6.1. 普通 json 数据
我们可以使用L7.PointLayer创建一个点云图层，设置点图层的样式。
// 6.创建点图层
// source默认可以解析geojson
// PointLayer点图层，在L7中引入
const pointLayer = new PointLayer({})
// source添加数据源
.source(data, {
parser: {
type: "json",
x: "lng",
y: "lat",
},
})
// shape指定点图层的样式
.shape("circle")
// size指定大小
.size("name", [10, 20])
// color指定颜色
.color("name", ["#e53e31", "#24adf3"])
.style({
opacity: 0.8,
strokeWidth: 1,
});
// 最后将图层放到scene中
scene.addLayer(pointLayer);
6.2. geojson 数据
source默认可以解析geojson。
// PointLayer点图层，在L7中引入
const pointLayer = new PointLayer({})
// source添加数据源
.source(data)
// shape指定点图层的样式
.shape("circle")
// size指定大小
.size("name", [10, 20])
// color指定颜色
.color("name", ["#e53e31", "#24adf3"])
.style({
opacity: 0.8,
strokeWidth: 1,
});
scene.addLayer(pointLayer);
7. 演示效果
在这里，我们创建了一个蓝色和一个红色不同大小的点。
8. 代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>L7的pointLayer</title>
<!-- 1.引入CDN链接 -->
<script src="https://unpkg.com/@antv/l7"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
<link
href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css"
rel="stylesheet"
/>
<style>
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// 2.引入组件
const { Scene, Mapbox, PointLayer } = L7;
mapboxgl.accessToken =
"pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA";
// 3.创建地图
const map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/mapbox/streets-v12",
center: [108.280717, 23.157163],
zoom: 12,
projection: "globe",
});
// 4.创建场景
const scene = new L7.Scene({
id: "map",
map: new Mapbox({
mapInstance: map,
}),
});
scene.on("load", () => {
// 5.创建点数据
const data = [
{
lng: 108.280717,
lat: 23.157163,
name: "武鸣区",
},
{
lng: 108.290717,
lat: 23.167163,
name: "南宁师范大学",
},
];
// 6.创建点图层
// source默认可以解析geojson
// PointLayer点图层，在L7中引入
const pointLayer = new PointLayer({})
// source添加数据源
.source(data, {
parser: {
type: "json",
x: "lng",
y: "lat",
},
})
// shape指定点图层的样式
.shape("circle")
// size指定大小
.size("name", [10, 20])
// color指定颜色
.color("name", ["#e53e31", "#24adf3"])
.style({
opacity: 0.8,
strokeWidth: 1,
});
// 最后将图层放到scene中
scene.addLayer(pointLayer);
});
</script>
</body>
</html>
