⭐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）這塊。