⭐Mapbox GL JS学习探索系列（1） - Map

摘要

本文旨在分享自己在mapbox的学习过程中的使用经验，通过介绍mapbox的一些实际应用与概念，来记录自己的学习路程与经验分享，希望帮助更多对mapbox有兴趣的同学来共同进步。

地图预备知识

在实际接触mapbox之前，需要对地图有一定的认知，这对于之后在实际开发中会有很大的帮助。
瓦片地图：为了达到更快的地图加载效率，地图资源大多以瓦片的形式加载，即在不同的缩放等级下，来去服务器获取所需的瓦片资源，关于瓦片原理更详细的介绍。
坐标系：现在常用的坐标系一般分为三种，WGS84(mapbox，谷歌)，GCJ-02(高德，腾讯)，BD-09（百度），这三种坐标系可以相互转化。

地图对象

通过JS去生成一个地图，必要的属性只有2个，一个就是地图在html中的容器，即装载地图div的ID，另一个就是地图的样式，地图样式一般包括渲染地图的资源以及缩放，中心点等地图配置信息。(关于地图显示和更多详情参考文档示例)

地图事件

地图上有很多属性方法，之后的文章会挑其中常用，重点的进行详细讨论，这里只介绍一下地图的方法订阅。
mapbox 的方法操作主要有三个，在实例化地图得到map对象后即：

var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.50, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});

以点击事件为例，在这个map对象上面调用：

map.on('click',() => {})
map.off('click',() => {})
map.fire('click')

• on：这个方法接受三个参数，订阅事件类型（click），事件绑定图层layerId（非必填），事件订阅回调函数。
• off：方法与on接受同样的参数，作用是取消绑定在地图（图层）上的事件方法。
• fire：mapbox文档中没有写明这个方法，但是这个方法也非常好用，作用是主动触发订阅的方法，在mapbox-gl.js做扩展的时候，这个方法作用非常大，因为mapbox的方法订阅是标准的发布订阅模式，所以只需要map.fire("xxx") 就可以主动触发之前订阅的一些方法（包括自定义的一些方法到mapbox当中）。

这里重点介绍两个方法，load 和 data。

load

表示的是地图必要资源加载且渲染完成后，触发的方法。这里之前遇到一个坑是在这个方法中调用了地图楼层和一些区域配置中的一些参数，诸如bbox等等，没有成功，原因是这些配置项并不属于地图必须加载的资源配置，因此在使用这个方法中要格外注意，如果有额外的自定义的样式资源请求，就可以使用map.on 订阅一个自己的loaded方法，然后在相关资源加载完毕之后使用fire 触发自定义的方法。

data

表示的是地图资源放生改变时触发的方法，这个方法在图层渲染，资源更改时使用频率非常高，因为load只是首次触发的方法，在后续对地图（图层）资源进行修改的过程中，需要使用data方法来就行判定，在这个方法中返回的是一个

里面包含了数据类型等信息，这个在实际开发中的使用场景也很多，之后在介绍layer板块的时候，会举一个data方法的实际用例。

小结

本文没有从0到1的去讲解一个地图怎样渲染，因为官方文档都有明确的示例，这里更多的是通过自己在工作和实践中遇到的问题，来映射出一些地图的基础概念与一些方法总结，完全没有概念的同学可能需要先去mapbox文档了解一下。
下一篇会写mapbox 图层（layer）这块。