Mapbox矢量切片源码解读:http://qiancy.com/2016/12/14/mapbox-vector-tiles/
关于mapbox的介绍,参考这里:https://segmentfault.com/a/1190000010975065
1.Tippecanoe作为切图工具,其中需要用到gdal开源库进行格式转换
2.mbtileserever作为矢量切图发布的服务器
3.mapbox-gl-js 本地化
基本上mapbox-gl-js是围绕着style文件开展工作
通过style的定义来描述整个地图
{
"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地图使用的图层定义。
明显的,当我们尝试将mapbox离线本地化时,应当解决如下内容:
mapbox-gl.js,mapbox-gl.css存储本地服务器
layers,sources 图层本地化
sprite 图标本地化
雪碧图可以在mapbox上,在线制作:https://docs.mapbox.com/api/maps/#add-multiple-new-images-to-sprite
glyphs 字体本地化 https://github.com/mapbox/node-fontnik
html中js的简要代码如下:
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'http://your/basic.json',
center: [113.556, 23.1478], // starting position [lng, lat]
zoom: 10, // starting zoom
hash:true
});
mapbox的logo默认在'bottom-left',如果不想显示logo,找到mapbox-gl.css,查找logo关键字,
把display:block; 设置为display:none;
basic.json的简要代码如下:
{
"version": 8,
"bearing":90,
"pitch":50,
"light":{
"anchor":"viewport",
"color":"blue",
"intensity":0.4
},
"transition":{
"duration":300,
"delay":0
},
// Add @2x before the file extension on a URL to request an image at double scale.
"sprite": "http://your/statics/sprite/sprite@2x",
"glyphs": "http://your/statics/fonts/{fontstack}/{range}.pbf",
"sources": {
"pgis_poi":{
"type":"vector",
"url":"http://your/services/pgis_poi"
},
"pgis_building_mlp":{
"type":"vector",
"url":"http://your/services/pgis_building_mlp"
},
"pgis_xzqh_jwxq":{
"type":"vector",
"url":"http://your/services/pgis_xzqh_jwxq"
},
"pgis_water_landcover": {
"type": "vector",
"url":"http://your/services/water_landcover"
},
"pgis_road":{
"type":"vector",
"url":"http://your/services/pgis_road"
}
},
"layers": [
{
"id":"background",
"type":"background",
"paint":{
"background-color":"hsl(47,26%,88%)"
}
},
{
"id":"xzqh_sj_pl",
"source":"pgis_xzqh_jwxq",
"source-layer":"xzqh_sj_pl",
"type":"line",
"minzoom":4,
"layout": {
"line-cap": "round",
"line-join": "round"
},
"paint": {
"line-color": "hsl(0, 0%, 60%)",
"line-width": {
"base": 3.3,
"stops": [[3,0.5],[22,15]]
}
}
}
}