- 开源网络地图可视化:基于Leaflet的在线地图开发
- 杨乃主编
- 2840字
- 2024-03-22 19:46:12
1.1.3 开发包
除了以上不需要编程即可实现地图可视化的操作软件和在线网站,还有一些开发包,用户在这些开发包的基础上,通过编程也可以实现地图可视化。相较而言,使用开发包可以更加灵活、自由地实现地图可视化。本节将介绍常用的开发包。
1.1.3.1 Leaflet简介
Leaflet是一款开源的轻量级交互式地图可视化JavaScript库,能够满足大多数开发者的地图可视化需求,其最早的版本大小仅仅38 KB。Leaflet能够在主流的计算机或移动设备上高效运行,其功能可通过插件进行扩展,拥有易于使用的、文档完善的API,提供了简单、可读性高的源代码。Leaflet官网提供了一系列在线教程,如图1-17所示,本书将重点对基于Leaflet的在线交互式地图可视化进行介绍。
图1-17 Leaflet官网提供的在线教程(来源:Leaflet官网)
1.1.3.2 Mapbox简介
Mapbox不仅提供了Mapbox Studio这种在线可视化工具,还提供了面向网页端、移动端、增强现实和无人驾驶的开源开发包,能够帮助用户在现有的产品中实现灵活、轻量、稳定的地图查询、搜索、导航等位置功能的无缝添加。其中,Mapbox提供了两个面向网页端的开源JavaScript库,其中一个是封装在Leaflet之上的Mapbox.js,它是Leaflet的一个插件;另一个是Mapbox GL JS,使用了由WebGL渲染的矢量瓦片来源和Mapbox风格的交互式地图,能够实现二、三维地图可视化。Mapbox GL JS是Mapbox GL生态系统的一部分,该生态系统还包括Mapbox Mobile。Mapbox Mobile是一个采用C++语言编写的兼容网页端和移动平台的渲染引擎。从Mapbox官网可以看出,在面向网页端的开发工具中,目前主推Mapbox GL JS。Mapbox正在大举进军中国市场,在国内已建立对应的中文官网。与Mapbox类似的开发包还有CARTO开发工具、Here开发工具等。我们GeoVISLAB团队基于Mapbox GL JS研发的室内地图编绘系统如图1-18所示。
图1-18 中国地质大学(武汉)GeoVISLAB团队基于Mapbox GL JS研发的室内地图编绘系统
1.1.3.3 Deck.gl和kepler.gl简介
Uber的可视化团队近些年推出了一套开源的可视化框架,其中,Deck.gl是基于WebGL的地理大数据可视化框架,其官网示例如图1-19所示;kepler.gl建立在Mapbox GL和Deck.gl之上,是一个高性能的、开源的、用于探索大规模地理位置数据集的地理空间分析工具,其官网示例如图1-20所示。kepler.gl支持CSV、JSON、GeoJSON三种数据格式。
图1-19 Deck.gl示例(来源:Deck.gl官网)
图1-20 kepler.gl示例(来源:kepler.gl官网)
1.1.3.4 Openlayers简介
Openlayers可以让用户轻松地在任何网页上放置动态地图,显示任何来源的地图瓦片、矢量数据或标记。Openlayers是完全免费的开源JavaScript库,Openlayers官网提供了丰富的示例和说明文档。和Leaflet一样,Openlayers在国内已经积累了大量的WebGIS用户。我们GeoVISLAB团队与宾夕法尼亚州立大学GeoVISTA中心基于Openlayers开发的Tag Map Explorer如图1-21所示,相关技术详见文献[4-5]。
图1-21 基于Openlayers研发的标签地图可视化系统Tag Map Explorer
1.1.3.5 Cesium简介
Cesium是一个快速、简单、端到端的三维地理空间数据可视化与分析平台,旨在构建世界级的三维地理空间应用。Cesium提供了开源的三维地图可视化JavaScript库,可以在网页端显示海量三维模型数据、影像数据、地形高程数据、矢量数据、时序数据等,目前在国内3D WebGIS领域应用较广。进入Cesium官网后,可以查看详细的开发帮助文档。我们GeoVISLAB团队基于Cesium研发的三维基础地理信息平台如图1-22所示。
图1-22 中国地质大学(武汉)GeoVISLAB团队基于Cesium研发的三维基础地理信息平台
1.1.3.6 D3.js简介
从严格意义上讲,D3.js并不是专为地图可视化而生的。作为最流行的数据可视化库之一,D3.js提供了通用的图表可视化功能,地图可视化只是其重要的功能组成部分之一。D3源自Data-Driven Documents三个单词的首字母,顾名思义,是一个被数据驱动的文档。D3.js允许用户将任何数据绑定到DOM(Document Object Model),利用HTML、SVG和CSS将数据驱动转换应用到文档中。例如,给定一个数组,用户既可以利用D3.js创建一个HTML表格,也可以利用D3.js创建一个交互式的SVG条形图。D3.js犹如为用户提供了一个画笔,可以灵活地绘制各种图表。正因如此,本书将D3.js作为专题地图图表可视化的重要工具进行介绍,此外,还将简要介绍其地图可视化功能。D3.js官网地图示例如图1-23所示。
图1-23 D3.js官网地图示例(来源:D3.js官网)
1.1.3.7 AntV L7简介
AntV是蚂蚁金服推出的全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。AntV L7是由蚂蚁金服AntV数据可视化团队推出的基于WebGL的开源大规模地理空间数据可视分析开发框架。AntV L7中的L代表Location,7代表世界七大洲,寓意能为全球位置数据提供可视分析的能力。AntV L7以图形符号学为理论基础,将抽象复杂的空间数据转化成2D、3D符号,通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达[6]。AntV L7官网提供的图表示例如图1-24所示,从提供的图表示例可以了解AntV L7能够实现的地图可视化功能。
图1-24 AntV L7官网提供的图表示例(来源:AntV L7官网)
1.1.3.8 GeoHey JavaScript SDK简介
GeoHey除了提供了零编程的地图可视化平台,也提供了JavaScript开发包。根据GeoHey官网的介绍,GeoHey JavaScript SDK是一个面向移动互联网时代,遵循移动优先、向下兼容、保持轻量原则的地图SDK。除了一般地图SDK的功能,GeoHey JavaScript SDK还具有以下特性:
(1)针对视网膜屏进行了兼容和优化。
(2)与微信等轻应用平台实现了无缝融合。
(3)支持地图无级缩放。
(4)支持地图旋转。
(5)支持大数据量的显示。
(6)可以在地图上添加图表、视频等内容。
(7)特有的3D模式,能够通过WebGL技术展示炫酷的三维图形。
(8)提供了第三方地图服务集成、聚类、热图、动态目标等多种扩展模块。
通过GeoHey官网提供的开发帮助文档和示例,用户可以了解GeoHey JavaScript SDK的开发过程。GeoHey全球风场图示例如图1-25所示。
图1-25 GeoHey全球风场图示例(来源:GeoHey官网)
1.1.3.9 天地图、高德、百度、腾讯等地图API简介
天地图是国家基础地理信息中心建设的网络化地理信息共享与服务门户,集成了来自国家、省、市(县)各级测绘地理信息部门,以及相关政府部门、企事业单位、社会团体、公众的地理信息公共服务资源,向各类用户提供权威、标准、统一的在线地理信息综合服务[7]。天地图代表了地图服务的“国家队”,提供了多种地图和数据服务。其中,天地图JavaScript API 4.0开源库是一套基于天地图HTML5 API二次开发的开源代码库,提供了与可视化库D3.js的快速集成、热力图、轨迹跟踪动画、海量密集点绘制等功能。相对应地,作为“商业队”的几个典型代表,高德地图、百度地图、腾讯地图等均对外免费开放了由JavaScript语言编写的API,对外开放的功能可通过提供的官方文档进行了解,其中,高德地图API概述如图1-26所示,百度地图API产品简介如图1-27所示。
图1-26 高德地图API概述(来源:高德开放平台官网)
图1-27 百度地图API产品简介(来源:百度地图开放平台官网)
此外,百度地图还专门推出了地理信息可视化开源库MapV;腾讯地图推出了位置服务数据可视化API——Javascript API GL,这是一款基于WebGL技术打造的3D版地图API,同时还同步推出了基于Javascript API GL的位置数据可视化API库。华为目前也正在地图可视化领域进行布局。
1.1.3.10 ECharts简介
ECharts是国内数据可视化领域的新宠,一经推出便广受关注。和D3.js一样,ECharts也是一个通用的图表可视化工具,并不是专门为地图可视化而生的,地图可视化只是其重要的功能组成部分之一,ECharts也可以用于专题地图的图表可视化。与D3.js相比,ECharts的学习成本更低,开发更容易上手,但只能在已经绘制好的图表上进行修改,难以实现灵活定制。前文将D3.js比喻为画笔,用户可以进行创作,ECharts则相当于模板,用户只能进行仿制,但也足以胜任诸多数据可视化的任务。与ECharts类似的产品还有Google Charts、Highcharts等。ECharts二、三维地图可视化如图1-28所示。
图1-28 ECharts二、三维地图可视化(来源:ECharts官网)