Mapbox GL JS介绍及使用

Mapbox GL JS介绍及使用：（以web端基本交互实现为例）

Mapbox GL JS 是一个 JavaScript 库，它使用 WebGL，以 vector tiles 和 Mapbox styles 为来源，将它们渲染成互动式地图。
想要了解更多如何使用mapbox GL JS实现各个图层进行交互与基于mapbox的数据可视化，请参考mapbox web端开发文档http://www.mapbox.cn/mapbox-gl-js/api/和mapbox基本原理http://www.mapbox.cn/tutorials/gljs/。此js库细节很多，然而在一开始我们并不需要了解全部。接下来我将尝试使用本案例介绍Mapbox GL JS的几个主要功能。

（1）前端显示的实现过程

1，在前端加载必须js和css文件

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

2，填入自己申请的access token

mapboxgl.accessToken = 'pk.eyJ1IjoiY29uZ3dhbmciLCJhIjoiY2tjZWwxNW5uMDdoMjJ3cDZnaGF2bmJlYiJ9.NOKscgbt1C-DCo38sxtUFw';

3，new一个map对象出来：

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/congwang/ckm4lk51m0mle17pddig9wem1',
    center: [ 21.939098,
        47.059736],
    // starting position [lng, lat]
    zoom: 2.57
});

Map 对象代表页面上的地图。它提供了一系列的方法和属性使得用户可以通过编程开发对地图进行修改，并在用户与地图交互时触发一系列的事件。你可以创建Map，通过指定的container和其他可选参数。Mapbox GL JS 会在页面上初始化地图并返回您的Map对象。

其中container对应的是html中的某个div，此处是id为map的div；style属性对应的是我们在studio中自定义的style的URL，如下图：

然后我们可以在web端显示我们在studio中编辑的地图了，如下图：

至此完成前端展示自定义样式mapbox的所有操作，接下来举例说明mapbox如何实现数据交互。

（2）基本交互的实现过程：
Mapbox GL JS能实现的交互方式多种多样，此处以其中较为常见且在黑死病案例中使用到的popup（弹出）为例。可以先看一下效果：

当鼠标悬浮到小蓝点上时，小点上方弹出一个信息框。
这里我们要使用到Mapbox GL JS的一个组件，名字就叫做Popup
Popup 弹窗组件：
使用方法：new Popup(options: Object?)
Popup的参数有很多，这里我们只需了解两个参数
1，options.offset（主要） 对应到弹窗位置
2，options.closeButton 如果为 true ，弹窗右上角 将出现关闭按钮。
首先，设置一下offset的配置

let markerHeight = 10, markerRadius = 10, linearOffset = 25;
let popupOffsets = {
    'top': [0, 0],
    'top-left': [0,0],
    'top-right': [0,0],
    'bottom': [0, -markerHeight],
    'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
    'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
    'left': [markerRadius, (markerHeight - markerRadius) * -1],
    'right': [-markerRadius, (markerHeight - markerRadius) * -1]
};

然后，我们就可以new一个popup对象了：

let popup = new mapboxgl.Popup({
    offset: popupOffsets,
    closeButton: false
});

其中closeButton 对应的false表示弹窗右上方的关闭按钮不显示。现在popup组件已经存在，接下来就要使用它了。我们先将信息框弹出的整个过程理一遍：
1，鼠标悬浮在小蓝点上
2，弹窗出现
3，鼠标离开小蓝点
4，弹窗消失
根据这个过程，我们可以编写代码如下：

map.on('mouseenter', 'citydata', function(e) {
let feature = e.features[0];
   popup.setLngLat(e.lngLat)//设置弹窗弹出的位置，e就是事件返回的包含匹配要素的 features 
        .setText(feature.properties.name)//设置弹窗文本信息，此处为城市名
        .addTo(map);  //显示到map中
});
map.on('mouseleave', 'citydata', function() {
    popup.remove();    //当鼠标移开是，弹窗消失
});

其中on（type，LayerId，Listener）为发生在特定样式图层要素上的特定事件添加监听器，它有三个参数。
type(string)监听的事件类型，此处使用的为’mouseenter’和’mouseleave’
layerId(string)样式层的ID。只有事件发生在图层可见要素上时才会触发监听器。事件将会得到一组包含匹配要素的 features 属性。 案例中我们的图层id为’citydata’，
listener(Function)事件被触发时调用的函数。案例中我们调用的就是popup的出现和消失这两个函数。
其中特别注意的一点是这组包含匹配要素的 features 属性，我们前面给匹配要素赋予的所有属性（如受感染城市的名字）都会被包含到features中，当我们想要使用里面某个数据时，不妨在前端输出一下features，对其结构做一个了解。

至此，我们完成了基本的交互。
更多组件详情，请参考http://www.mapbox.cn/mapbox-gl-js/api/。