使用Mapbox GL JS加载geojson数据
1 引入mapbox-gl.js文件
方式一：
可以通过官方的地址引入。
html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js"></script>
</head>方式二：
如果是vue项目可以用npm install mapbox-gl，然后main.js里面引入。
js
import mapboxgl from '!mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'2 显示底图
mapbox官方提供了多种底图，选择一种加载出来即可。
html
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYXl1MjM4OSIsImEiOiJjbGU2dTJtc2IwOHplM3JtcnljODZqNWszIn0.iszjybKhsIp0AYyfu8sQmg'
const map = new mapboxgl.Map({
container: 'map',
// You can add layers to the predetermined slots within the Standard style basemap.
style: 'mapbox://styles/mapbox/streets-v11', // mapbox官方给出了几种底图可以选择
center: [104.6826114635814, 28.82097174542686], // 默认地图中心位置
zoom: 17 // 地图缩放级别
})
</script>mapbox框架使用现在需要一个token，这个可以用它官方文档例子里面的，或者自己去注册一个mapbox账号（注册账户需要一个国外的银行账户，这个可以在淘宝上想办法）
官方给了多种底图供选择，选一个自己想要的就好
1.mapbox://styles/mapbox/standard
2.mapbox://styles/mapbox/streets-v12
3.mapbox://styles/mapbox/outdoors-v12
4.mapbox://styles/mapbox/light-v11
5.mapbox://styles/mapbox/dark-v11
6.mapbox://styles/mapbox/satellite-v9
7.mapbox://styles/mapbox/satellite-streets-v12
8.mapbox://styles/mapbox/navigation-day-v1
9.mapbox://styles/mapbox/navigation-night-v1
加载geojson格式数据到图层上
js
map.on('style.load', () => {
// 先向mapbox加入源数据（geojson数据格式 urban-areas为ID，唯一标记该源数据）
map.addSource('urban-areas', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
"type": "Feature",
"geometry": {
"coordinates": [
[
[
104.68224393266865,
28.820825119811616
],
[
104.68237853175276,
28.820806143131804
],
[
104.68253324334302,
28.820821053380044
],
[
104.68263999433981,
28.820854940301558
],
[
104.68275912226375,
28.820936268867015
],
[
104.68286742037816,
28.82104877327741
],
[
104.68289526846553,
28.82113416811103
],
[
104.68287515595705,
28.821333422448802
],
[
104.68282255401743,
28.82143237174087
],
[
104.68183509950171,
28.822183326112793
],
[
104.68168404453667,
28.822164945238
],
[
104.68153298957174,
28.82207426620606
],
[
104.68144627283152,
28.82203015205387
],
[
104.68134696817822,
28.821940698298548
],
[
104.68130504534406,
28.82174906388728
],
[
104.68130581736818,
28.821644899952986
],
[
104.68134441858416,
28.821514356693072
],
[
104.68200651171475,
28.820943623997778
],
[
104.68224393266865,
28.820825119811616
]
]
],
"type": "Polygon"
},
"properties": {
'color': '#FF0000',
'height': 20
}
},
{
"geometry": {
"coordinates": [
[
[
104.68249981776768,
28.822209737427144
],
[
104.68327453745434,
28.82160047562293
],
[
104.68299946596244,
28.82133219016545
],
[
104.6822274898658,
28.821938871178958
],
[
104.68249981776768,
28.822209737427144
]
]
],
"type": "Polygon"
},
"type": "Feature",
"properties": {
'color': '#9f5f9f',
'height': 40
}
}
]
}
})
// urban-areas源数据加入图层，通过geojson数据里的properties获取color和height实现颜色高度自定义
map.addLayer({
'id': 'urban-areas-fill',
'type': 'fill-extrusion',
'source': "urban-areas",
'paint': {
'fill-extrusion-color': ['get', 'color'], // 获取properties里面的color属性值
'fill-extrusion-height': ['get', 'height'], // 获取properties里面的height属性值
'fill-extrusion-opacity': 0.9, // 透明度
'fill-extrusion-base': 0, // 距离底层地图的距离
}
})
});需要先addSource添加源数据（也就是geojson格式数据），然后再向地图添加图层addLayer。
这样图层就显示在了地图上，可以设置其颜色、高度等。
上面的geojson数据是博主在mapbox studio上随意画的。
mapbox studio是官方用来制作地图的一个在线网站，很好用，需要注册mapbox账号才能使用！
