利用开源工具创建WEBGIS应用

news2025/1/6 19:40:42

在本文中,我们将大致说明利用开源工具如何与服务器交互以构建交互式或动态 Web GIS。 WebGIS 应用程序已成为展示地理数据的重要模式。我们现在拥有允许用户交互的机制,以便用户可以选择数据,甚至修改或添加新数据。

图片

什么是WEBGIS?

   通过网络地图即我们理解的网络上的地图的发布。WEBGIS一种允许用户通过网络查看、处理和修改数据的地图模式。这肯定需要与服务器进行某种类型的通信。

假设地理数据存储在数据库中(PostGIS、MySQL...),尽管客户端也可以支持 GIS 数据的任何类型的格式(shp、geoTIFF...),但webgis数据查询主要是通过两种方法进行(利用桌面或移动端访问服务器上的地图服务也可以认为是WEBGIS的一种特殊形式):

  1. WMS、WFS、WCS 查询地图服务器。

  2. 使用 HTTP 连接和请求服务器。

    图片

数据库的作用:

   任何应用程序的核心都是数据。有多种类型的格式和方法来保存和处理该数据。最常见的是,我们在服务器上有一个数据库,负责提供数据。使用地理数据库有几个原因,例如:

  1. 当数据定期更新时。海上浮标发送的波高或飞机、船舶、车辆或人员的地理位置等数据需要不断更新。

  2. 数据量大。如果我们有少量数据,我们可以将其保存为传统的 GIS 格式,例如 shp 或 GeoJSON,但如果数据量非常大,则不切实际。

  3. 数据访问控制。我们需要根据用户配置文件来控制数据访问。并非所有用户都可以访问或修改所有数据。

使用最广泛的空间数据库可能是PostGIS。它是一个经常使用的 PostgreSQL 扩展,因为它是GeoServer等服务的标准。GeoServer+PostGIS 与OpenLayers或Leaflet等 JavaScript 库的结合是创建基于免费软件的 WEB GIS 架构是常见方法。我们可以使用的另一个数据库是MySQL。该数据库可能是使用最广泛的数据库之一 。然而,对于地理数据,传统上它被归入 PostGIS。

通过使用 GeoServer 或 Mapserver 等服务器进行交互

按照前面的方案,我们看到数据库提供由地图服务器(例如GeoServer或MapServer)处理的资源。

数据可以由为我们提供WMS、WFS或WCS服务的地图服务器进行处理。WFS 客户端可以下载矢量数据供其使用,因此它可以操纵该数据来执行空间分析和其他操作。地图服务器(Geoserver 或 Mapserver)将充当数据库和用户之间的中介。

这具有明显的优点:有效、易于处理和使用。但它也有一些缺点:地图服务器提供GML文件,这是OGC标准。尽管有过滤实体的机制,但如果该文件是包含大量数据的地图,则速度可能会很慢。在此配置中,服务提供商负责配置数据。

作为前一种情况的替代方案,用户可以直接访问服务器上托管的数据并使用 HTTP 与其建立通信。这种方法的优点是数据查询的灵活性。在以下部分中,我们将分析使用 HTTP 的可能架构。

通过 HTTP 进行交互

HTTP 是一种协议,定义客户端和 Web 服务器之间的通信规则。客户端向服务器发送 HTTP 请求。服务器以请求的信息(网页、文件、多媒体资源等)进行响应。

图片

HTTP请求有以下几种方法:

  • GET:获取资源。

  • POST:向服务器发送数据。

  • PUT:更新资源。

  • DELETE:删除资源。

客户端工具

我们可以考虑经典的情况,使用 HTML、CSS 和 JavaScript 来构建用户界面,并使用Leaflet或OpenLayers来构建地图。此外, React或 Angular等框架可用于为应用程序提供结构。

在此架构中,客户端向包含地理空间数据的服务器(即数据库)发送 HTTP 请求。该服务器处理数据并以 JSON 格式返回。客户端接收到的数据通过OpenLayers或者Leaflet进行渲染。CRUD(创建、读取、更新、删除)操作是使用 POST、PUT 或 DELETE 请求完成的。

作为这种“经典”情况的替代方案,可以使用Axios或Fetch发出 HTTP 请求。

  • Axios 是一个基于 Promise 的 Node.js 和浏览器 HTTP 客户端。

  • Fetch 是一个 JavaScript 函数,用于从浏览器发出 HTTP 请求(例如 GET、POST、PUT、DELETE)。

服务器端工具

在服务器端,我们可以根据我们使用的编程语言找到以下几种可能性。

基于 JavaScript 的解决方案

PostGIS + Node (Express) + Leaflet-React / OpenLayers

