⭐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）这块。