Mapbox的本地化部署

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]]
				}
			}
		}
}