MapBox本地化部署

2019-10-24   1,305 次阅读


本项目GitHub地址: MapBox

参考了以下内容(感谢两位大大的无私贡献。):

https://www.jianshu.com/p/693f38ec5730
https://zhuanlan.zhihu.com/p/30967394

1:获取最新的js及其他资源

MapBox官网示例

如果没有注册的小伙伴可能需要进行一下注册。


打开我们刚刚获取到的mapbox网页,在network中查看网络请求。

sprite图标及位置文件

过滤到sprite可以得到jsonpng文件,png存放了图标的样式,而json则存储了图标的位置等信息。


下载字体文件

得到字体文件来进行字体的展示。

2:文件所处目录

文件目录一览

如图所示: css存放了Mapboxcss文件, font存放了所有的字体文件, images下存放了sprite.json文件和sprite.png图片, js存放了Mapboxjs文件, mbtiles存放了中国地图的mbtiles文件(仅限测试使用)。

3:Index.html组成

<!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/images/sprite",//本地的json及图片
            "glyphs": "http://localhost/font/{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>

4:Nginx配置访问

修改nginx的文件用来打开本地化项目。

修改为文件存放路径即可。

nginx配置修改处

5:使用tileServer进行解析Mbtiles

如果不适用谷歌的切片,则需要手动指定切片服务。

这里推荐使用TileServer GL

或者是:mbview

当前项目中已经提供了Mbtiles文件,但仅限于测试使用。

6:项目一览

本地化后地图查看

Q.E.D.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议