mapbox gl本地化部署实践
最近由于项目要求,需将mapbox gl部署在内网服务器中,经过分析后发现,需要本地化配置的主要包括mapbox gl的js库、css库及其他依赖库(如turf等)mapbox gl调用的地图服务mapbox gl字体库mapbox gl图标库1.地图下载:1.JS库资源下载首先,mapbox gl的js库和css库等资源可以下载到本地文件夹中,此步比较简单,在此就不再赘述。另外如果是采用vue、
最近由于项目要求,需将mapbox gl部署在内网服务器中,经过分析后发现,需要本地化配置的主要包括
- mapbox gl的js库、css库及其他依赖库(如turf等)
- mapbox gl调用的地图服务
- mapbox gl字体库
- mapbox gl图标库1.地图下载:
1.JS库资源下载
首先,mapbox gl的js库和css库等资源可以下载到本地文件夹中,此步比较简单,在此就不再赘述。另外如果是采用vue、react等前端框架,安装mapbox相关依赖即可。
2.离线地图下载:
mapbox gl调用的地图服务可以通过多种方式进行配置,比如geoserver或者nginx代理的方式,本文主要讲后者。
地图下载的方式有很多种,比全能地图下载器、水经注、太乐地图下载器等等,本文采用比较简单的方式(无需授权,免费),通过qgis下载天地图(qgis所用版本3.20)。
打开qgis,下载插件QMetaTiles,然后在qgis左侧添加天地图在线地图,以影像地图为例,在XYZ Tile中右键新建连接,输入天地图的底图地址和标注地址:
URL:(key需要自己申请,免费):http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你申请的key
影像底图注记url:https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=你申请的key
然后将影像地图和标注添加到地图中,如下图显示,添加到地图后,往往会由于网络问题存在不可见的情况,此时需耐心等待一会,可通过鼠标滚轮适当滚动来查看影像地图,滚动太快可能影像会不能及时加载出来。
影像地图下载,点击QMetaTils,打开地图下载页面,配置相关参数,然后就可以将地图下载到本地了,注意下载的地图是金字塔结构,除非项目需要,不易过大。地图下载后可通过nginx进行代理转发。
3.字体库和图标库下载
mapbox gl的sprite库和glyphs库可通过以下链接获取,然后通过nginx进行代理转发
4.示例
由于mapbox gl所依赖的所有在线资源均已本地化处理,所以token就不再需要。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Extrude polygons for 3D indoor mapping</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="./js/mapbox-gl.js"></script>
<link rel="stylesheet" type="text/css" href="./css/mapbox-gl.css"/>
<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({
version: 8,
container: 'map',
style:{
version: 8,
// {fontstack}请求字形时,此标记将替换text-font为符号图层属性中指定的字体堆栈中以逗号分隔的字体列表
// {range}请求字形时,此标记将替换为256个Unicode代码点
// 例如,要为Unicode Basic Latin和Basic Latin-1 Supplement块加载字形,范围将为0-255,根据需要显示的文本,在运行时确定加载的实际范围
glyphs: 'http://localhost:8088/mapbox/{fontstack}/{range}.pbf',
sprite: 'http://localhost:8088/mapbox/sprite/sprite',
visibility: 'public',
sources: {
'tdt-tiles': {
'id': 'tdt_image_tile',
'type': 'raster',
'tiles': [
'http://localhost:8088/tiles/{z}/{x}/{y}.png'
],
'tileSize': 256
},
},
layers: [{
id: 'layer-tiles',
type: 'raster',
source: 'tdt-tiles'
}]
},
center: [114.747, 30.46325],
zoom: 8,
antialias: true,
minzoom: 8,
maxzoom: 19
});
</script>
</body>
</html>
注意:在mapbox gl中使用字体时,要根据本地已有的字体库来设置,如下所示:
'layout': {
'text-field': '{name}',
'text-size': 14,
'text-offset': [0, 2],
'text-font': ['DIN Offc Pro Medium', 'Arial Unicode MS Bold'],
}
更多推荐
所有评论(0)