利用开源工具创建WEBGIS应用

在本文中,我们将大致说明利用开源工具如何与服务器交互以构建交互式或动态 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 允许您制作动态网页,其中部分内容是在调用网页时在服务器上生成的。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大创项目推荐 深度学习手势识别 - yolo python opencv cnn 机器视觉

文章目录 0 前言1 课题背景2 卷积神经网络2.1卷积层2.2 池化层2.3 激活函数2.4 全连接层2.5 使用tensorflow中keras模块实现卷积神经网络 3 YOLOV53.1 网络架构图3.2 输入端3.3 基准网络3.4 Neck网络3.5 Head输出层 4 数据集准备4.1 数据标注简介4.2 数据保存 5 模型训练5.1 修…

用markdown(typora)画系统框图或系统结构图

markdown本身是不支持画系统框图或系统结构图的&#xff1b;但是可以参考excel的语法格式&#xff0c;用合并单元格填充背景色&#xff0c;来实现我们预期的效果&#xff1b; 源代码是html语法&#xff0c;如果有其它需求也可以自己搜索html语法&#xff0c;进行优化 <ta…

netcat一键开始瑞士军刀模式(KALI工具系列五)

目录 1、KALI LINUX简介 2、netcat工具简介 3、在KALI中使用netcat 3.1 目标主机IP&#xff08;win&#xff09; 3.2 KALI的IP 4、命令示例 4.1 测试某IP的端口是否打开 4.2 TCP扫描 4.3 UDP扫描 4.4 端口刺探 4.5 直接扫描 5、即时通信 5.1 单击对话互联 5.2 传…

单向无头链表实现

目录 1. 为什么要有链表&#xff1f; 2. 链表的种类 3. 具体功能实现 &#xff08;1&#xff09;节点结构体定义 &#xff08;2&#xff09;申请节点 &#xff08;3&#xff09;尾插 &#xff08;4&#xff09;尾删 &#xff08;5&#xff09;头插 &#xff08;6&#…

文本信息的二维码怎么做?在线制作文本二维码的3个步骤

现在通过二维码来展示文本信息是很常见的一种方式&#xff0c;可以将信息编辑好排版后生成二维码&#xff0c;其他人可以通过扫描生成的二维码来获取文本信息。这种方式传递起来更加的简单快捷&#xff0c;而且二维码可以长期提供内容展示效果降低了推广成本&#xff0c;在很多…

数据库系统概论(第5版)复习笔记

笔记的Github仓库地址 &#x1f446;这是笔记的gihub仓库&#xff0c;内容是PDF格式。 因为图片和代码块太多&#xff0c;放到CSDN太麻烦了&#xff08;比较懒&#x1f923;&#xff09; 如果感觉对各位有帮助的话欢迎点一个⭐\^o^/

Elasticsearch 加速在无服务器上构建 AI 搜索应用程序

作者&#xff1a;来自 Elastic Alvin Richards, Yaru Lin 今天&#xff0c;我们宣布推出 Elasticsearch Serverless 技术预览版&#xff0c;其功能包括&#xff1a; 以开发人员为中心的体验&#xff0c;通过直观的入门和相关代码示例简化创建人工智能驱动的搜索&#xff0c;所…

常态化运营,让数据安全工作落地生根!

数据安全如同城堡的基石&#xff0c;其重要性无需赘述。 数据安全防护体系的建设&#xff0c;解决数据安全措施“有”和“无”的问题&#xff1b;常态化的数据安全运营工作&#xff0c;解决的是数据安全“能用”和“好用”的问题。 因此&#xff0c;如何让数据安全成为一种常…

国赛部分复现

MISC 神秘文件 下载解压后是个pptm文件&#xff0c;内容丰富 使用010打开ppt查看 发现为PK开头&#xff0c;属于压缩包文件。复制粘贴ppt&#xff0c;修改副本后缀为.zip并解压 part1 查看属性&#xff0c;发现奇怪字符 QFCfpPQ6ZymuM3gq 根据提示Bifid chipher&#xff0c;…

2024中青杯数学建模竞赛B题药物属性预测思路代码论文分享

2024年中青杯数学建模竞赛B题论文和代码已完成&#xff0c;代码为B题全部问题的代码&#xff0c;论文包括摘要、问题重述、问题分析、模型假设、符号说明、模型的建立和求解&#xff08;问题1模型的建立和求解、问题2模型的建立和求解、问题3模型的建立和求解&#xff09;、模型…

