快速入门MapboxGL
haoteby 2025-01-09 13:01 1 浏览
作者：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图源
相关推荐
- 用户界面干货盘点
-
为了解决大家找资源难的问题，EVGET特别开辟每周盘点用户界面干货的专栏，一网打尽热门的界面资讯、Demo示例、版本升级及下载、移动Web开发，以及各种UI神器推荐。更多资源及工具也可以在用户界面专题...
- 不仅仅是创意，26款科技小玩意
-
新科技不断在卖场出现，总是吸引着消费者的眼球。许多很棒的科技小玩意儿被发明，手机、平板、手提电脑、游戏主机、甚至是3D打印都适用。现在的初创公司已经发正在让21世纪打破各种科技壁垒障碍。本文收集26...
- FastReport.Net报表设计器如何连接到SQLCe
-
MicrosoftSQLServerCompactEdition是一个简单的本地关系数据库，不需要安装，并且已与数据库文件建立连接。您不需要管理员权限即可使用基础功能。您也只能“密码”基础功能...
- 2015年最值得关注的8款用户界面新品
-
软件界面开发解决方案这一块一直以来是慧都控件(EVGET)的强项，我们有400多款用户界面产品，250多款图表报表产品，此外还提供专业的软件界面定制开发服务，其中DevExpress定制开发、甘特图定...
- 小贴士:安装TBarCode office的注意事项和相关资源
-
TBarCodeoffice是一款适用于MicrosoftWord2007、2010等版本，具有强大功能的条码插件。在这里我们介绍一下安装TBarCodeoffice的注意事项和相关资源。安装...
- 初学者不容错过的修复Bug小技巧
-
Bug的发生，我想这是每个开发人员几乎每天都要面对的问题，包括历史上非常有名的编程人员，他们依旧要面对Bug。成为一个熟练的程序员并不意味着永远不会犯错误，而是擅于发现错误并能很好地修正错误。当你刚开...
- 【推荐】一款基于 .NET 开源的支持多厂区、多项目级的MOM/MES系统
-
如果您对源码&技术感兴趣，请点赞+收藏+转发+关注，大家的支持是我分享最大的动力！！！项目介绍tmom是一款基于.NET开源、通用的生产制造系统，支持多厂区/多项目级的MOM/MES系统，计划排程...
- 你不可不知的10个Github功能
-
Github让全世界的开发人员、设计人员可以在一起工作交流。Github不仅提供大量开源项目、编程语言代码，他也发布过Windows和OSX桌面应用，可以让我们在工作中无缝集成Github。...
- Fastreport.Net用户手册(十四):文本编辑
-
编辑对象的文本，只需双击文本内容，然后会弹出一个文本编辑器。在编辑器右方有一个可以添加至文本中的数据树组件。可以通过鼠标拖拽该组件到需要的地方。在文本中嵌入该组件的另一个方法是双击该组件，然后该组件将...
- 火狐浏览器开发者专版上手体验
-
当Mozilla宣布FirefoxDeveloperEdition，我想不少开发者都很高兴，因为第一个大型开发者专用浏览器诞生了。既然是开发者专用版，那么和普通版本肯定是不一样的。早已经迫不及待...
- FastReport.Net 2015.3.3 优化了报表解析器
-
FastReport.Net2015.3.3于近日正式发布。点击FastReport.Net2015.3.3下载试用FastReport.Net最新版本。[Core][Exports]重写保存在...
- 改变上网体验:10个超赞的Google Chrome扩展
-
你使用谷歌浏览器浏览网页吗？其实，全世界数以百万的用户都喜欢使用GoogleChrome浏览网页，这也促使其成为全球使用量第二大的Web浏览器。GoogleChrome浏览器具有快速、干净的页面，...
- 如何在 FastReport Online Designer 中处理报表的 5 个函数
-
FastReports产品的时代并没有停滞不前。每个月都会添加新的函数和对象，并改进和优化当前的代码。FastReportOnlineDesigner...
- Winform应用界面开发技术特点图解
-
整理一下自己之前的Winform开发要点，以图文的方式展示一些关键性的技术特点，总结一下。...
- 跨平台的可视化Web报表设计器-FastReport Online Designer
-
好消息！FastReportOnlineDesigner现在作为一个独立的应用程序发布啦！此前作为FastReport.Net的专业版的一部分的在线设计测试版，现在可以单独或作为FastRepor...