GIS地图服务数据可视化

简介: GIS地图服务数据可视化

地图服务数据可视化是根据调用的地图服务请求Web服务器端的地图数据,实现地图数据可视化的过程。通过地图服务、地图、要素和属性数据可以在多种类型的客户端应用程序中使用。下面介绍几种常见的地图服务,重点介绍利用Leaflet加载这些地图服务的方法,包括OSM、Bing地图、Google地图、天地图地图、百度地图、高德地图、智图、ArcGIS瓦片地图。

OSM(Open Street Map,开放街道地图)

是一个网络地图协作计划,目标是创造一个内容自由且能让所有人编辑的世界地图,也称为开源wiki地图。OSM数据开源可以被用户自由下载使用,OSM数据主要从网站(https://www.openstreetmap.org/)中的“导出”界面进行获取。


基于Leaflet加载OSM的主要实现步骤如下。

(1)新建一个Web网站,将Leaflet开发库和样式文件(leaflet.js和leaflet.css)复制到网站的某一个目录下。

(2)在新建网站中创建一个HTML网页,在网页的中引入leaflet.js和leaflet.css。

(3)在HTML网页的中新建一个div作为地图容器,设置其id为“leaf_map”,并设置其高度。

(4)在脚本区域编写代码,实现一个加载地图的函数init(),即在该函数中分别创建Leaflet的Map类、Layer类(L.TileLayer)的对象,通过addTo()方法将图层加载到地图容器中,并在Map类的属性参数中设置参考坐标系、显示中心和显示级数等。

(5)在HTML网页中由onload事件处理函数调用加载地图的函数init(),完成地图加载显示功能。

下面以一个墨卡托坐标系的OSM世界地图服务为例,进行地图的加载显示,地图服务的下载地址为http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

代码如下:

Bing地图(必应地图)

是微软必应搜索引擎的一项功能,它提供了网络地图服务。。Bing地图包括街景地图、鸟瞰图、街边地图和3D地图,全面支持国内外用户进行地图浏览和出行规划,并提供地点搜索、公共交通线路查询、自驾车导航、路况查询和位置定位等功能。使用Bing地图,首先要去官网注册一个微软账户,申请一个Bing地图的密钥,然后就可以在Bing地图集合中使用任意底图。


下面实例实现了Bing地图的加载显示,该服务是一个墨卡托坐标系的瓦片地图服务,加载后的效果如图

基于Leaflet加载Bing地图的主要实现步骤如下。

(1)加载OSM的过程,先定义一个地图容器。

(2)在区域中添加leaflet-bing-layer.js脚本的引用,该插件用于加载Bing地图的显示,下载地址为https://github.com/digidem/leaflet-bing-layer

(3)定义Bing图层(创建与实例化L.TileLayer.Bing类的对象),并添加到Map容器中。

代码如下:

Google地图(谷歌地图)

是Google公司提供的电子地图服务,包括局部详细的卫星照片。该服务提供的功能有全球行政区划图、道路网、卫星影像和地形图。

下面以一个墨卡托坐标系的Google地图服务为例,实现地图的加载显示功能,该服务的下载地址为http://mt1.google.cn/vt/lyrs=m@207000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Galile

基于Leaflet加载显示Google地图的主要实现步骤如下。

(1)加载OSM的过程,先定义一个地图容器。

(2)定义Google地图图层(创建与实例化L.TileLayer类的对象),并加载到地图容器中。

代码如下:

目录
相关文章
|
数据可视化 定位技术
GIS空间分析 三维分析2 TIN创建与三维可视化
本文中,我将带你了解如何在ArcGIS中使用DEM数据制作三维模型
339 0
|
3月前
|
数据可视化 JavaScript 前端开发
数据可视化进阶:D3.js在复杂数据可视化中的应用
【10月更文挑战第26天】数据可视化是将数据以图形、图表等形式呈现的过程,帮助我们理解数据和揭示趋势。D3.js(Data-Driven Documents)是一个基于JavaScript的库,使用HTML、SVG和CSS创建动态、交互式的数据可视化。它通过数据驱动文档的方式,将数据与DOM元素关联,提供高度的灵活性和定制性,适用于复杂数据的可视化任务。 示例代码展示了如何使用D3.js创建一个简单的柱状图,展示了其基本用法。D3.js的链式调用和回调函数机制使代码简洁易懂,支持复杂的布局和交互逻辑。
156 3
|
JavaScript 数据可视化 定位技术
漏刻有时数据可视化Echarts组件开发(24):本地离线的地图下钻与散点图
漏刻有时数据可视化Echarts组件开发(24):本地离线的地图下钻与散点图
139 0
漏刻有时数据可视化Echarts组件开发(24):本地离线的地图下钻与散点图
|
9月前
|
数据可视化
tableau的骑行路线地理数据可视化
tableau的骑行路线地理数据可视化
|
9月前
|
数据可视化 JavaScript 前端开发
数据可视化技术与工具:D3.js 和 Tableau 的比较和选择
数据可视化是当今分析和决策制定的关键步骤。D3.js 和 Tableau 是两个广泛使用的可视化工具。本文将探讨它们的优缺点,以及在选择何种工具时应该考虑的因素。
|
9月前
|
数据可视化 测试技术 定位技术
数据可视化——如何绘制地图
数据可视化——如何绘制地图
|
9月前
|
数据可视化 前端开发 JavaScript
【数据可视化】—大屏数据可视化展示
【数据可视化】—大屏数据可视化展示
|
数据可视化
第5章 数据可视化——5.3 三维图形绘制
第5章 数据可视化——5.3 三维图形绘制
|
XML 数据可视化 JavaScript
“大数据时代下的地理信息可视化:ECharts地图和数据面板实践“
“大数据时代下的地理信息可视化:ECharts地图和数据面板实践“
683 1
|
数据采集 数据可视化 BI
28个数据可视化图表的总结和介绍
在这篇文章中,我们将整理我们能看到的所有数据可视化图表。如果你是数据科学初学者,那么本文将是最适合你的。
240 0
28个数据可视化图表的总结和介绍