--mapbox-gl是一個開源、基于webgl技術(shù)的前端地圖類庫--

開發(fā)教程篇一：搭建前端開發(fā)環(huán)境

1、mapbox官網(wǎng)注冊一個賬號，生成一個開發(fā)token，在mapbox-gl2.0以前，使用自搭建的后臺地圖服務(wù)時，可以不使用此token，或者修改mapbox-gl2.0以后的源碼，也能避免token，修改時，看一下官網(wǎng)的許可聲明。

2、生成token后，就可以引用mapbox-gl的庫文件進行開發(fā)了

網(wǎng)頁端引用開發(fā)方式，引用在線的或者本地的js和css文件：?

https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js

https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css

vue等前端框架開發(fā)，需要安裝，再導入：

npm install --save?mapbox-gl

指定版本安裝：npm install --save?mapbox-gl@1.9.0

//導入mapbox-gl

import mapboxgl from 'mapbox-gl';

地圖初始化：

<div id='map' style='width: 400px; height: 300px;'></div>

mapboxgl.accessToken = '<your token>';

const map = new mapboxgl.Map(

{

container: 'map', // div的IDstyle:?

'mapbox://styles/mapbox/streets-v11', // mapbox官方的底圖和樣式文件

center: [-74.5, 40], // 初始化中心點位置

zoom: 9 // 初始縮放級別

});

以上是使用mapbox官方的資源進行地圖初始化，用的是他們的底圖和樣式等文件，在實際的應(yīng)用中，要轉(zhuǎn)換成自己的資源，在以后的教程中會講述如何搭建自定義的底圖環(huán)境。

關(guān)注公眾號查看更多