本案例使用L7 库和Mapbox GL JS构建深圳智慧城市。
文章目录
- [1. 引入 CDN 链接](#1. 引入 CDN 链接)
- [2. 引入组件](#2. 引入组件)
- [3. 创建地图](#3. 创建地图)
- [4. 创建场景](#4. 创建场景)
- [5. 获取数据](#5. 获取数据)
- [6. 创建面图层](#6. 创建面图层)
- [7. 演示效果](#7. 演示效果)
- [8. 代码实现](#8. 代码实现)
1. 引入 CDN 链接
html
<!-- 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 来引入和初始化三个类:Scene、Mapbox 和 PolygonLayer。L7 库是一个用于创建地图的可控组件的库,它基于 Vue.js 和 Tuandoushi(天斗星)框架。
-
Scene 类:这是一个用于创建地图场景的类。它提供了地图的基本设置,如视图、地图图层和样式。
-
Mapbox 类:这是一个用于创建 Mapbox 地图的类。它提供了基于 Mapbox 的地图服务器的设置。
-
PolygonLayer 类:这是一个用于创建多边形图层的类。它提供了绘制多边形图层的方法。
js
const { Scene, Mapbox, PolygonLayer } = L7;
3. 创建地图
我们创建了一个Mapbox GL JS地图实例,设置了地图的容器、默认的地图风格、中心点坐标、地图级别、默认的地图投影模式以及俯仰角。
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组件负责显示地图和其他图层。
js
const scene = new L7.Scene({
id: "map",
map: new Mapbox({
mapInstance: map,
}),
});
5. 获取数据
使用 fetch 函数从服务器获取数据:
javascript
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
对象,然后添加数据源,接着设置形状、激活状态和颜色等属性,最后将层添加到场景中。
js
// 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. 代码实现
html
<!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>
<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, 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>