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类的对象),并加载到地图容器中。

代码如下:

目录
相关文章
|
自然语言处理 数据可视化 算法
第5章 数据可视化——5.4 四维图形可视化
第5章 数据可视化——5.4 四维图形可视化
|
数据可视化 定位技术
svg数据可视化地图实战笔记
svg数据可视化地图实战笔记
417 0
|
城市大脑 算法 数据可视化
数字孪生核心技术揭秘(六):传统三维gis与数字孪生的区别
当前对“数字孪生城市”没有一个严格界定的标准,本质上“数字孪生城市”是在传统三维GIS应用的基础上演化而来;随着技术创新和行业需求的发展,两者的差异也越来越大;本文梳理了两者的异同,同时比较了两者的适用场景。
5041 1
数字孪生核心技术揭秘(六):传统三维gis与数字孪生的区别
地理编码与反地理编码
地理编码与反地理编码
758 0
地理编码与反地理编码
|
12月前
|
移动开发 Java API
大疆无人机对接
本文介绍了大疆无人机对接第三方云平台的方案,包括设备对接和CloudAPI对接两种方式,重点讨论了CloudAPI对接。CloudAPI对接方案通过DJI Pilot 2或大疆机场将无人机与第三方云平台连接,实现低门槛接入,无需重复开发APP。方案优势在于让开发者更专注于业务开发,而非无人机功能适配。文章详细阐述了对接流程,包括环境准备、申请APPKey、对接流程、直播功能及获取无人机实时数据等内容,并提供了丰富的接口说明和技术支持资源。
6189 4
大疆无人机对接
|
9月前
|
人工智能 移动开发 前端开发
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
蚂蚁团队推出的AI前端研发平台WeaveFox,能够根据设计图直接生成前端源代码,支持多种应用类型和技术栈,提升开发效率和质量。本文将详细介绍WeaveFox的功能、技术原理及应用场景。
5605 68
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
|
9月前
|
人工智能 前端开发 Java
Spring AI Alibaba + 通义千问,开发AI应用如此简单!!!
本文介绍了如何使用Spring AI Alibaba开发一个简单的AI对话应用。通过引入`spring-ai-alibaba-starter`依赖和配置API密钥,结合Spring Boot项目,只需几行代码即可实现与AI模型的交互。具体步骤包括创建Spring Boot项目、编写Controller处理对话请求以及前端页面展示对话内容。此外,文章还介绍了如何通过添加对话记忆功能,使AI能够理解上下文并进行连贯对话。最后,总结了Spring AI为Java开发者带来的便利,简化了AI应用的开发流程。
7454 2
Spring AI Alibaba + 通义千问,开发AI应用如此简单!!!
|
前端开发 JavaScript 定位技术
Umi使用百度地图服务
Umi使用百度地图服务
372 0
|
数据采集 自然语言处理 调度
一文详谈RAG优化方案与实践
RAG通过检索现有的大量知识,结合强大的生成模型,为复杂的问答、文本摘要和生成任务带来了全新的解决方案。本文详细的介绍了RAG遇到的挑战、通用范式、工程实践、优化实现策略等。