--- theme: condensed-night-purple --- ## 简述本文适合初次尝试使用Mapbox或GIS地图库的前端开发者，如果你是一名准备入行GIS或者在校GIS专业学生，可以通过此文章了解Mapbox。如果你是一名前端开发者，遇到相关的需求，并且需求不复杂的话，那么我推荐使用高德与百度进行开发。 ## 简介 mapbox-gl是一款优秀的开源GIS开源库，区别于Cesium，它具有三维的表现能力，又不能算真正的三维地图(非球体)，介于二维与三维之间，它与我们所熟知的百度高德地图非常相似，由于它优秀的加载速度和可扩展性，以及创新性的矢量瓦片(一种数据格式)，令它成为非常流行的开源GIS框架。 ## 为什么选择Mapbox 1. 如果你只是想在自己的项目中使用地图简单的展示一些地理位置信息，并实现简单的交互效果，你可以选择它。 2. 如果项目要求使用开源库，并且自己需要展示的不是特大场景的数据（全国或全球范围即特大场景，或不涉及以球的形式展示），你可以选择Mapbox 3. 它对矢量瓦片的支持是最好的。 ## 代码逻辑 数据源（Source）--->图层（Layer)--->地图（Map)
在实际去写代码前，还需了解地图加载逻辑，这里所说的逻辑指的是代码书写逻辑，而非真正的渲染逻辑。简单来讲，假如你手里有一些拥有全国污染情况的数据，你将这些数据托管在数据源（Source）中，以不同类型的污染源分成多个图层（Layer），设置图层的样式，最后加载至地图（Map)上便完成了数据的展示。如果上面的结构图不够理解，没关系，在接下来的实践中，便会渐渐明白这个过程。这一步实际上便完成了对地图开发的一半了，而剩下的，便剩下交互和扩展效果了。 ## 初始化地图实例（配置) ### 安装 ``` js npm install --save mapbox-gl ``` ### 引入 css文件也可以通过import引入 ``` html ``` ``` js import mapboxgl from 'mapbox-gl'; ``` ### 创建地图容器并初始化 ``` html

``` ``` javascript // 官网注册登录后，可免费申请 mapBox.accessToken = 'xxx'; // 地图基本配置 const MapConfig = { container: 'map', // div 名称 style: 'mapbox://styles/mapbox/streets-v11', // 底图Url center: [-74.5, 40], // 地图初始化后的定位位置 zoom: 9 // 初始化后地图缩放等级 } var map = new mapBox.Map(MapConfig); ``` [官方初始化示例](https://docs.mapbox.com/mapbox-gl-js/api/) 这样我们便完成了地图的初始化 ### 特别说明 mapbox现已经更新至v2.0，mapbox从最一开始的卖服务，卖定制，又有了一个新的商业模式——地图实例收费。上面的mapbox初始化示例中，有一个accessToken需要配置，而这个需要开发者去官网免费申请。所谓的地图实例收费，便是通过这个token请求次数获取你地图实例化（初始化）的次数，从而根据次数收费。有些人会认为这算什么开源框架啊，还收费，首先，开源不等于免费，尤其是2.0后，mapbox更换开源许可后，切莫不要更改关于token验证的源代码。对于学习者来说，我们不需要担心这些变化，而对于商业化用途的开发来说，这得分两种情况来说明，首先，如果你的月使用量非常小，那仍是免费的，他按照次数收费，但也是在超过一定量级才会收费，而对于浏览量非常大的公司来说，可以考虑不同项目申请多个token避免量级过多，如果仍过多，相信公司的体量也不会在意这些。在这里多说一下开源库收费的事情，程序员做开源一部分原因自然是开源精神的体现，但如果开源能够带来收入只会更好，开源需要热情，更需要物质层面的支撑，这样才能让开源者投入更多的精力在开源仓库中，总不能又让马儿跑，又不让马吃饱吧，像mapbox这样做到一定程度的开源库，一定会考虑新的商业模式，要吃饭的嘛。mapbox这种收费模式和ue引擎收费方式相似，也是公司体量到达一定程度才会收费，这就是所谓的有钱大家赚吧。