MapBox本地化部署

参考了以下内容:

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的瓦片格式。 

瓦片各位老师如果有 途径的话可以把这个 瓦片下载下来,

实现真正本地操作。

猜你喜欢

转载自blog.csdn.net/weixin_42655593/article/details/86075689