mapboxGL2离线化应用

Posted LZU-GIS

tags:

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

概述

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

效果

实现

  1. clone代码
git clone https://gitee.com/lzugis15/mapbox-gl-js.git
  1. 安装依赖
npm install
-- 建议用cnpm,安装速度会快点
cnpm i
  1. 修改源码
    token强制认证是在文件src/ui/map.js中,注释掉2871行的代码this._authenticate()即可。
  2. 编译
- 编译js
npm run build-dev

- 编译css
npm run build-css
  1. 引用测试
    编译完的文件位于dist目录下面,mapbox-gl-dev.jsmapbox-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离线化应用的主要内容,如果未能解决你的问题,请参考以下文章

mapboxGL2中Terrain的离线化应用

mapboxGL2中Terrain的离线化应用

npm 包离线化

npm 包离线化

HDU-5441-离线化并查集

极致的 Hybrid:航旅离线包再加速!(转)