AntV L7深圳智慧城市

本案例使用L7库和Mapbox GL JS构建深圳智慧城市。

文章目录

1. 引入 CDN 链接
2. 引入组件
3. 创建地图
4. 创建场景
5. 获取数据
6. 创建面图层
7. 演示效果
8. 代码实现

1. 引入 CDN 链接

<!-- 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 来引入和初始化三个类：Scene、Mapbox 和 PolygonLayer。L7 库是一个用于创建地图的可控组件的库，它基于 Vue.js 和 Tuandoushi（天斗星）框架。

Scene 类：这是一个用于创建地图场景的类。它提供了地图的基本设置，如视图、地图图层和样式。
Mapbox 类：这是一个用于创建 Mapbox 地图的类。它提供了基于 Mapbox 的地图服务器的设置。
PolygonLayer 类：这是一个用于创建多边形图层的类。它提供了绘制多边形图层的方法。

const { Scene, Mapbox, PolygonLayer } = L7;

3. 创建地图

我们创建了一个Mapbox GL JS地图实例，设置了地图的容器、默认的地图风格、中心点坐标、地图级别、默认的地图投影模式以及俯仰角。

// 3.创建地图
const map = new mapboxgl.Map({container: "map",style: "mapbox://styles/mapbox/streets-v12",center: [114.050008, 22.529272],zoom: 13,projection: "globe",pitch: 70,
});

4. 创建场景

Scene组件负责显示地图和其他图层。

const scene = new L7.Scene({id: "map",map: new Mapbox({mapInstance: map,}),
});

5. 获取数据

使用 fetch 函数从服务器获取数据：

        fetch("https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json").then((res) => res.json()).then((data) => {const colors = ["#816CAD","#A67FB5","#C997C7","#DEB8D4","#F5D4E6","#FAE4F1","#FFF3FC",];

6. 创建面图层

我们需要创建一个新的PolygonLayer对象，然后添加数据源，接着设置形状、激活状态和颜色等属性，最后将层添加到场景中。

// 6.创建面图层
const layer = new PolygonLayer({})// source添加数据源.source(data).shape("extrude").active(true).color("h20", colors).size("h20", [100, 120, 160, 200, 260, 300]);scene.addLayer(layer);

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>深圳智慧城市</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, PolygonLayer } = L7;mapboxgl.accessToken ="pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA";// 3.创建地图const map = new mapboxgl.Map({container: "map",style: "mapbox://styles/mapbox/streets-v12",center: [114.050008, 22.529272],zoom: 13,projection: "globe",pitch: 70,});// 4.创建场景const scene = new L7.Scene({id: "map",map: new Mapbox({mapInstance: map,}),});scene.on("loaded", () => {// 5.获取数据fetch("https://gw.alipayobjects.com/os/basement_prod/972566c5-a2b9-4a7e-8da1-bae9d0eb0117.json").then((res) => res.json()).then((data) => {const colors = ["#816CAD","#A67FB5","#C997C7","#DEB8D4","#F5D4E6","#FAE4F1","#FFF3FC",];// 6.创建面图层const layer = new PolygonLayer({})// source添加数据源.source(data).shape("extrude").active(true).color("h20", colors).size("h20", [100, 120, 160, 200, 260, 300]);scene.addLayer(layer);});});</script></body>
</html>