WEBGIS:从创建空间数据库、发布数据到调用WMS服务全栈演示

WEBGIS:从创建空间数据库、发布数据到调用WMS服务全栈演示

一、将shp数据导入到postgis数据库

  1. 安装所需要的软件和环境,需要PostgreSQL数据库文件创建和存储软件和postgis空间数据导入工具软件:以下是我安装的相关软件的版本,安装的版本首选稳定性
Postgresql15:用于创建数据库和管理数据 下载网址(https://www.postgresql.org/download/)

Postgis-bundle-pg15:用于导入具有空间属性的数据到创建的数据库里面,根据Postgresql的版本来下载相对应的版本。
下载网址(https://www.postgresql.org/download/)
  1. 打开postgresql软件下面的pgmin模块,输入密码(该密码就是安装该软件的时候设置的密码)
  2. 刷新网址就可以看到软件界面都变成中文显示
  3. 创建数据库:右键左边栏的数据库然后创建一个新的数据库,数据库命名,然后选择数据库的用户(postgres),创建好数据库之后还没有结束
  4. 数据确定导入:设置好SRID后点击导入 ,导入成功之后就可以使用pgmin软件打开数据库然后进行SQL语句查询

连接数据库:点击最上方的【View connection details…】选项然后填写导入的目标数据库相关信息

在这里插入图片描述


图表 1:该表是一个示例,第一个是数据库拥有者的名字,第二个是数据库的密码,第三个是默认的,最后一个是自己创建的数据库的名字

空间数据导入到SQL数据库:首先打开安装的postgis软件中的(PostGIS Post Boundle 1 for PostgreSQL *64 15Shapefile and DBF Loader Exporter)模块,然后点击添加文件,将需要导入的矢量文件选中,然后就可以看到这个界面:

在这里插入图片描述


接下来要设置里面的SRID码,该代码就是指代该空间数据的地理或投影坐标系的编号,我们可以使用Arcmap软件打开该矢量数据,然后查看该数据属性(源)就可以获取该矢量数据的SRID码

创建数据库拓展服务:选中新建的数据库,然后点击:

在这里插入图片描述


该功能框进入到数据库查询界面,在该界面输入:create extension postgis;然后点击运行按钮(▶)就可以启动拓展服务

在这里插入图片描述

设置软件中文显示:

在这里插入图片描述


在这里插入图片描述

二、将postgis数据库中的数据发布成标准地图服务

  1. 需要安装的软件或者应用有:

1.1先安装Java的运行环境(安装可以存放到D盘),安装结束后可以配置运行路径,然后打开cmd(win + r)输入:java -version
1.2然后安装 Tomcat服务器,该安装路径要与Java的安装路径是一致的,安装过程中需要注意的是有一个安装用户和密码的设置,后续使用tomcat登录服务器访问geosever服务然后登陆使用的账号就是这个

在这里插入图片描述


访问localhost:8080端口查看是否可以成功访问

1.3安装geosever:将【geosever.war】压缩包文件裁剪然后粘贴到(./Tomcat7.0/webapps)的目录下就可以了,粘贴后会自动出现一个geosever文件夹(或者可以手动解压到该文件夹目录下)至于该安装包的下载可以直接访问

geosever官网https://geoserver.org/download/
在这里插入图片描述


在这里插入图片描述

Figure :以上是我下载的相应软件的版本安装包和压缩包2. 安装所需的软件之后我们可以基于以下两个步骤来访问到geosever网站

2.1步骤一:访问tomcat软件的端口localhost:8080,然后在该网页点击【ManageApp】输入账号和密码(这里的信息就是安装tomcat是设置的账号和密码,一般为admin和123456),进去管理员的界面,我们要点击启动geosever,启动服务。

在这里插入图片描述

2.2步骤二:直接输入网址:

http://localhost:8080/geoserver/web/

就可以跳转到geosever网址(当然这两种方法都是在已经启动tomcat服务器的前提下),进入网址之后也要登录用户(这里登录的与tomcat那里登录的用户和密码是一样的)

在这里插入图片描述

添加新的数据存储:点击【数据存储】,然后点击【添加新的数据存储】,在对话框里面选择要导入的数据类型的数据库,我们导入的是矢量数据,所以
将里面的数据库数据添加到新的数据工作区,这里选择postgis来导入矢量数据
接下来还要设置几个参数:

这一张示意截图不是我自己创建的,这个是我在网上学习的时候顺便截的,是B站的一名技术博主,如果有侵犯权益联系我删除

>这一张示意截图不是我自己创建的,这个是我在网上学习的时候顺便截的,是B站的一名技术博主,如果有侵犯权益联系我删除

Geosever创建新的工作区:点击左边菜单栏的【工作区】,然后点击【添加新的工作区】,给新建的工作命名,命名空间也是随便(有一定格式),除此之外还要选择服务(这里选择WMS和WFS服务,WFS服务开启方便后续进行数据动态更新和修改与序列化),最后可以点击【提交】

在这里插入图片描述


在这里插入图片描述

4.1工作区:选择刚刚新建的工作区
4.2数据源名称:这里是自己新命名一个新的名称(建议英文)
4.3database:选择要导入的数据库(本次在postgreSQL 15新建的数据库名称)
4.4user:数据库的拥有者,一般为posgres
4.5passwd:数据库的密码(就是在pgmin那里新建的数据库的密码123456)

在这里插入图片描述
  1. 出现问题:通过导入数据库的形式来发布数据库的空间数据但是没有自动跳转到发布的界面,这时候你需要确定新建的工作区是否选择服务,确定选择服务了之后就点击左边菜单栏的【服务】里面的【WMS】,然后再此界面选择新建的工作区,就可以发布连接的数据库里面的数据表作为新图层了

数据预览:点击左边菜单栏的【layer view】,然后找到自己的工作区,点击添加的图层名称就可以预览数据啦

在这里插入图片描述


在这里插入图片描述

如果没有发布选项,我们可以点击左边菜单栏下的【数据】目录下的【图层】选项,然后再点击【添加新的资源】,再选择新建的工作区导入的数据库作为新的图层,就可以看到成功导入的postgis数据库下面的数据表,然后依次点击发布即可(发布里面的设置按照上面的示例)

在这里插入图片描述

设置好之后就可以点击【保存】,然后点击【发布】,点击发布还会进入到设置阶段,在这里需要设置边框数据(一般是自动计算出来),计算出来之后就可以点击保存了

在这里插入图片描述

三、使用OpenLayers调用wms服务加载发布地图

  1. 具体实现效果:可以使用open layers地图框架在浏览器应用上面调用Geosever发布的地图服务。
  2. 打开geosever管理客户端:localhost:8080/geosever/web,点击图层栏然后先选择要导入的图层(这些图层都是已经提前发布好的了)
  3. 调用WMS数据源的语法结构:
//WMS图层 - ImageLayer类型(先增加数据源然后增加数据图层)const WMSsource =newImageWMS({url:'http://localhost:8080/geoserver/WEBsevse/wms',params:{'LAYERS':'WEBsevse:bou2_4p','VERSION':'1.1.0','FORMAT':'image/png','TRANSPARENT':true,'SRS':'EPSG:4326','STYLE':''},serverType:'geoserver',crossOrigin:'anonymous',ratio:1});const WMSLayer =newImageLayer({source:WMSsource,opacity:0.7,visible:true})
  1. crossOrigin是跨域配置:anonymous表示任何人都可以访问

自有数据加载成功界面:

在这里插入图片描述


点击【切换为城市矢量地图】按钮切换图层

在这里插入图片描述

如果出现报错:由于跨域问题(编译器是localhost:5432,浏览器是localhost:8080)无法加载数据,我们可以采用以下解决方案(可以选择添加服务,如果源文件有对应的代码,只是被注释掉了,我们取消注释即可,该文件位于tomcat/conf/web.xml)

在这里插入图片描述


说明:如果源web.xml文件里面没有对应的跨域服务,我们可以自己添加对应的代码,但是一定要好好检查,一般是有的,只是被注释掉了

params里面的参数设置是数据源信息的设置,没有规律可言,要在geosever数据查询的网页那里查看:

在这里插入图片描述


说明:差不多是这样(不重要,可以继续往下做)

注意参数设置:第一个参数是url,geosever地图服务的地址,这个地址可以直接在geosever里面的数据浏览那里的网页复制,或者可以在该浏览器页面然后点击【检查】来实现请求来查看url码:
方法一:直接复制浏览器界面的头顶位置上面的网址,里面有url需要的信息

在这里插入图片描述


方法二:

在这里插入图片描述


在这里插入图片描述


以上三张查看url码的截图也是我在B站学习时直接截取的(只是一个方法和途径说明的作用)

结语:创作不易,给个赞吧🥺。文章如有不对的地方或者对文章有疑问的欢迎私信or联系小编,交流乐意至极。如果需要小编的完整web地图项目(or只需要代码)的欢迎留言。

Read more

基于开源鸿蒙(OpenHarmony)的【智能家居综合应用】系统

基于开源鸿蒙(OpenHarmony)的【智能家居综合应用】系统

基于开源鸿蒙OpenHarmony的智能家居综合应用系统 * 1. 智能安防与门禁系统 * 1) 系统概述 * 2) 系统架构 * 3)关键功能实现 * 4)安全策略 * 5)总结 * 2.环境智能调节系统 * 1)场景描述 * 2)技术实现 * 3)总结 * 3.健康管理与睡眠监测 * 1)业务场景描述 * 2)技术实现方案 * 3 )总结 1. 智能安防与门禁系统 1) 系统概述 本智能安防与门禁系统是基于开源鸿蒙(OpenHarmony)操作系统设计的,旨在为用户提供一套高度集成、智能化的家庭安全防护解决方案。通过整合智能门锁、监控摄像头、门窗传感器等多种安防设备,结合智能手机或智能音箱等控制终端,实现远程监控、身份识别、异常警报等功能,全面提升家庭居住的安全性和便利性。 2) 系统架构 1. 设备层

