ol+天地图+geoserver_mapbox+GeoglobeJS天地图

最近因为业务需求接触了mapbox这个插件，过程中踩了超多坑，现在就我接触到的一些资料与踩过的坑，总结一下，希望看到这篇文章的码友们能帮助到你们。

文档

官方文档：

英文版：docs.mapbox.com/mapbox-gl-j…

中文版：www.mapbox.cn/mapbox-gl-j…

辅助文档：

数据交换格式： zh.wikipedia.org/wiki/GeoJSO…

距离计算： turfjs.org/docs/

用法

具体的用法官方文档写的很清楚，请多读文档，这里只讨论页面引入js的写法。

复制代码

mapboxgl.accessToken = 注册登录后获取的token;

var map = new mapboxgl.Map({

container: 'map',

style: 'mapbox://styles/mapbox/streets-v11',

#这里的style是地图的样式，可以自定义，也可以使用mapbox已有的地图样式。

});

复制代码

资源本地化

上面代码运行之后，会发现所有的资源加载的是mapbox网站的资源，这样导致我们页面打开速度慢，偶尔mapbox网站崩了，我们页面也打不开，所以就需要资源加载本地化。

如上图，即mapbox://styles/mapbox/streets-v11的具体内容，先把我们的代码修改之后如下：

mapboxgl.accessToken = 注册登录后获取的token;

var map = new mapboxgl.Map({

container: 'map',

style: {

version: 8,

name: "myMap",

sources: {},

layers: [],

center: [0, 0],

zoom: 3,

sprite: "http://localhost:3000/map/sprite", #此处sprite的地址必须是url的地址

glyphs: "/map/font/{fontstack}/{range}.pbf", #fontstack 是字体的名字，也是文件名，range 是pbf的命名

visibility: "public",

created: "2020-04-01T00:00:00.000Z",

modified: "