--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 mapbox-gl@1.9.0

//导入mapbox-gl

import mapboxgl from 'mapbox-gl';

地图初始化:

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

<script>

mapboxgl.accessToken = '<your token>';

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/