参考了以下内容:
https://www.jianshu.com/p/693f38ec5730
https://zhuanlan.zhihu.com/p/30967394
感谢两位大大的无私贡献。
先上代码,篇幅略长。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"name": "Mapbox Streets",
"sprite": "http://localhost:8089/images/sprite1",
"glyphs": "http://localhost:8089/{fontstack}/{range}.pbf",
"sources": {
"osm-tiles": {
"type": "raster",
'tiles': [
"http://mt2.google.cn/vt/lyrs=s@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"
],
'tileSize': 256
},
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "osm-tiles",
"minzoom": 0,
"maxzoom": 22
}]
}, //hosted style id
center: [121, 31], // starting position
zoom: 0 // starting zoom
});
</script>
</body>
</html>
接下来详细的操作步骤:
1:https://www.mapbox.cn/mapbox-gl-js/examples/
MapBox的官方API,只需要拷贝代码,并且将 mapbox的 token复制到
位置,打开网页,确保网络情况正常的情况下即可访问。
这里就不多叙述了,下面开始本地化策略吧。
2:style样式本地化,
在https://www.jianshu.com/p/693f38ec5730 看出 style样式是可以使用另一种方式的
{
"version": 8,
"name": "Mapbox Streets",
"sprite": "mapbox://sprites/mapbox/streets-v8",
"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
"sources": {...},
"layers": [...]
}
sources 里需要放置 瓦片获取路径等信息
3:获取sprite
打开我们刚刚获取到的mapbox网页,在network中查看网络请求。
在这里我们过滤下请求,就可以看到sprite.json 与 sprite.png了
这两个里面包含的是图标
json则是包含了图标的位置。
"sprite": "http://localhost:8089/images/sprite1",
文件夹路径:
4:获取glyphs
这个则是字体样式
字体样式网上有很多的下载连接,在这里给出一个下载连接 宋体
https://pan.baidu.com/s/1lv69EP5QlaUnlKZlH4-qlA
解压后就可以得到 宋体的字体样式
看下这个连接,{fontstack}与{range}是展位符,这里我们不需要去管range只需要看下fontstack
{fontstack} 会对应这个里面,将内容更改为文件夹名称即可,不要有中文空格等。防止解析失败。
"glyphs": "http://localhost:8089/{fontstack}/{range}.pbf",
5:瓦片
"sources": {
"osm-tiles": {
"type": "raster",
'tiles': [
"http://mt2.google.cn/vt/lyrs=s@167000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"
],
'tileSize': 256
},
},
这里加载的是 google 的 地图服务。
https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=*****************************
这个是mapbox的瓦片格式。
瓦片各位老师如果有 途径的话可以把这个 瓦片下载下来,
实现真正本地操作。