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:别光想着看地图,人家早就开始“算”地图了!
大数据+GIS:别光想着看地图,人家早就开始“算”地图了!
411 17
|
消息中间件 监控 Linux
手把手教你 centos 7 安装RabbitMQ
手把手教你 centos 7 安装RabbitMQ
1788 1
|
移动开发 小程序 前端开发
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
uniapp开发小程序H5页面顶部导航栏navigationBar如何隐藏?三种解决办法
|
1月前
|
存储 机器学习/深度学习 人工智能
深度解析 Hermes Agent 如何实现“自进化”及其 Prompt / Context / Harness 的设计实践
本文是「项目深度解析」系列的第3篇,也欢迎阅读:《深度解析OpenClaw》《深度解析Claude Code》。(文章内容基于作者个人技术实践与独立思考,旨在分享经验,仅代表个人观点。)
深度解析 Hermes Agent 如何实现“自进化”及其 Prompt / Context / Harness 的设计实践
|
2月前
|
人工智能 自然语言处理 JavaScript
OpenClaw 2.6.4 本地运行部署 电脑自动化 AI 配置(包含最新版安装包)
本文详解Windows一键部署OpenClaw 2.6.2教程,5分钟快速搭建本地AI智能体。无需编程基础、免配Python/Node.js环境,支持可视化操作、自然语言指令控制,实现文件整理、浏览器自动化等办公任务,数据全程本地运行,保障隐私安全。
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
10760 46
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
SQL NoSQL 关系型数据库
Grafana 与数据库连接:最佳实践
【8月更文第29天】Grafana 是一个开源的度量分析和可视化套件,被广泛应用于展示来自各种数据源的时间序列数据。它可以与多种数据库类型连接,从传统的 SQL 数据库到现代的 NoSQL 解决方案。本文将介绍如何通过 Grafana 连接到不同的数据源,并提供一些最佳实践。
1847 5
|
Java API 网络架构
利用Java Spring Boot构建微服务架构的实践探索
随着业务复杂性的增长和互联网技术的飞速发展,微服务架构已成为现代软件开发中不可或缺的一部分。本文旨在探讨如何利用Java Spring Boot框架构建微服务架构,包括微服务的定义、优势,以及通过实际案例展示如何设计、开发和部署微服务。我们将关注服务拆分、服务间通信、数据一致性、服务治理等核心问题,并探讨如何结合Spring Cloud生态中的组件来实现高效、可靠的微服务架构。
|
XML NoSQL Java
gis利器之Gdal(一)
主要介绍gdal工具库,它的主要功能,组织结构,让大家有个简单了解。
1007 0
gis利器之Gdal(一)
|
JavaScript IDE 测试技术
Rtsp转Flv在浏览器中播放
【2月更文挑战第5天】本文简单介绍如何间接实现在浏览器中播放rtsp的流,涉及技术点和工具较多,本文仅做功能实现思路的梳理和简单的代码实践,后续整理更深入的实现原理。
1823 1