WebMCP:浏览器AI交互新范式_20260213114222

一、WebMCP是什么 1. 基本定义 WebMCP(Web Model Context Protocol)是Google与Microsoft在W3C框架下联合推动的浏览器原生Web API,Chrome 146已推出早期预览版本,核心目标是让网页主动将自身能力封装为结构化工具,供AI Agent直接调用,解决当前Agent操作网页的稳定性与效率问题。 2. 核心思想 把交互从UI层搬到语义层:不再依赖按钮点击、坐标定位或DOM解析,而是让网页直接暴露"提交请假"“搜索航班”“加入购物车"等业务动作,形成结构化工具契约,Agent按契约调用而非"猜UI”。 3. 关键特性 * 双轨API设计:声明式API(HTML表单属性)+ 命令式API(JavaScript注册),兼顾易用性与灵活性 * 浏览器内运行:纯客户端实现,网页本身就是"工具服务器",天然继承用户登录态与权限上下文 * 结构化上下文:

CentOS环境下libwebkit2gtk-4.1-0安装配置手把手教程

手把手教你解决 CentOS 下 libwebkit2gtk-4.1-0 安装难题 你有没有遇到过这样的场景?在 CentOS 上部署一个基于 GTK 的桌面应用,刚运行就报错: error while loading shared libraries: libwebkit2gtk-4.1.so.0: cannot open shared object file: No such file or directory 别急,这不是你的代码问题,而是系统里缺了关键的 Web 渲染引擎库 —— libwebkit2gtk-4.1-0 。 这玩意儿听着冷门,但其实大有来头。它是 GNOME 桌面生态中许多应用程序(比如帮助手册、配置面板、文档浏览器)背后默默工作的“网页内核”。可偏偏在企业级稳定的

前端快速入门分享:给后端同学的一份路线图

前端快速入门分享:给后端同学的一份路线图

最近技术圈在疯传一张飞书截图,大意是“公司不再按技术栈划分岗位,工程师统一称为 Agent 工程师”。这话听着有点玄,但对我们这种中小型团队来说,其实一直在追求“多面手”的现实主义路线。全栈能力是长期目标,而 AI 只是把这个节奏按快了。 所以我给团队里对前端不太熟的同学做了一次快速入门分享。这篇文章就是那份讲义的“博客版”,改成更顺滑的叙事,方便圈内同好参考。 一、我眼里的前端演进史 我更喜欢用“阶段性主旋律”来理解前端。 1. 远古时期:demo 网页(纯 HTML) * 学生时代的网页三剑客:Dreamweaver、Photoshop、Flash * 一个 index.html 打天下 * 页面 = 结构(HTML)+ 样式(CSS)+ 交互(JS) 2. 服务端渲染时代:JSP / PHP