本案例使用L7库和Mapbox GL JS构建中地大楼。
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 来创建一个地图并添加数据到地图上的。L7 库提供了许多组件，如地图、图层、弹窗等，用于创建交互式地图。
Scene：场景，用于绘制地图上的基本元素，如地图底图、事件侦听器等。Mapbox：Mapbox 地图，一种基于 WebGL 的地图引擎，提供了丰富的地图数据和功能。PointLayer：点图层，用于绘制地图上的点数据，如标记、circle 等。GaodeMap：高德地图，一种免费且功能强大的地图服务，提供了丰富的地图数据和功能。PolygonLayer：多边形图层，用于绘制地图上的多边形数据，如矩形、多边形等。LineLayer：线图层，用于绘制地图上的线数据，如线条、虚线等。Popup：弹窗，用于在地图上显示弹窗，展示点的相关信息。
const { Scene, Mapbox, PointLayer, GaodeMap, PolygonLayer, LineLayer, Popup } =
L7;
3. 创建场景
在这里，我们创建基于高德地图的地图场景。
// 基于高德地图的地图场景
const scene = new Scene({
id: "map",
map: new GaodeMap({
style: "light",
center: [114.4, 30.467],
zoom: 16,
// 俯仰角
pitch: 60,
}),
});
4. 加载场景
4.1. 获取数据
使用 fetch 函数从服务器获取数据：
fetch("http://39.103.151.139:8000/gis/zhongdi")
.then((res) => res.json())
.then((data) => {
// ...
});
4.2. 创建多边形图层
// 4.2 创建一个多边形图层
const zhongdiLayer = new PolygonLayer({})
.source(data)
.color("#21a1f1")
.size(100)
.shape("extrude");
// 将图层添加到场景中
scene.addLayer(zhongdiLayer);
4.3. 添加弹窗
当我们点击地图上的某个位置时，会触发这个事件，并显示一个弹出框（Popup）来显示点击位置的属性（名称和工作人员数量）。
// 4.3添加弹窗
// 通过on添加点击事件
zhongdiLayer.on("click", (e) => {
// console.log(e);
// 从回调中的数据，我们可以获取属性以及坐标
const {
feature: {
properties: { name, people },
},
lngLat,
} = e;
// setLnglat需要传入一个经纬度数组
const popup = new Popup({
offsets: [0, 50],
closeButton: false,
})
.setLnglat([lngLat.lng, lngLat.lat])
.setHTML(`<span>名称: ${name}</span><br><span>工作人数: ${people}</span>`);
// 将弹出框添加到场景中
scene.addPopup(popup);
});
5. 演示效果
6. 实现代码
<!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;
/* cursor: pointer; */
}
.l7-popup-content {
background-color: skyblue !important;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// 2. 引入组件
const {
Scene,
Mapbox,
PointLayer,
GaodeMap,
PolygonLayer,
LineLayer,
Popup,
} = L7;
mapboxgl.accessToken =
"pk.eyJ1IjoiemhvbmdkaXNodW1hIiwiYSI6ImNsNXJoYXR5eTI2bGgzZW53d2didWF1c3AifQ.6vOplM2NQc_xnJW3aA5ZBA";
// 3.创建场景
// 基于高德地图的地图场景
const scene = new Scene({
id: "map",
map: new GaodeMap({
style: "light",
center: [114.4, 30.467],
zoom: 16,
// 俯仰角
pitch: 60,
}),
});
// 4.加载场景
scene.on("loaded", () => {
// 4.1 从服务器获取中地数据
fetch("http://39.103.151.139:8000/gis/zhongdi")
.then((res) => res.json())
.then((data) => {
// 4.2 创建一个多边形图层
const zhongdiLayer = new PolygonLayer({})
.source(data)
.color("#21a1f1")
.size(100)
.shape("extrude");
// 将图层添加到场景中
scene.addLayer(zhongdiLayer);
// 4.3添加点击事件
// 通过on添加点击事件
zhongdiLayer.on("click", (e) => {
// console.log(e);
// 从回调中的数据，我们可以获取属性以及坐标
const {
feature: {
properties: { name, people },
},
lngLat,
} = e;
// setLnglat需要传入一个经纬度数组
const popup = new Popup({
offsets: [0, 50],
closeButton: false,
})
.setLnglat([lngLat.lng, lngLat.lat])
.setHTML(
`<span>名称: ${name}</span><br><span>工作人数: ${people}</span>`
);
// 将弹出框添加到场景中
scene.addPopup(popup);
});
});
});
</script>
</body>
</html>