快速入门MapboxGL
haoteby 2025-01-09 13:01 11 浏览
作者：MR.
Mapbox GLJS是一个JavaScript库，使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL渲染意味着高性能，MapboxGL能够渲染大量的地图要素，拥有流畅的交互以及动画效果、可以显示立体地图并且支持移动端，是一款十分优秀的WEBGIS开发框架。
###Hello MapboxGL
现在开始我们的MapBox之旅。
首先在页面引入MapboxGL脚本库和样式库：
<scriptsrc='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'>
<linkhref='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。accesstokens（访问令牌）可以使用API提供的示例（如下），也可以注册MapBox账号,在用户信息页查看或者创建令牌。
现在开始第一个MapboxGL程序：展示一幅地图。代码如下:
id='map'style='width:900px; height: 600px;'>
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等服务规范和数据格式，SuperMapiServer9D对这三种格式均支持，示例地址：http://iclient.supermapol.com/examples/mapboxgl/examples.html#iServer。
###地图控件
现在我们来添加一些常见的地图控件，导航（NavigationControl，放大、缩小以及指北针按钮）、定位(GeolocateControl)、比例尺(ScaleControl)、全屏(FullscreenControl)：
如上图，只需要实例化控件并使用addControl方法添加到地图上即可。
###添加标记并点击弹出气泡
标记和气泡都可以单独指定坐标添加到地图上。标记可以通过setPopup方法设置点击显示的气泡。对于标记，指定的坐标在标记图片中心点处，所以竖直方向需要偏移图片高度的一半，使指定的坐标在水滴形标记图片的尖端处；对于气泡，指定的坐标在气泡下部尖端处，所以偏移了标记图片的高度加1像素使气泡指向标记顶部。
###绘制点线面
MapboxGL绘制点线面的方式其实和加载地图是一样的，点线面数据是放在数据源(source)里的，绘制时添加图层(layer)并指定数据源、显示参数等。
这部分属于进阶的内容，需要多熟悉MapboxGLAPI文档，在此不再过多介绍。
最后，下图的效果也是使用MapBox（和Echarts插件）完成的。
- 上一篇：如何制作MapBox个性化地图
- 下一篇：如何在QGIS中加载MapBox图源
相关推荐
- 能跑源码，还提供数据集:这里有一个入门企业级验证码识别项目
-
机器之心专栏作者：kerlomz网上关于验证码识别的开源项目众多，但大多是学术型文章或者仅仅是一个测试demo，那么企业级的验证码识别究竟是怎样的呢？1.前言网上关于验证么识别的开源项目众多，但大...
- kdj源码_kdj源码公式描述
-
N:=9;M1:=3;M2:=3;...
- QT实现抖动文字和滚动文字，附源码
-
前言不知道大家有没有发现今天的文章有什么不一样，哈哈，我自己胡拼乱凑弄了一个logo，好不好看就先不说了，最起码萌萌哒...当然这不是今天的重点，在做logo的时候，我原本想让文字动起来的，奈何技术有...
- 我试图通过这篇文章告诉你，这行源码有多牛逼。
-
你好呀，我是歪歪。这次给你盘一个特别有意思的源码，正如我标题说的那样：看懂这行源码之后，我不禁鼓起掌来，直呼祖师爷牛逼。...
- 想了解Python源代码加密吗?现总结如下5大加密混淆手段!
-
我们在进行...
- Android系统基础(03) Android系统源码下载
-
常规官方网站说明：Android源码官方网站为(google你懂的)：https://source.android.com官网参考链接，对应的tag（tag是一种标签，我们可以根据tag来判断下载的...
- 真香，Python爬取B站弹幕原来如此简单，源码已附在文末
-
B站的弹幕区一直是人才圣地。今天我就用python来手把手教大家爬取B站排行榜热门视频，Python爬取视频也可以如此简单。...
- 最详细的 maven 教程，可以收藏_maven步骤
-
链接|cnblogs.com/hzg110/p/6936101.html正文目前所有的项目都在使用maven，可是一直没有时间去整理学习，这两天正好有时间，好好的整理一下。...
- Python黑科技-VIP视频破解源码分享
-
《利用Python制作自己的VIP视频解析软件》想看的电视剧更新了还要充VIP？喜欢的电影你是VIP还得付费？学了Python哪要这些花里胡哨的，打开我自己的VIP付费视频解析软件，想怎么看就怎么看！...
- 抖音无水印解析网站源码_抖音无水印解析平台
-
链接：https://share.weiyun.com/59Ah44S密码：hv4dm7上传到主机解压不用安装，直接打开域名就可以了原文地址：https://www.xigsc.com/post/...
- 「电脑知识」USBOS 3.0 v2022.1.24 超级PE启动维护工具标准增强版
-
前几天一直在发PE类工具就是为了制作U盘PE启动重装系统教程的，今天小编继续分享有一篇关于pe的之前小编发布过一款微PE工具箱，今天发布另外一个无任何流氓行为功能超级强大虽然体积大了一点，但是这个...
- 模版网站建设制作的八步流程_模板的网站
-
模版网站比较简单，一般我们按照如下流程就可以制作出来。 一、网站定位： 在建站之前，一定要了解你要建的网站是什么。你必须考虑你网站的标题（关键词）、网站描述以及你想要建立的网站。 二、选择域...
- 求职季必备，这几个免费的个人简历模板网站，你可千万不要错过!
-
晃晃悠悠又到了春招的季节，相信一定有很多小伙伴趁着这个金三银四求职季，四处投递简历。这时候一个亮眼优秀的简历，可以很好的祝你吸引HR的注意。今天就把我珍藏很久的5个免费简历模板网站分享给大家，简历模板...
- 简约时尚作品博客商店网站HTML5模板源码
-
Meduza是简约时尚和现代的博客HTML模板，带商店电商元素的博客页面。考虑所有的作品集网站需求页可以设计一个旅游网站。原生响应设计HTML5和CSS3(台式机、平板电脑、手机…)简单,干净的和专业...
- 13 款免费样机网站合集，UI设计、产品设计、VI设计全都有!
-
俗话说得好，人靠衣装，在作完设计后不少设计师都会为自己的作品套一个「样机」好让设计看过去更加高端大气上档次！今天，我就总结了无论是UI设计、包装设计、服装设计、品牌设计、logo设计，都能用到...