AntV L7的pointLayer点图层

news/2024/7/27 6:18:27/文章来源:https://blog.csdn.net/dongxiaod1/article/details/136522966

本案例使用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>
<linkhref="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><linkhref="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>