在这种情况下,我们可以将Node.js与Express结合使用。

您可以在下图中看到该架构的示意图:

图片

本例的工作流程如下:

  1. React 客户端通过 HTTP 请求(Axios、Fetch)从 Express 服务器请求地理空间数据。

  2. Express服务器接收请求并查询PostGIS数据库。

  3. PostGIS 数据库响应请求的数据,该数据通过 HTTP 响应发送回 React 客户端。

  4. React 客户端使用接收到的数据通过 Leaflet 渲染地图。

所有工具都基于 JavaScript,因此您无需学习其他编程语言。

此选项非常适合创建单页应用程序 (SPA)。允许与服务器进行有效的交互。

基于Python的解决方案

PostGIS + Django 和 GeoDjango + Leaflet/OpenLayers

Django是一个高级 Web 框架,可以快速开发安全且可维护的网站。另一方面,  GeoDjango提供了用于地理空间数据的管理和可视化的特定工具。

基于PHP的解决方案

PostGIS + PHP + Leaflet /OpenLayers

超文本预处理器PHP 是一种服务器端脚本语言,可以嵌入到传统的 HTML 页面中。

  • PHP 可以在大多数 Web 服务器和所有操作系统上使用。

  • PHP 是免费软件。

  • PHP 在服务器端工作。因此,我们需要一台服务器,或者在我们的计算机上有一个像 Xampp 这样的服务器,可以解释 php 脚本。

  • PHP 允许您制作动态网页,其中部分内容是在调用网页时在服务器上生成的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1709400.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

三十、openlayers官网示例解析Double click, Drag and Zoom——第二次点击鼠标拖拽缩放地图效果、取消地图双击放大事件

