快速入門MapboxGL【轉載】
原文連結：https://blog.csdn.net/supermapsupport/article/details/78343391
作者：MR.
Mapbox GL JS是一個JavaScript庫，使用WebGL渲染互動式向量瓦片地圖和柵格瓦片地圖。WebGL渲染意味著高效能，MapboxGL能夠渲染大量的地圖要素，擁有流暢的互動以及動畫效果、可以顯示立體地圖並且支援移動端，是一款十分優秀的WEB GIS開發框架。
###Hello MapboxGL
現在開始我們的MapBox之旅。
首先在頁面引入MapboxGL指令碼庫和樣式庫：
<script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet'/>
- 1
- 2
也可以在GitHub找到MapboxGL ：https://github.com/mapbox/mapbox-gl-js/releases
執行上述引入指令碼後即建立了mapboxgl物件，通過它可以使用MapboxGL的全部功能。
在使用之前，需要先設定mapboxgl.accessToken。access tokens（訪問令牌）可以使用API提供的示例（如下），也可以註冊MapBox賬號,在使用者資訊頁檢視或者建立令牌。
現在開始第一個MapboxGL程式：展示一幅地圖。程式碼如下:
<div id='map' style='width: 900px; height: 600px;'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA'; // 設定MapBox訪問令牌
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9'
});
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
Map物件是MapboxGL的核心物件，地圖的展示、互動等都由它來實現。上述程式碼中id為map的div元素為地圖的容器；mapboxgl.Map構造方法用於建立Map物件，一個Map物件對應一個地圖容器，引數container指定使用的地圖容器id，style用於指定使用的Mapbox地圖。
上述程式碼效果如下：
現在我們可以通過滑鼠拖拽、縮放地圖，並使用滑鼠右鍵旋轉（bearing屬性）、傾斜（pitch屬性）地圖。
Style指定的樣式是MapBox提供的、以向量瓦片的方式載入的地圖，可以在API和使用者資訊處找到預定義的樣式，也可以自定義地圖樣式，參考部落格：
除了使用MapBox提供的地圖，還可以使用其它地圖服務，支援zxy地圖瓦片服務(OpenStreetMap規範)、MapBox向量瓦片地圖服務(mvt)以及GeoJSON等服務規範和資料格式，SuperMap iServer 9D對這三種格式均支援，示例地址：http://iclient.supermapol.com/examples/mapboxgl/examples.html#iServer。
###地圖控制元件
現在我們來新增一些常見的地圖控制元件，導航（NavigationControl，放大、縮小以及指北針按鈕）、定位(GeolocateControl)、比例尺(ScaleControl)、全屏(FullscreenControl)：
如上圖，只需要例項化控制元件並使用addControl方法新增到地圖上即可。
###新增標記並點選彈出氣泡
標記和氣泡都可以單獨指定座標新增到地圖上。標記可以通過setPopup方法設定點選顯示的氣泡。對於標記，指定的座標在標記圖片中心點處，所以豎直方向需要偏移圖片高度的一半，使指定的座標在水滴形標記圖片的尖端處；對於氣泡，指定的座標在氣泡下部尖端處，所以偏移了標記圖片的高度加1畫素使氣泡指向標記頂部。
###繪製點線面
MapboxGL繪製點線面的方式其實和載入地圖是一樣的，點線面資料是放在資料來源(source)裡的，繪製時新增圖層(layer)並指定資料來源、顯示引數等。
這部分屬於進階的內容，需要多熟悉MapboxGL API文件，在此不再過多介紹。
最後，下圖的效果也是使用MapBox（和Echarts外掛）完成的。
</div>