mapboxGL2离线化应用

lzugis

发布于 2021-12-06 10:30:39

1.6K0

发布于 2021-12-06 10:30:39

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

概述

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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-09-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

打包