在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我们也不能随意设定。添加上这段代码后，我们可以在地图上看到图标和文字，如下：

mapbox-example.png

基本达到我们的要求。

图标从哪儿来的？

我们仅仅通过"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请求的结果如下：

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":{"width":17,"height":32,"x":46,"y":76,"pixelRatio":1},"pe-national-2":{"width":18,"height":26,"x":77,"y":114,"pixelRatio":1},"pe-national-3":{"width":22,"height":26,"x":95,"y":114,"pixelRatio":1}
......

由于图片比较多，暂且放置一部分内容在上面。通过上面的内容可以看出，基本和我们猜想的一样。既然Mapbox GL JS采用这种方式加载图标，那么我们准守这种约定，在本地提供图标合集和信息，基本上也能解决问题。所以我们大胆的尝试一下修改sprite为本地路径： "sprite": "./"，修改之后测试一下，发现请求的地址确实变成本地的了：http://127.0.0.1:3209/.json, http://127.0.0.1:3209/.png。我们还需要取一个名字，比如这样设置，"sprite": "./sprite"。在本地准备好sprite.png和sprite.json这两个文件就好了。 Okay，这样图标的问题解决了。那么还剩下glyphs的本地化了。

本地化字体

通过上面排查图标的方式，我们可以发现字体也是从Mapbox网站上请求的，每一个汉字都会请求一次。想必我们也是有办法在本地搭建一个本地化的服务器来提供汉字请求服务的。同样的，我们修改为本地的地址试试："glyphs": "./font/{fontstack}/{range}.pbf", 。确认这次请求的地址是本地，而fontstack和range会被具体的字体类型和这个字在字体中所处的实际范围给替换了。完成了第一步之后，我们需要处理的是怎么提供这种字体服务器，由于Mapbox GL JS使用的SDF的方式绘制字体，Mapbox团队也开源了一个工具，将普通的ttf和otf字体转换成Mapbox GL渲染需要的字体的工具：node-fontnik。转换后的字体就像下面这样：

sdf font.png

这样我们就可以把他们全部放在本地了。

最终代码

最后，我们的代码也不需要设置accessToken了，并没有使用任何Mapbox的地图样式和地图资源服务，可以这样：

var map = new mapboxgl.Map({
      container: 'map', // container id
      style: {
        "version": 8,
        //      style: 'mapbox://styles/mapbox/basic-v9',
        //      "sprite": "mapbox://sprites/mapbox/streets-v8",
        "sprite": "./sprite",
        "glyphs": "./font/{fontstack}/{range}.pbf",
        "sources": {
          "osm-tiles": {
            "type": "raster",
            'tiles': [
                  "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
              ],
            'tileSize': 256
          }
        },
        "layers": [{
          "id": "simple-tiles",
          "type": "raster",
          "source": "osm-tiles",
          "minzoom": 0,
          "maxzoom": 22
        }]
      },
      center: [-96, 37.8],
      zoom: 3
    });

Okay，完成收工！

Mapbox GL JS本地化实践