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

文档

官方文档：
英文版：https://docs.mapbox.com/mapbox-gl-js/
中文版：https://www.mapbox.cn/mapbox-gl-js/overview/

辅助文档：
数据交换格式： https://zh.wikipedia.org/wiki/GeoJSON
距离计算： https://turfjs.org/docs/

用法

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

资源本地化

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

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

到此，资源本地化就完成了。但是我们现在渲染的地图是空白的，这是因为layers中什么都没，所以我们现在要结合**天地图**来渲染中文地图。

pbf pbf全称Protocal Buffers，是Google公司开发的一种数据描述语言，类似于XML能够将结构化数据序列化，可用于数据存储、通信协议等方面。简单来说就是结构简单、速度快，我们前面讲到的矢量切片也使用了这种格式。

我们常见的字体库例如微软雅黑的.ttf字体文件大约有15M，一次请求加载15M并且还要解析，对服务端和客户端的压力都大，所以Mapbox使用了.pbf的格式进行分批请求，下面是两种格式的对比。.pbf格式大大的减少了请求压力。

关于pbf的详细可以看看这篇文章：https://www.cnblogs.com/ATtuing/p/9217029.html

渲染地图的底图-天地图

除了天地图还可以使用百度地图，谷歌地图，高德等地图都可以，这里选择了天地图。

天地图官网：http://www.tianditu.gov.cn/
GeoGlobe JavaScript： http://jiangsu.tianditu.gov.cn/xuzhou/geomap-api/apidoc/jsNewApiDoc/index.html

GeoGlobe JavaScript API依赖GeoGlobe Server服务管理提供的OGC标准服务和应用服务，主要实现地理信息资源的共享和应用；
GeoGlobe开发中心网站通过对GeoGlobe JS
API的方法调用，进行二次开发示例的集中展现，主要实现Web浏览器端的空间信息应用的示例表现。

页面引入GeoGlobeJS.min.js

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
<script src="/js/GeoGlobeJS.min.js"></script>

构造地图对象实例，并添加到id为map的div容器中，map加载中会添加两个图层，至此，一个中文版的地图就渲染完成。地图底图渲染完成后，就是具体的页面逻辑操作了，此时重点就看mapbox的api了。

基本用法

使用GeoJSON在地图上画线：

这一块的难点有3处：

1. GeoJSON

GeoJSON是一种基于JSON的地理空间数据交换格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据。

GeoJSON使用唯一地理坐标参考系统WGS1984和十进制度单位，一个GeoJSON对象可以是Geometry,
Feature或者FeatureCollection.

其几何对象包括有点（表示地理位置）、线（表示街道、公路、边界）、多边形（表示国家、省、领土），以及由以上类型组合成的复合几何图形。

具体详细信息请参考：https://zh.wikipedia.org/wiki/GeoJSON

如果你在地图上绘制图形的时候，没有报错，但是图形不显示，那一定是GeoJSON的格式问题！

2. 图层的类型

图层的类型由"type"属性指定，并且必须是One of"fill","line","symbol","circle","heatmap","fill-extrusion","raster","hillshade","background".
每个type属性，layout和paint也不尽相同。

具体请参照：
英文： https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#background
中文： https://www.mapbox.cn/mapbox-gl-js/style-spec/#sources-geojson

3. 表达式
表达式这一块对于js基础不扎实的同学来说可能会很吃力，不过多看看，多找些资料慢慢熟悉就好了。
mapbox的文档上用法写的也蛮清楚的，这里我就不多解释了。

弹窗组件popup：

创建标记组件Marker：

到此，mapbox的基本用法就讲完了，但是有一个重点--raster图层没有讲到，关于这个我会单独放到一篇文章中说，下篇文章见吧。文章中如果有讲错的地方，请小伙伴们多指教，我也是第一次接触mapbox，要学习的东西还很多，欢迎小伙伴们多多留言交流。

小知识点

有些mapbox的版本在map.getLayer('xx'), map.removeLayer('xx')的时候会报错, 此时试试map.style.getLayer('xx'), map.style.removeLayer('xx').
地图上展示某地的标记有三种方法：

1.在地图上画点，layer的type为 symbol
2.Popup弹窗组件
3.Marker标记
LngLat和LngLatBounds表示地理世界中的点和面坐标。Point表示屏幕坐标系中的点。
两个坐标的转换可用map.project()来实现