在Mapbox GL JS 设计浅析中我们知道Mapbox GL JS使用的样式是在线的，比如官网中第一个例子：
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYW56aGlodW4iLCJhIjoiY2lsdnhjdjN5MDFvMHVia3NpYTlnbmUzaSJ9.twlExCjpR7uwH2IiFC7aDA';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
center: [-74.50, 40], // starting position
zoom: 9 // starting zoom
});
</script>
代码里面需要设置accessToken，而且mapboxgl.Map的配置style设置的是一个mapbox网站特有的样式url：mapbox://styles/mapbox/streets-v9。通常，我们一看到这样的情况，基本就放弃本地化的打算了。但Mapbox GL JS确实太诱人了，我最终也没有抵御住它的诱惑，想要本地化来使用。经过几乎一天的努力，终于基本搞定。
另一种style配置
通过官网Style Reference，可以看到style除了可以设置为一个url之外，还可以配置为一个如下的对象：
{
"version": 8,
"name": "Mapbox Streets",
"sprite": "mapbox://sprites/mapbox/streets-v8",
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"sources": {...},
"layers": [...]
}
从而我们就可以分开配置 sprite，glyphs，sources和layers，这样或许还有一些希望。
自定义source，加载OSM在线瓦片
sprite和glyphs看起来比较麻烦，那么我们先解决sources，看有没有可能加载本地瓦片，或者在线瓦片，反正不要加载mapbox的在线瓦片。Mapbox GL JS针对Raster Tile提供了一种Source类型：raster。经过**聪明伶俐一休桑 **的尝试和验证，用下面这种方式：
"sources": {
"osm-tiles": {
"type": "raster",
'tiles': [
"http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
],
'tileSize': 256
}
}
是可以加载在线的OSM瓦片的， 既然这样可以，那么本地瓦片，其他在线瓦片，或者自己服务器上的瓦片也是可以加载的。我们不需要修改任何的地方，就能加载第三方的瓦片，从而实现了第一步。
加载一些feature
瓦片地图加载后，我们尝试往地图上加载一些矢量的feature，如果这一步不能达到，自然就没办法使用了。Mapbox GL JS提供了geojson的数据源类型，我们就使用这个：
// 添加数据源
map.addSource("points", {
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.03238901390978, 38.913188059745586]
},
"properties": {
"title": "Mapbox DC 中国文字",
"icon": "monument"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-122.414, 37.776]
},
"properties": {
"title": "Mapbox SF",
"icon": "harbor"
}
}]
}
});
// 添加图层，使得上面的数据源里面的数据可视化
map.addLayer({
"id": "points",
"type": "symbol",
"source": "points",
"layout": {
"icon-image": "{icon}-15",
"text-field": "{title}",
"text-font": ["Open Sans Regular"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
上面这段代码，添加一个geojson的矢量数据源，同时添加一个对应的symbol的图层。并通过layout定义要素的样式。这段代码出自官网例子Draw GeoJSON points。通过上面的代码，我们发现icon-image和text-font的设置，不同于其他的webgis。一般icon-image会设置为一个图片的url，或者HTMLImage对象。text-font我们也不能随意设定。添加上这段代码后，我们可以在地图上看到图标和文字，如下：
基本达到我们的要求。
图标从哪儿来的？
我们仅仅通过"icon-image": "{icon}-15", 这个设置，就在地图上出现了图标， 它们来自于哪里？ 带着这个疑问，快速打开控制面板看了一下HTTP请求，发现图标来源于"sprite": "mapbox://sprites/mapbox/streets-v8",这个配置。如果去掉这个配置，页面显示时，就会报错：Error: layers.points.layout.icon-image: use of "icon-image" requires a style "sprite" property 。看来要想本地化，就得解决这个sprite的问题。
本地化sprite
通过HTTP请求可以发现，sprite的配置，会导致两个请求，一个sprite.png的请求，一个是sprite.json的请求。sprite.png请求的结果如下：
通过上图，基本可以看出来这是图标的集合，通过把所有的图标放在一起，减少了HTTP请求次数，从而起到优化作用。Mapbox肯定很精通这种方式。既然是集合图片，获取其中的某一个图片，自然就需要坐标位置，图片大小等信息，为此不难猜测sprite.json里面存储的是什么信息了：
{"us-highway-alternate-2":{"width":20,"height":38,"x":0,"y":0,"pixelRatio":1},"us-highway-alternate-3":{"width":26,"height":38,"x":0,"y":38,"pixelRatio":1},"us-highway-business-2":{"width":20,"height":38,"x":20,"y":0,"pixelRatio":1},"us-highway-business-3":{"width":26,"height":38,"x":40,"y":0,"pixelRatio":1},"us-highway-bypass-2":{"width":20,"height":38,"x":26,"y":38,"pixelRatio":1},"us-highway-bypass-3":{"width":26,"height":38,"x":46,"y":38,"pixelRatio":1},"us-highway-truck-2":{"width":20,"height":38,"x":0,"y":76,"pixelRatio":1},"us-highway-truck-3":{"width":26,"height":38,"x":20,"y":76,"pixelRatio":1},"gb-national-rail.london-dlr.london-overground.london-tfl-rail.london-underground":{"width":60,"height":34,"x":0,"y":114,"pixelRatio":1},"de-s-bahn-01":{"width":17,"height":32,"x":60,"y":114,"pixelRatio":1},"de-s-bahn.de-u-bahn"