mapbox-gl开发教程（一）：搭建前端开发环境

–mapbox-gl是一个开源、基于webgl技术的前端地图类库–

开发教程篇一：搭建前端开发环境
1、mapbox官网注册一个账号，生成一个开发token，在mapbox-gl2.0以前，使用自搭建的后台地图服务时，可以不使用此token，参见公众号文章：mapbox-gl升级到2.0后，使用自搭建的后端服务，也需要token，敬请注意！，或者修改mapbox-gl2.0以后的源码，也能避免token，参见公众号文章：mapbox-gl避免设置token源码修改，修改时，看一下官网的许可声明。
2、生成token后，就可以引用mapbox-gl的库文件进行开发了
网页端引用开发方式，引用在线的或者本地的js和css文件：

<script 
src='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js'></script>
<link 
href='https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css' 
rel='stylesheet' />

vue等前端框架开发，需要安装，再导入：
npm install --save mapbox-gl
指定版本安装：npm install --save [email protected]

//导入mapbox-gl
import mapboxgl from 'mapbox-gl';
地图初始化：
<div id='map' style='width: 400px; height: 300px;'></div>
<script>
mapboxgl.accessToken = '';
const map = new mapboxgl.Map({
container: 'map', // div的ID
style: 'mapbox://styles/mapbox/streets-v11', // mapbox官方的底图和样式文件
center: [-74.5, 40], // 初始化中心点位置
zoom: 9 // 初始缩放级别
});
</script>

以上是使用mapbox官方的资源进行地图初始化，用的是他们的底图和样式等文件，在实际的应用中，要转换成自己的资源，在以后的教程中会讲述如何搭建自定义的底图环境。

mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论。
mapbox-gl官网地址：https://docs.mapbox.com/mapbox-gl-js/guides/