一剪梅-答赠云安客刘自果

当众网友看了笔者“边吸氧边动鼠标”的短视频之后&#xff0c;纷纷发来微信问候。其中我的远房亲戚&#xff0c;那个正在潜心写作数十万字的长篇纪实文学《川江向东流》的66岁贤弟刘自果&#xff08;号云安客&#xff0c;亦称自果居士&#xff09;&#xff0c;发来微信鼓励我&a…

图生代码,从Hello Onion 代码开始

从Hello Onion 代码开始 1&#xff0c;从代码开始 原生语言采用java 作为载体。通过注解方式实现“UI可视化元素"与代码bean之间的映射. 转换示例 2&#xff0c;运行解析原理 在执行JAVA代码期间&#xff0c;通过读取注解信息&#xff0c;转换为前端的JSON交由前端JS框…

java中的TreeMap类和Hashtable类+Map集合遍历+集合小结

一、TreeMap类 实现了Map接口&#xff0c;元素为键值对、键不可重复、值可重复 特点&#xff1a;可排序 要求&#xff1a;Key类必须实现Comparable接口 底层结构&#xff1a;红黑树 1、可排序 2、常用方法 与HashMap一致 二、Hashtable类 实现了Map接口&#xff0c;元素…

springboot+jsp校园理发店美容美发店信息管理系统0h29g

前台管理:会员管理、会员预定、开单点单、收银结帐、技师提成 后台管理:数据维护、物料管理、数据查询、报表分析、系统设置等 灵活的付款方式&#xff0c;支持现金、挂帐、会员卡&#xff0c;同时支持多种折扣方式并可按用户要求设置多种结帐类型善的充值卡管理模块:支持优惠卡…

Postman进阶功能-Mock服务与监控

大家好&#xff0c;前面跟大家分享一些关于 Postman 的进阶功能&#xff0c;当我们深入探索 Postman 的进阶功能时&#xff0c;Mock 服务与监控这两个重要方面便跃然眼前。 首先&#xff0c;Mock 服务为我们提供了一种灵活便捷的方式&#xff0c;让我们在某些实际接口尚未准备好…

IS-IS基本配置 IS-IS邻接关系

一.IS-IS基本配置 原理概述 和 OSPF 路由协议一样&#xff0c; IS-IS 也是一个应用非常广泛的 IGP 路由协议&#xff0c;很多 ISP 网络、特别是大型的ISP网络都部署了IS-IS网络协议。 RIP 、 OSPF 等许多 IGP 都是针对 IP ( Internet Protocol &#xff09;这个网络层协议而开…

【Vue】性能优化

使用 key 对于通过循环生成的列表&#xff0c;应给每个列表项一个稳定且唯一的 key&#xff0c;这有利于在列表变动时&#xff0c;尽量少的删除和新增元素。 使用冻结的对象 冻结的对象&#xff08;Object.freeze(obj)&#xff09;不会被响应化&#xff0c;不可变。 使用函…

Vue2基础及其进阶面试(一)

简单版项目初始化 新建一个vue2 官网文档&#xff1a;介绍 — Vue.js 先确保下载了vue的脚手架 npm install -g vue-cli npm install -g vue/cli --force vue -V 创建项目 vue create 自己起个名字 选择自己选择特性 选择&#xff1a; Babel&#xff1a;他可以将我们写…

springboot+jwt+shiro+vue+elementUI+axios+redis+mysql完成一个前后端分离的博客项目

目录 简易博客项目(springbootjwtshirovueelementUIaxiosredismysql)第一章 整合新建springboot,整合mybatisplus第一步 创建项目(第八步骤就行)数据库:1、 修改pom.xml2、修改配置文件3、创建数据库vueblog然后执行下面命令生成表 第二步 配置分页MybatisPlusConfig生成代码(d…

佩戴安全头盔监测识别摄像机

佩戴安全头盔是重要的安全措施&#xff0c;尤其在工地、建筑工程和工业生产等领域&#xff0c;安全头盔的佩戴对于工人的生命安全至关重要。为了更好地管理和监控佩戴安全头盔的情况&#xff0c;监测识别摄像机成为了一项重要的工具。监测识别摄像机可以通过智能技术监测并记录…