概述
mapboxGL升级到2的版本之后，用官方的引用token是必须要有的，为了能够离线使用，我们需要对源码做一定的修改后编译，本文讲述如何进行mapboxGL的离线应用。
效果
image.png
实现
- clone代码
git clone https://gitee.com/lzugis15/mapbox-gl-js.git
- 安装依赖
npm install
-- 建议用cnpm，安装速度会快点
cnpm i
- 修改源码
token强制认证是在文件src/ui/map.js中，注释掉2871行的代码this._authenticate()即可。 - 编译
- 编译js
npm run build-dev
- 编译css
npm run build-css
- 引用测试
编译完的文件位于dist目录下面，mapbox-gl-dev.js和mapbox-gl.css，在当前目录下新建html文件进行测试，html文件内容如下：
<!DOCTYPE html>
<html>
<head>
<title>Mapbox GL JS debug page</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel='stylesheet' href='../dist/mapbox-gl.css' />
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
</style>
</head>
<body>
<div id='map'></div>
<script src='../dist/mapbox-gl-dev.js'></script>
<script src='../dist/turf.min.js'></script>
<script>
const MAPTYPE = {
NAVIMG: 'nav_img',
NAVLBL: 'nav_lbl',
NAVVEC: 'nav_vec'
}
function getNavTileUrls(lyr) {
let res = [];
const dict = {
'nav_img': 'https://webst0${subdomain}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
'nav_lbl': 'https://webst0${subdomain}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}',
'nav_vec': 'http://webrd0${subdomain}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
}
for(let i = 1; i < 5; i++) {
let url = dict[lyr];
url = url.split('${subdomain}').join(i);
res.push(url)
}
return res;
}
const mapStyle = {
"version": 8,
"name": "Dark",
"sources": {
"osm": {
"type": "raster",
"tiles": [
'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
],
"tileSize": 256
},
"gaode-img": {
"type": "raster",
"tiles": getNavTileUrls(MAPTYPE.NAVIMG),
"tileSize": 256
},
"gaode-lbl": {
"type": "raster",
"tiles": getNavTileUrls(MAPTYPE.NAVLBL),
"tileSize": 256
},
"gaode-vec": {
"type": "raster",
"tiles": getNavTileUrls(MAPTYPE.NAVVEC),
"tileSize": 256
}
},
"layers": [
{
"id": "img",
"type": "raster",
"source": "gaode-vec",
"minzoom": 1,
"maxzoom": 18
}
]
};
var map = window.map = new mapboxgl.Map({
container: 'map',
zoom: 3.4,
center: [104.61023753726323, 35.63101027697721],
style: mapStyle,
hash: false,
maxZoom: 17.2
});
map.addControl(new mapboxgl.NavigationControl())
</script>
</body>
</html>
网友评论