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 idstyle: '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/。

Mapbox GL JS介绍及使用相关推荐

Mapbox GL JS实现炫酷的地图背景
经常看到网上的各种地图,有着炫酷的地图背景,用户体验非常不错.在Mapbox GL JS这块,其实关于地图的背景没有太多的设置.但当我们想基于Mapbox GL JS实现炫酷的地图背景改怎么办呢?这里 ...
Mapbox GL JS 表达式概述
表达式(expressions)是Mapbox GL JS的一个高级功能,它为数据的添加和渲染展示提供了更多的灵活性. 表达式的功能包括: 数据驱动样式:根据一个或多个数据属性指定样式规则. 算术:对 ...
Mapbox GL JS 地图英文转中文的解决办法
Mapbox GL JS地图框架的使用者已经越来越多了.不仅仅是因为它支持矢量瓦片,它里面内置了一些非常精美的地图,并且支持自定义搭配地图.对于个人开发者而言,一般都不具备自己搭建地图服务的硬件资源, ...
喜大普奔——Mapbox GL JS支持多种投影了
1. 写在前面 Mapbox GL JS 在v2.6.0之前不支持投影,默认地图是Mercator投影方式,如果项目中使用其他类型的投影(比如加载经纬度直投4326的地图切片),必须通过修改源码的方式 ...
Mapbox GL JS本地化实践
最近在搞android Mapbox SDK,一直想要本地化,看到这篇文章,赶紧转载一下,后面要用,非常感谢作者! 作者:猿基地链接:https://www.jianshu.com/p/693f38 ...
Mapbox GL JS实现移动端H5实时多边形（涂鸦）绘制
关于使用MapBox GL进行图形绘制,很多人都在使用mapbox-gl-draw.但是它只是封装了一些简单的点.线.面的绘制功能.最近的一个项目提出了要求在手机上用手指拖动实现多边形涂鸦绘制,要求实 ...
Mapbox GL JS 支持中文标注
mapbox官方提供了对应的语言插件. 方法安装 npm install --save mapbox-gl @mapbox/mapbox-gl-language 使用 import MapboxLa ...
Mapbox GL可视化之热力图
本篇使用Mapbox GL JS实现数据的热力图可视化,以截止到2020-03-01日的新冠疫情作为示例数据. 一什么是热力图热力图使用颜色的深浅表示数值的变化,从而表示数据的分布情况,这使得用户 ...
Angular8通过npm引入Mapbox GL 和 Ant L7
文章目录缘起官网NPM安装指引问题与解决办法问题一:引入mapboxgl 问题二:引入L7的对象缘起 Angular8引入Mapbox GL 和 Ant L7,之前都是将js API放在本地 ...

Mapbox GL JS介绍及使用

Mapbox GL JS介绍及使用相关推荐

最新文章

热门文章