快速入门MapboxGL

作者：MR.

Mapbox GL JS是一个JavaScript库，使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL渲染意味着高性能，MapboxGL能够渲染大量的地图要素，拥有流畅的交互以及动画效果、可以显示立体地图并且支持移动端，是一款十分优秀的WEB GIS开发框架。

###Hello MapboxGL
现在开始我们的MapBox之旅。
首先在页面引入MapboxGL脚本库和样式库：

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

也可以在GitHub找到MapboxGL ： https://github.com/mapbox/mapbox-gl-js/releases

执行上述引入脚本后即创建了mapboxgl对象，通过它可以使用MapboxGL的全部功能。
在使用之前，需要先设置mapboxgl.accessToken。access tokens（访问令牌）可以使用API提供的示例（如下），也可以注册MapBox账号,在用户信息页查看或者创建令牌。

现在开始第一个MapboxGL程序：展示一幅地图。代码如下:

<div id='map' style='width: 900px; height: 600px;'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA'; // 设置MapBox访问令牌
var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v9'
});
</script>

Map对象是MapboxGL的核心对象，地图的展示、交互等都由它来实现。上述代码中id为map的div元素为地图的容器；mapboxgl.Map构造方法用于创建Map对象，一个Map对象对应一个地图容器，参数container指定使用的地图容器id，style用于指定使用的Mapbox地图。
上述代码效果如下：

现在我们可以通过鼠标拖拽、缩放地图，并使用鼠标右键旋转（bearing属性）、倾斜（pitch属性）地图。
Style指定的样式是MapBox提供的、以矢量瓦片的方式加载的地图，可以在 API 和用户信息处找到预定义的样式，也可以自定义地图样式，参考博客：http://blog.csdn.net/supermapsupport/article/details/77991911
除了使用MapBox提供的地图，还可以使用其它地图服务，支持zxy地图瓦片服务(OpenStreetMap规范)、MapBox矢量瓦片地图服务(mvt)以及GeoJSON等服务规范和数据格式，SuperMap iServer 9D对这三种格式均支持，示例地址：http://iclient.supermapol.com/examples/mapboxgl/examples.html#iServer。

###地图控件

现在我们来添加一些常见的地图控件，导航（NavigationControl，放大、缩小以及指北针按钮）、定位(GeolocateControl)、比例尺(ScaleControl)、全屏(FullscreenControl)：

如上图，只需要实例化控件并使用addControl方法添加到地图上即可。

###添加标记并点击弹出气泡

标记和气泡都可以单独指定坐标添加到地图上。标记可以通过setPopup方法设置点击显示的气泡。对于标记，指定的坐标在标记图片中心点处，所以竖直方向需要偏移图片高度的一半，使指定的坐标在水滴形标记图片的尖端处；对于气泡，指定的坐标在气泡下部尖端处，所以偏移了标记图片的高度加1像素使气泡指向标记顶部。

###绘制点线面

MapboxGL绘制点线面的方式其实和加载地图是一样的，点线面数据是放在数据源(source)里的，绘制时添加图层(layer)并指定数据源、显示参数等。

这部分属于进阶的内容，需要多熟悉MapboxGL API文档，在此不再过多介绍。

最后，下图的效果也是使用MapBox（和Echarts插件）完成的。

快速入门MapboxGL相关推荐

Shiro第一个程序:官方快速入门程序Qucickstart详解教程
目录一.下载解压二.第一个Shiro程序 1. 导入依赖 2. 配置shiro配置文件 3. Quickstart.java 4. 启动测试三.shiro.ini分析四.Quickstart. ...
计算机入门新人必学,异世修真人怎么玩？新手快速入门必备技巧
异世修真人怎么快速入门?最近新出来的一款文字修仙游戏,很多萌新不知道怎么玩?进小编给大家带来了游戏新手快速入门技巧攻略,希望可以帮到大家. 新手快速入门攻略 1.开局出来往下找婆婆,交互给点钱,旁边有 ...
Spring Boot 2 快速教程：WebFlux 快速入门（二）
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘 ...
Apache Hive 快速入门 (CentOS 7.3 + Hadoop-2.8 + Hive-2.1.1)
2019独角兽企业重金招聘Python工程师标准>>> 本文节选自<Netkiller Database 手札> 第 63 章 Apache Hive 目录 63.1. ...
《iOS9开发快速入门》——导读
本节书摘来自异步社区<iOS9开发快速入门>一书中的目录,作者刘丽霞 , 邱晓华,更多章节内容可以访问云栖社区"异步社区"公众号查看目录前言第1章 iOS ...
BIML 101 - ETL数据清洗系列 - BIML 快速入门教程 - 序
BIML 101 - BIML 快速入门教程做大数据的项目,最花时间的就是数据清洗. 没有一个相对可靠的数据,数据分析就是无木之舟,无水之源. 如果你已经进了ETL这个坑,而且预算有限,并且有大量的 ...
python scrapy菜鸟教程_scrapy学习笔记（一）快速入门
安装Scrapy Scrapy是一个高级的Python爬虫框架,它不仅包含了爬虫的特性,还可以方便的将爬虫数据保存到csv.json等文件中. 首先我们安装Scrapy. pip install sc ...
OpenStack快速入门
OpenStack云计算快速入门(1) 该教程基于Ubuntu12.04版,它将帮助读者建立起一份OpenStack最小化安装.我是五岳之巅,翻译中多采用意译法,所以个别词与原版有出入,请大家谅解.我 ...
Expression Blend实例中文教程(2) - 界面快速入门
上一篇主要介绍Expression系列产品,另外概述了Blend的强大功能,本篇将用Blend 3创建一个新Silverlight项目,通过创建的过程,对Blend进行快速入门学习. 在开始使用Ble ...

快速入门MapboxGL

快速入门MapboxGL相关推荐

最新文章

热门文章