眾所周知，Mapbox GL JS是一個(gè)JavaScript庫(kù)，它使用WebGL以矢量切片和Mapbox Style渲染交互式地圖。但是，有一種"墻"叫做"GFW"，經(jīng)常出現(xiàn)地圖加載不出來(lái)的情況，另外，Mapbox使用的是OSM數(shù)據(jù)，也就存在邊界線問(wèn)題。好消息是Mapbox已經(jīng)入駐中國(guó)，相信不久就會(huì)推出符合中國(guó)政府標(biāo)準(zhǔn)的地圖，目前已經(jīng)在移動(dòng)端推出（Mapbox 發(fā)布中國(guó)地圖插件，同時(shí)支持 iOS 和 Android 兩大平臺(tái)| 附中文文檔）。
但是，目前不是還沒(méi)推出嘛，要想加載穩(wěn)定、速度快也有辦法：
- 不用Mapbox，加載諸如高德、百度、GeoQ的瓦片地圖服務(wù)；
- 自己發(fā)布地圖服務(wù)，可用GeoServer；
- 使用MineData平臺(tái)(四維圖新)的數(shù)據(jù)替換。
方法1，不能"自定義地圖樣式"，沒(méi)有了自定義就沒(méi)有了靈魂（心中一萬(wàn)個(gè)舍不得）；方法2，數(shù)據(jù)獲取、更新、質(zhì)量都是問(wèn)題。下面進(jìn)入方法3......
注冊(cè)MineData，發(fā)布地圖
在MineData頁(yè)面注冊(cè)賬號(hào)并進(jìn)入工作臺(tái)，如下圖，可以看到很多默認(rèn)樣式。
在"我的地圖"里新增方案并發(fā)布，記住 token 和 solution 。
然后導(dǎo)出樣式文件。
修改樣式文件
下載的文件格式如下（完整的已上傳至Github，傳送門 - 9389.json）：
{
"version": 8, // 版本號(hào)
"glyphs": "minemap://fonts/{fontstack}/{range}", // 字體
"sprite": "minemap://sprite/sprite", // 雪碧圖
"layers": [], // 圖層
"sources": {} // 數(shù)據(jù)源
}
這個(gè)樣式文件是不能直接使用的，需要做一些修改。
配置變量
請(qǐng)求數(shù)據(jù)源需要token和solution，并且數(shù)據(jù)源的url還有一些區(qū)別，具體配置可在源碼中查到minemap.js，所以定義了以下配置變量，也方便修改。
var CONFIG = {
API_URL: "http://minedata.cn/minemapapi/v2.0.0/",
DATA_URL: "http://datahive.minedata.cn/data/",
ACCESS_TOKEN: '<your access token here>',
SOLUTION: 9389
};
字體和雪碧圖
{
"glyphs": config.API_URL + "fonts/{fontstack}/{range}.pbf",
"sprite": config.API_URL + "sprite/sprite",
}
數(shù)據(jù)源
{
"source": {
"Landuse": {
"tiles": [CONFIG.DATA_URL + "Landuse/{z}/{x}/{y}?token=" + CONFIG.ACCESS_TOKEN + "&solu=" + CONFIG.SOLUTION],
"type": "vector"
},
}
}
樣式?jīng)_突
minemap.js目前版本為v2.0.0，style和最新的Mapbox GL JS存在一些沖突。比如：
- extrusion → fill-extrusion
- fill-water，這個(gè)估計(jì)是minemap自定義的，Mapbox沒(méi)有，我直接刪除了
- filter里的
!arrin和!in，不知道是Mapbox去掉了，還是minemap自定義的，我直接改為!in和in了，目前未發(fā)現(xiàn)問(wèn)題，發(fā)現(xiàn)問(wèn)題再看
附：
in或!in是數(shù)據(jù)源要素屬性中存放的是字符串或數(shù)字,過(guò)濾條件去判斷存在或不存在這些字符串或數(shù)字；arrin或!arrin是數(shù)據(jù)源要素屬性中存放的是字符串或數(shù)字組成的數(shù)組,過(guò)濾條件去判斷要素屬性數(shù)組數(shù)據(jù)中存在或不存在這些過(guò)濾內(nèi)容。
修改結(jié)果
修改后的樣式文件9389.js，
var map = new mapboxgl.Map({
container: 'map',
style: _style, // 修改后的樣式對(duì)象，用json路徑會(huì)報(bào)錯(cuò)，改為js對(duì)象即可
center: [104.29318, 35.70000],
zoom: 4,
minZoom: 3
});
加載完成，速度很快！
