mapboxGL2离线化应用

Posted 2022-07-31 牛老师讲GIS

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mapboxGL2离线化应用相关的知识，希望对你有一定的参考价值。

概述

mapboxGL升级到2的版本之后，用官方的引用token是必须要有的，为了能够离线使用，我们需要对源码做一定的修改后编译，本文讲述如何进行mapboxGL的离线应用。

效果

实现

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>

以上是关于mapboxGL2离线化应用的主要内容，如果未能解决你的问题，请参考以下文章