背景
我们在使用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了解