有什么设计网站推荐/企业文化理念

有什么设计网站推荐,企业文化理念,微信开放平台官方网站,活动拍摄本案例使用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 链接 <s…

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