mapbox去除token,加载本地发布的矢量切片底图

背景

我们在使用mapbox地图引擎，如果部署的服务器是内网环境，不允许访问互联网，就不能使用mapbox官方提供的在线地图了，这样我们就需要离线化部署

准备数据源

数据源我们可以爬取mapbox的矢量切片，包括一些样式文件，这样的话我们可以先在mapbox studio先配好地图，然后下载样式文件，最后直接将样式中的layers整体替换就可以，方便后期地图样式的调整。

下载矢量切片可以用这个下载软件
mapdownload: mapbox离线地图下载

具体怎么使用这里就不说了
使用参照这篇博客

下载好切片数据，文件格式如下

部署到nginx、IIS、或者tomcat上，注意MIME里添加.pbf格式
如果浏览index.html能正常显示地图就没有问题。

mapbox地图引擎去除token

修改mapbox-gl.js文件中“this._requestManager._customAccessToken,(e=>{if(e&&(false))”，注销掉token验证的部分代码，框架就不会验证token。

mapbox加载本地部署的地图服务

可以将style.json文件改为style.js直接引入到项目中，方便后面样式的修改

import baseStyle from "../../gis/core/style";
// 设置矢量切片源
     baseStyle.sources.composite = {
       type: "vector",
       tiles: ["http://localhost:8084/source/composite/tiles/{z}/{x}/{y}.pbf"],
     }
     // 设置地图小图标
     baseStyle.sprite = "http://localhost:8084/sprites/sprite"
     // 设置字体文件
     baseStyle.glyphs = "http://localhost:8084/fonts/{fontstack}/{range}.pbf"

     //加载离线地图
     //const bounds=[[117.246,31.728],[117.333,31.816]];
     this.map = new mapboxgl.Map({
       container: containerId,
       //style: roadStype, // mapbox底图
       style:baseStyle,
       center: [117.2895,31.772], // 初始化中心点
       zoom: 12, // 初始化层级
       //minZoom:11,
       //maxZoom:16,
       //maxBounds: bounds
     })

最后效果如下

后期有修改底图样式需求

后期有修改底图样式，可以直接在mapbox studio中先配置好，然后将样式文件下载下来，替换style中的layers就可以了

下载的样式文件复制layers替换到项目中的style中的layers

最终地图样式就改变了

如果mapbox地图下载器链接失效，这里下载

自己花了好几个月写了一个基于mapbox的gis框架，下载地址，能很方便大家学习，也很容易应用到gis展示的项目中，感兴趣加我QQ了解