解决Mapbox GL JS国内底图加载问题 - MineData替换

原文地址：解决Mapbox GL JS国内底图加载问题 - MineData替换

众所周知，Mapbox GL JS是一个JavaScript库，它使用WebGL以矢量切片和Mapbox Style渲染交互式地图。但是，有一种"墙"叫做"GFW"，经常出现地图加载不出来的情况，另外，Mapbox使用的是OSM数据，也就存在边界线问题。好消息是Mapbox已经入驻中国，相信不久就会推出符合中国政府标准的地图，目前已经在移动端推出（Mapbox 发布中国地图插件，同时支持 iOS 和 Android 两大平台| 附中文文档）。
但是，目前不是还没推出嘛，要想加载稳定、速度快也有办法：

1. 不用Mapbox，加载诸如高德、百度、GeoQ的瓦片地图服务；
2. 自己发布地图服务，可用GeoServer；
3. 使用MineData平台(四维图新)的数据替换。

方法1，不能"自定义地图样式"，没有了自定义就没有了灵魂（心中一万个舍不得）；方法2，数据获取、更新、质量都是问题。下面进入方法3......

注册MineData，发布地图

在MineData页面注册账号并进入工作台，如下图，可以看到很多默认样式。

MindeData工作台

在"我的地图"里新增方案并发布，记住 token 和 solution 。

我的地图

然后导出样式文件。

导出样式文件

修改样式文件

下载的文件格式如下（完整的已上传至Github，传送门 - 9389.json）：

{
  "version": 8, // 版本号
  "glyphs": "minemap://fonts/{fontstack}/{range}", // 字体
  "sprite": "minemap://sprite/sprite", // 雪碧图
  "layers": [], // 图层
  "sources": {} // 数据源
}

这个样式文件是不能直接使用的，需要做一些修改。

配置变量

请求数据源需要token和solution，并且数据源的url还有一些区别，具体配置可在源码中查到minemap.js，所以定义了以下配置变量，也方便修改。

var CONFIG = {
  API_URL: "http://minedata.cn/minemapapi/v2.0.0/",
  DATA_URL: "http://datahive.minedata.cn/data/",
  ACCESS_TOKEN: '',
  SOLUTION: 9389
};

字体和雪碧图

{
  "glyphs": config.API_URL + "fonts/{fontstack}/{range}.pbf",
  "sprite": config.API_URL + "sprite/sprite",
}

数据源

{
  "source": {
    "Landuse": {
      "tiles": [CONFIG.DATA_URL + "Landuse/{z}/{x}/{y}?token=" + CONFIG.ACCESS_TOKEN + "&solu=" + CONFIG.SOLUTION],
      "type": "vector"
    },
  }
}

样式冲突

minemap.js目前版本为v2.0.0，style和最新的Mapbox GL JS存在一些冲突。比如：

• extrusion → fill-extrusion
• fill-water，这个估计是minemap自定义的，Mapbox没有，我直接删除了
• filter里的 !arrin 和 !in ，不知道是Mapbox去掉了，还是minemap自定义的，我直接改为 !in 和 in 了，目前未发现问题，发现问题再看

附：in 或 !in 是数据源要素属性中存放的是字符串或数字,过滤条件去判断存在或不存在这些字符串或数字；arrin 或 !arrin 是数据源要素属性中存放的是字符串或数字组成的数组,过滤条件去判断要素属性数组数据中存在或不存在这些过滤内容。

修改结果

修改后的样式文件9389.js，

var map = new mapboxgl.Map({
  container: 'map',
  style: _style, // 修改后的样式对象，用json路径会报错，改为js对象即可
  center: [104.29318, 35.70000],
  zoom: 4,
  minZoom: 3
}); 

加载完成，速度很快！

结果