mapbox本地化(mapbox地形图版

作者: MR。

Mapbox GLJS是一个JavaScript库,它在WebGL中渲染交互式矢量平铺地图和栅格平铺地图。 WebGL呈现意味着高性能,MapboxGL是一个优秀的WEBGIS开发框架,可以呈现大量的地图元素,具有流畅的交互和动画效果,可以显示立体地图,支持移动终端。

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

script src=’ https://API.map box.com/map box-GL-js/v0. 40.0/map box-GL.js ‘ link href=’ https://API.map box.ccox

也可以在GitHub中找到mapboxgl:https://github.com/map box/map box-GL-js/releases

上述部署脚本将创建一个mapboxgl对象,该对象可以使用mapboxgl的所有功能。 在使用之前,必须设置mapboxgl.accessToken。 您可以使用API提供的示例(访问令牌)或在MapBox帐户中注册以在用户信息页面上查看或创建令牌。

开始第一个MapboxGL程序。 请给我看一下地图。 代码为以下:

id=’map’style=’width:900px; height: 600px;’

Map对象是MapboxGL的中心对象,地图的展示、交互等都是通过它来实现的。 上述代码中id为map的div要素是地图的容器; Mapboxgl.Map构造方法创建与贴图容器对应的map对象,参数容器指定要使用的贴图容器id,样式指定要使用的Mapbox贴图。 上述代码效果如下。

现在,可以使用鼠标拖动和缩放地图,然后使用鼠标右键旋转(bearing特性)和倾斜(pitch特性)地图。 样式指定的样式是以MapBox提供的矢量平铺方式加载的地图,可以在API和用户信息中找到预定义的样式。 您也可以自定义地图样式。 浏览博客3358 blog.csdn.net/SuperMap support/article/details/7777其他地图服务也可用,zxy地图分片服务(OpenStreetMap规范), 摘要服务器9 d支持所有这三种格式。 地址示例: http://Iclient.superver

###地图控件

现在,让我们为导航(导航控制、缩放、指北针按钮)、位置(GeolocateControl、比例尺)和全屏)添加常规地图控制。

如上图所示,只需实例化控件并使用addControl方法将其添加到地图中。

添加###标记,点击排出气泡

可以通过单独指定坐标将标记和气泡添加到地图中。 标记可以通过setPopup方法设置点击显示的气泡。 标记时,指定的坐标位于标记图像的中心点,因此必须纵向偏移图像高度的一半,使指定的坐标位于水滴形标记图像的前端。 对于气泡,指定的坐标位于气泡底部的前端,因此将在标记图像的高度上偏移一个像素,以使气泡指向标记的顶部。

画###虚线的面

MapboxGL以加载地图的相同方式绘制点线面。 点线面数据放置在数据源(source )中,在绘制时添加图层,并指定数据源、显示参数等。

本节是高级内容,需要熟悉MapboxGLAPI文档,但在此不太介绍。

最后,下图的效果也使用了MapBox (和Echarts插件)。

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注