这篇展示了如何在地图上添加第二次按下鼠标移动鼠标实现拖拽缩放地图效果。 官网demo地址: Double click, Drag and Zoom 官网介绍文字的翻译如下: 示例比较简单,直接贴代码: const map new Map({//添加第二次点击拖拽缩放地图i…

Meta 推出新型多模态 AI 模型“变色龙”(Chameleon),挑战 GPT-4o,引领多模态革命

在人工智能领域,Meta 近日发布了一款名为“变色龙”(Chameleon)的新型多模态 AI 模型,旨在挑战 OpenAI 的 GPT-4o,并刷新了当前的技术标准(SOTA)。这款拥有 34B 参数的模型通过 10 万亿 token 的…

探索机器人智能设备:开启智慧生活新篇章

机器人智能设备作为科技创新的代表,正以其独特的魅力吸引着越来越多的关注。它们不仅具备高度的智能化和自主化能力,还能在各种场景下发挥出强大的功能。 机器人智能设备的张总说:在智能家居领域,机器人智能设备可以帮助我们实现家…

骨折分类数据集1129张10类别

数据集类型:图像分类用,不可用于目标检测无标注文件 数据集格式:仅仅包含jpg图片,每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数):1129 分类类别数:10 类别名称:["avulsion_fracture",…

鸿蒙ArkUI-X跨语言调用说明:【平台桥接开发指南(Android)BridgePlugin】

BridgePlugin (平台桥接) 本模块提供ArkUI端和Android平台端消息通信的功能,包括数据传输、方法调用和事件调用。需配套ArkUI端API使用,ArkUI侧具体用法请参考[Bridge API]。 说明: 开发前请熟悉鸿蒙开发指导文档: gitee.com/li-…

微软Copilot+ PC:Phi-Silica

大模型技术论文不断,每个月总会新增上千篇。本专栏精选论文重点解读,主题还是围绕着行业实践和工程量产。若在某个环节出现卡点,可以回到大模型必备腔调重新阅读。而最新科技(Mamba,xLSTM,KAN)则提供了大模…

webserver服务器从零搭建到上线(九)|⭐️EventLoop类(一)——详解成员变量、简述成员方法

在本节中&#xff0c;我们一起来仔细探讨一下EpollPoller类。该类可以说是muduo库中最最核心的类了&#xff0c;一定要搞懂&#xff01; 文章目录 私有成员using ChannelList std::vector<Channel*>looping_、quit_threadId_pollReturnTime_、poller_wakeup_fd、wakeupC…

机器学习-1-了解机器学习machine learning的基本概念

参考机器学习算法 - 一文搞懂ML(机器学习) 参考机器学习算法 - 一文搞懂SL(监督学习) 参考机器学习算法 - 一文搞懂UL(无监督学习) 1 机器学习 1.1 机器学习的本质 基本思路:无论使用什么样的算法和数据,机器学习的基本思路都可以归结为以下三个核心步骤。 (1)问题…

Nginx的集群负载均衡(nginx构建tomcat集群案例)

一 .Nginx的集群负载均衡 1.nginx 集群负载均衡示意图 2.四层负载均衡和7层负载均衡 LVS 四层负载均衡(常用); Haproxy四层负载均衡;Nginx 四层负载均衡; Haproxy七层负载均衡;Nginx 七层负载均衡(常用); 3.nginx构建tomcat集群 步骤1:安装tomcat 步骤2:nginx配置tom…

图论(五)-最短路

一、Bellman-Ford算法 算法思想&#xff1a;通过 n 次循环&#xff0c;每次循环都遍历每条边&#xff08;共 m 条边&#xff09;&#xff0c;进而更新节点的距离&#xff0c;每次循环至少可以确定一个点的最短路&#xff0c;循环 n 次&#xff0c;求出 n 个点的最短路 时间复杂…

git:Unable to negotiate问题解决

场景说明&#xff1a; 安装了Gitblit(自架的代码仓库服务)发现部分电脑无法推代码&#xff0c;报错误如下&#xff1a; Unable to negotiate with **** port 22: no matching host key type found. Their offer: ssh-rsa 并排队了账户权限问题。 解决方案&#xff1a; 1.打开问…

HttpClient cookie爬虫记录

记录一次java语言使用httpclient爬取网站接口数据的经历 需要用到的依赖&#xff1a; httpclient和httpcore是封装了http请求的工具类 jsoup可以将返回的网页html找到你需要的xml节点&#xff0c;很方便 <dependency><groupId>org.apache.httpcomponents</gr…

Spring系列-01-IOC的依赖查找和依赖注入

IOC基础 IOC发展 初始场景, 不使用IOC如何实现 假定现在有一下需求, 开始使用的数据源是MySQL, 后续数据源变动为Oracle, 那么我们的代码就需要改动 每次切数据源都需要改动, 那么进行优化 静态工厂解决强依赖 在01版本基础上, 使用静态工厂对多个数据源进行了封装, 要哪…

Unity UGUI系统概念分析

文章目录 前言一、UGUI运行原理二、UGUI组件分析1、Canvas组件2、Canvas Scaler3、Graphic Raycaster组件4、EventTrigger组件5、Image 和 RawImage组件5、Mask 和 RectMask2D组件6、Button、Sider、DropDown等组件 三、UGUI源码分析三、UGUI优化四、UI框架设计五、UI适配总结 …

三十一、openlayers官网示例Draw Features解析——在地图上自定义绘制点、线、多边形、圆形并获取图形数据

官网demo地址&#xff1a; Draw Features 先初始化地图&#xff0c;准备一个空的矢量图层&#xff0c;用于显示绘制的图形。 initLayers() {const raster new TileLayer({source: new XYZ({url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/…

快团团帮卖团长怎么对供货大团长进行评分?

都说帮卖“躺赚”&#xff1f; 一旦遇团不淑&#xff0c;惨遭不靠谱团长挖坑&#xff0c;售后拖延、发货慢、产品瑕疵…… 加上顾客夺命连环催&#xff0c;双面夹击&#xff0c;夹缝生存。供货团长靠不靠谱太重要了&#xff01; 快团团供货团长评分系统上线&#xff01; 帮卖团…

深入理解MySQL索引下推优化

在MySQL中&#xff0c;索引的使用对于查询性能至关重要。然而&#xff0c;即使有合适的索引&#xff0c;有时查询性能仍然不尽如人意。索引下推&#xff08;Index Condition Pushdown&#xff0c;ICP&#xff09;是一项能够进一步优化查询性能的技术。本文将详细讲解索引下推的…

Postman入门 - 环境变量和全局变量

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、发送请求 二、设置并引用环境变量 比如&#xff1a;我建的这个生产环境 使用环境有两个方式&…

大学数学常用的搜题软件?分享四个搜题直接出答案的软件 #微信#媒体#职场发展

以下软件拥有强大的搜索功能&#xff0c;能够快速找到与题目相关的资料和答案&#xff0c;让大学生们更容易理解和掌握知识点。 1.The Sky The Sky 是一个让人惊艳的天文知识学习软件&#xff0c;也是一个唯美好看的天文科普软件。 它的功能全面丰富&#xff0c;支持识别查看…

常见排序算法之插入排序

目录 一、直接插入排序 1.1 什么是插入排序 1.2 代码思路 1.3 C语言源码 二、希尔排序 2.0 插入排序的弊端 2.1 什么是希尔排序&#xff1f; 2.2 排序思路 2.3 C语言源码 一、直接插入排序 1.1 什么是插入排序 插入排序是一种简单直观的排序算法&#xff0c;它通过构…