快速入门MapboxGL
haoteby 2025-01-09 13:01 5 浏览
作者：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图源
相关推荐
- Python的RSA操作(私钥与公钥)（python rsa 公钥解密）
-
RSA是1977年由罗纳德·李维斯特（RonRivest）、阿迪·萨莫尔（AdiShamir）和伦纳德·阿德曼（LeonardAdleman）一起提出的。当时他们三人都在麻省理工学院工作。RSA...
- RSA在日益互联的世界网络中安全性能如何?
-
KeyFactor公司（美国一家领先的安全数字身份管理解决方案提供商及网络安全行业权威机构）研究表明，许多物联网设备制造商正在生成不安全的RSA密钥，182个RSA证书里就有一个可能会被破解，由于不正...
- 让频谱分析更高效，澄清RSA使用中的一些误解
-
从事射频应用的研究人员、工程师和技术人员通常都能充分理解频谱分析仪的用途和优点，无论是传统的扫频分析仪(TSA)还是更现代的矢量信号分析仪(VSA)。他们熟练掌握这些重要射频仪器的关键规范和工作...
- 微软公告:Win10/Win11将不再支持短于2048位的RSA密钥证书
-
IT之家3月16日消息，微软近日发布公告，表示即将放弃短于2048位的RSA密钥证书。在公告中微软并未明确弃用时间，对于用户来说，这其实有利于构建更安全的上网环境。IT之家翻译微软公告...
- 目前已知的最强加密算法RSA（rsa加密算法的优点）
-
前面有人让我讲解一下RSA算法，今天我就用我所学的知识讲解一下，首先我们先了解一下RSARSA是一种非对称加密算法，1977年由罗纳德·李维斯特（RonRivest）、阿迪·萨莫尔（AdiSha...
- 韩国 CryptoLab 将在 2025年 RSA 大会发布加密人脸识别解决方案
-
据美通社4月23日报道，韩国同态加密网络安全企业CryptoLab宣布，将于4月24日在2025年RSA大会上，首次发布加密人脸识别（EFR）方案，为生物识别安全难题提供创新解法。当前，人脸识...
- 应对变化!盘点RSA2015十大热门产品
-
4月20日-24日，全球知名信息安全峰会RSAConference2015在美国旧金山召开。作为IT安全领域的权威科技大会，RSA大会不仅会邀请各地区著名安全专家出席与分享，更吸引汇集了全球众多顶...
- RSA 2015主题:变化挑战当今的安全理念
-
1“变化”成为RSA2015主题4月20日-24日，全球知名信息安全峰会RSAConference2015在美国旧金山召开。作为IT安全领域的权威科技大会，RSA大会不仅会邀请各地区著名安全专家出...
- 非对称加密——一文看懂RSA（非对称加密详解）
-
非对称加密----RSA的使用"非对称加密也叫公钥密码:使用公钥加密,使用私钥解密"在对称密码中，由于加密和解密的密钥是相同的，因此必须向接收者配送密钥。用于解密的密钥必须被配送给...
- RSA算法详解（rsa算法图解）
-
什么是RSA前面文章我们讲了AES算法，AES算法是一种是对称加密算法，本文我们来介绍一个十分常用的非对称加密算法RSA。非对称加密算法也叫公钥密码算法，通过生成的公私钥来对明文密文进行加密解密。R...
- 升级SSH后ssh-rsa失效?一文带你轻松解决!
-
背景今天刚给Linux桌面系统完成升级，结果SSH连接突然“罢工”了，还弹出了这个报错信息：...
- 历史回顾RSA大会:25年，十个瞬间（rsa conference）
-
国家安全局、Clipper芯片、苹果对决FBI、禁止ShowGirl——RSA大会都经历过。RSA需要你RSA这个词代表一家密码及安全厂商，也代表着世界上最大的网络安全展会，它今年在旧...
- RSA 加密技术详解（rsa的加密原理是什么）
-
RSA的安全性基于数学难题的理论安全：RSA的安全性主要基于大质数分解和离散对数问题这两个数学难题。在RSA加密算法中，公钥包含一个大整数N，它是两个大质数p和q的乘积。攻击者如果想要破解RSA加密，...
- 「游戏开发」请别再说Unity不如Unreal:Unity室内场景 + 光照练习 3
-
关注“indienova”，挖掘独立游戏的更多乐趣引言上两节慢吞吞的补了很多技术实现的细节，感觉要是把用到的所有技术细节都过一遍可能还需要若干篇文章。所以决定先把整体的流程这篇好玩的写了，以后再慢慢补...
- 再做一个Android!Google发布第二代VR眼镜Cardboard
-
在去年的GoogleI/O上，Google向所有与会者发放了一款名为Cardboard的纸盒版虚拟现实眼镜，相比OculusRift等颇为酷炫的VR头盔，第一代Cardboard着实糙得很。不过，...