最近项目中需要使用MapBox GL进行地图渲染，用户需求是在局域网中运行，所以需要将MapBox GL进行本地化开发及部署。下面记录下本地开发部署的流程和方法。
官方给定的资料
1.官方示例中初始化一个简单地图的代码如下：
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
从代码中看出，本地化开发，只需将style本地化即可。
2.在官方style讲解中，style包含以下内容。https://docs.mapbox.com/mapbox-gl-js/style-spec/
{
"version": 8,
"name": "Mapbox Streets",
"sprite": "mapbox://sprites/mapbox/streets-v8",
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"sources": {...},
"layers": [...]
}
参数说明：
- version：样式版本，当前必须必须设置8。
- name：样式名称，设置一个可读的名称描述即可。
- sprite：mapbox地图使用的图标。
- glyphs：mapbox地图使用的标注字体。
- sources： mapbox地图使用的地图服务资源定义。
- layers： mapbox地图使用的图层定义。
所以本地化开发部署，只需对sprite、glyphs、sources、layers进行本地部署即可。
sources本地化
官网说明中，sources支持vector、raster、raster-dem、geojson、image、video格式数据。下面以raster为例加载geoserver的wms服务。
{
'type': 'raster',
'tiles': [
url + '&version=1.1.0&request=GetMap&layers=' + layers + '&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE'
],
'tileSize': 256
}
其中，url为wms服务的地址，layers为wms图层名称。
layers本地化
官方介绍layers如下：
A style's layers property lists all of the layers available in that style. The type of layer is specified by the "type" property, and must be one of background, fill, line, symbol, raster, circle, fill-extrusion, heatmap, hillshade.
此处可以背景为例：
'layers': [{
'id': 'background',
'type': 'background',
'paint': {
'background-color': '#FFFFFF'
},
'interactive': true
}]
sprite本地化
mapbox提供了一个spritezero工具，用于自定义生成mapbox的sprite，其GitHub地址如下：https://github.com/mapbox/spritezero-cli
如若不想编译GitHub上的程序，可关注下方公众号，回复“sprite”，发您我百度网盘上编译好的程序。
glyphs本地化
mapbox中使用的字体，也是pbf格式而不是tff格式，需要使用工具转换，查询资料发现，genfontgl这个node库可以执行将tff文件转成mapbox可用的pbf字体。
若不想自己转化，关注下方公众号，回复“glyphs”，发您我转化好的字体库连接。
至此所有本地化准备工作已完成，下面开始使用这些本地库
本地开发示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hello world</title>
<meta charset="utf-8" />
<script src='./libs/mapbox-gl.js'></script>
<link href='./libs/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = new mapboxgl.Map({
container: 'map',
style: {
"version": 8,
"name": "Mapbox Streets",
"sprite": "http://localhost:8080/mapbox_build/sprite/sprite",
"glyphs": "http://localhost:8080/mapbox_build/fonts/{fontstack}/{range}.pbf",
"sources": {
"world-map": {
"type": "raster",
'tiles': [
"http://localhost:8080/geoserver/smartcity/wms?service=WMS&version=1.1.0&request=GetMap&layers=world-map&styles=&bbox={bbox-epsg-3857}&width=256&height=256&srs=EPSG:3857&format=image/png&TRANSPARENT=TRUE'
],
'tileSize': 256
}
},
"layers": [{
"id": "XXXXXXXXX",
"type": "raster",
"source": "world-map",
"source-layer": "world-map"
}]
},
center: [-96, 37.8],
zoom: 3
});
</script>
</body>
</html>
至此，所有资源均已本地化，可以进行本地化开发部署了。但，MapBox线上服务我们使用不了，所有的资源都需要自己定制开发。
扫描下方二维码，关注微信公众号，精彩内容同步更新，有问题可随时交流
微信公众号
网友评论