hello world

我们先来编写一个hello world，并看看效果：

代码如下（html、body之类的标签就省略了哈）：

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />
<div id='map' style='width: 90%; height: 300px;'></div>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiaW1saXV5dSIsImEiOiJjbDM4aHM4eXowMDBpM2RvZGdxdGZjeWMxIn0.mYtay02E_Z4iYOsDx3IdoA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [116.403119,39.925338],
        zoom: 9
    });
</script>

逐行解释一下：

第一步，引入mapbox的js和css

1 2	`<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />`

第二步，写一个div来展现地图，给它指定id

1	`<div id='map' style='width: 90%; height: 300px;'></div>`

第三步，mapbox设置一个token才能获取它官方发布的地图，这里用了一个公开的token，你也可以去这里自己申请一个

1 2	`mapboxgl.accessToken = 'pk.eyJ1IjoiaW1saXV5dSIsImEiOiJjbDM4aHM4eXowMDBpM2RvZGdxdGZjeWMxIn0.mYtay02E_Z4iYOsDx3IdoA';`

接下来就是传入参数来构造map对象了:

var map = new mapboxgl.Map({
    container: 'map',
    center: [116.403119,39.925338],
    zoom: 9,
    style: 'mapbox://styles/mapbox/streets-v9',

});

各参数说明如下:

参数名	解释
container	将地图在指定的dom中展示，这里展示在我们刚才写的id为”map”的div里
center	地图初始化时的中心坐标，如果你不知道你要展示的位置的坐标，可以从这里点选获取
zoom	地图初始化时的缩放等级，越大则越比例尺越大
style	地图样式，详见下面的描述

style

mapbox的style是一个比较奇怪的概念，与arcgis、openlayers等产品中的样式有很大的不同，它实际上是数据源、图层、样式等信息的汇总。
我们后面再详细地学习它，这里我们只需知道它是一个url或者json，配置了地图展现相关的重要信息。所以，配置不同的style会在地图上展现出不同的数据和式样。

本节中我们仅学习通过url来展现mapbox官方提供的背景地图。

下面列出了几种常用的style id，你可以预览并选择一个你喜欢的id，然后用’mapbox://styles/mapbox/‘+id来配置它们

更多的样式，你可以从这里找到，然后申请一个token并点击“Expoler”->“Add Decimal to your account”将其复制到你的token下来使用

当然，这种style的设置方式虽然便捷，但是太不灵活了，后续的章节中我们将使用自定义json来配置它

mapbox-gl的优势和劣势

如果你用过openlayers、leaflet或是arcgis js，你会发现mapbox-gl构建map对象的语法和它们很相像。事实上，如果我们想做一个web端的二维gis应用，这几款框架也是仅有的比较靠谱的选择。

arcgis js作为esri的产品，功能强大稳定，而且它是require风格编写的，按需加载的机制使我们不用担心文件体积爆炸。但一个很致命的问题是，它不开源，使得深度调试和扩展很是麻烦。

leaflet的优势是轻量级和对ie等浏览器的良好兼容，如果你需要兼容ie或是做一些轻量级、小数据量的开发，leaflet是不错的选择。

openlayers是对面向对象开发人员非常友好的一个框架，map、layer、feature、geometry的分层非常清晰，写起来非常的OOP，如果有很复杂的前端逻辑，openlayers写出来的代码比其它几个都容易维护。
缺点是性能一般，而且对于一些新技术有少量奇怪的bug，比如矢量瓦片绘制跨瓦片的点绘制不完整。

还有一类是运营商开发的框架，比如百度和高德，这类框架优势是方便且中文文档丰富。但是必须接公网、不开源、定制性差等问题，使得我们在需要开发强业务功能时几乎不会去考虑它。

那么，mapbox有哪些优劣呢？最大的优劣都来源于：mapbox-gl是基于webgl开发的。

👍高性能 用js进行数据基本处理，然后就丢给webgl去渲染了，所以性能非常强悍。以我的破笔记本来测试geojson点图层的加载，
openlayers加载一千个点左右就开始卡顿了，而mapbox可以支撑两万个点左右。如果用mapbox的webgl接口来操作，甚至可以支撑到百万级。

👍可视化效果丰富 mapbox-gl开放了webgl的操作接口，这使得我们可以直接用gl对象或是将gl对象丢给Three.js等框架，从而做出炫酷的效果。

👎代码层级不够清晰 但基于webgl开发，造成了数据与渲染的高度分离，使得mapbox的代码层次不是很清晰，甚至于根本就没有feature和geometry（而是用json去代替），不是很容易维护，后面的章节中我们会体会到这点。
所以开发之前，你应该充分设计代码结构以防止后期的混乱（当然，openlayers虽然层次清晰，但不好好设计依然会混乱，只是比mapbox容易维护一些）。

👎兼容性不高 在IE上完全无法展示，但微软自己都把IE丢掉了，除了应付守旧的用户，这条也不是大问题。

了解了以上优劣，相信你会对你的的项目是否该使用mapbox有自己的判断。