跳到主要内容
极客日志极客日志
首页博客AI提示词GitHub精选代理工具
搜索
|注册
博客列表
SQL大前端java

WEBGIS:空间数据库创建、数据发布与 WMS 服务调用

综述由AI生成档演示了 WEBGIS 开发流程。首先将 SHP 数据导入 PostgreSQL 并启用 PostGIS 扩展。接着安装配置 Tomcat 与 GeoServer,将空间数据发布为 WMS 服务。最后使用 OpenLayers 框架在前端调用 WMS 接口加载地图图层,解决跨域问题并实现城市矢量地图切换。涵盖数据库管理、服务端发布及前端集成关键技术点。

协议工匠发布于 2026/4/8更新于 2026/4/296 浏览
WEBGIS:空间数据库创建、数据发布与 WMS 服务调用

一、将 SHP 数据导入到 PostGIS 数据库

  1. 安装所需的软件和环境,需要 PostgreSQL 数据库文件创建和存储软件以及 PostGIS 空间数据导入工具软件。以下是推荐安装的版本,首选稳定性。
  • PostgreSQL 15:用于创建数据库和管理数据(下载地址:https://www.postgresql.org/download/)
  • PostGIS Bundle PG15:用于导入具有空间属性的数据到创建的数据库里面,根据 PostgreSQL 的版本来下载相对应的版本。
  1. 打开 PostgreSQL 软件下面的 pgAdmin 模块,输入密码(该密码就是安装该软件的时候设置的密码)。
  2. 刷新网址就可以看到软件界面都变成中文显示。
  3. 创建数据库:右键左边栏的数据库然后创建一个新的数据库,数据库命名,然后选择数据库的用户(postgres),创建好数据库之后还没有结束。
  4. 数据确定导入:设置好 SRID 后点击导入,导入成功之后就可以使用 pgAdmin 软件打开数据库然后进行 SQL 语句查询。

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

图片

图表 1:示例表包含数据库拥有者名字、数据库密码、默认值及自己创建的数据库名字。

空间数据导入到 SQL 数据库:首先打开安装的 PostGIS 软件中的(PostGIS Post Boundle 1 for PostgreSQL *64 15 Shapefile 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 登录服务器访问 GeoServer 服务然后登陆使用的账号就是这个。

图片

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

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

图片

图片

以上是我下载的相应软件的版本安装包和压缩包。

  1. 安装所需的软件之后我们可以基于以下两个步骤来访问到 GeoServer 网站

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

图片

2.2 步骤二:直接输入网址:http://localhost:8080/geoserver/web/ 就可以跳转到 GeoServer 网址(当然这两种方法都是在已经启动 Tomcat 服务器的前提下),进入网址之后也要登录用户(这里登录的与 Tomcat 那里登录的用户和密码是一样的)。

图片

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

图片

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

图片

图片

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

图片

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

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

图片

图片

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

图片

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

图片

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

  1. 具体实现效果:可以使用 OpenLayers 地图框架在浏览器应用上面调用 GeoServer 发布的地图服务。
  2. 打开 GeoServer 管理客户端:localhost:8080/geoserver/web,点击图层栏然后先选择要导入的图层(这些图层都是已经提前发布好的了)。
  3. 调用 WMS 数据源的语法结构:
// WMS 图层 - ImageLayer 类型 (先增加数据源然后增加数据图层)
const WMSsource = new ImageWMS({
  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 = new ImageLayer({
  source: WMSsource,
  opacity: 0.7,
  visible: true
});
  1. crossOrigin 是跨域配置:anonymous 表示任何人都可以访问。

自有数据加载成功界面:

图片

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

图片

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

图片

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

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

图片

注意参数设置:第一个参数是 url,GeoServer 地图服务的地址,这个地址可以直接在 GeoServer 里面的数据浏览那里的网页复制,或者可以在该浏览器页面然后点击【检查】来实现请求来查看 url 码:

方法一:直接复制浏览器界面的头顶位置上面的网址,里面有 url 需要的信息。

图片

方法二:

图片

图片

目录

  1. 一、将 SHP 数据导入到 PostGIS 数据库
  2. 二、将 PostGIS 数据库中的数据发布成标准地图服务
  3. 三、使用 OpenLayers 调用 WMS 服务加载发布地图
  • 💰 8折买阿里云服务器限时8折了解详情
  • GPT-5.5 超高智商模型1元抵1刀ChatGPT中转购买
  • 代充Chatgpt Plus/pro 帐号了解详情
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫,关注极客日志

微信公众号「极客日志V2」,在微信中扫描左侧二维码关注。展示文案:极客日志V2 zeeklog

更多推荐文章

查看全部
  • 基于 vLLM+Open-WebUI 部署 Qwen3-Embedding-4B 实践
  • RabbitMQ 事务机制与消息限流实战:Spring AMQP 高级应用
  • 无人机多模态目标检测:高多样性基准数据集与融合方法
  • llama.cpp 性能基准测试:参数调优与多场景实战
  • 前端开发基础:CSS 核心语法与常用属性详解
  • Spring Cloud Nacos 实战指南:服务注册、配置管理与负载均衡
  • 八大排序算法核心解析与实战实现
  • 基于 YOLO 与 LLM 的 Web 视觉检测系统:Django+Vue3 实时识别方案
  • .NET 集成 GoView 低代码可视化大屏实战指南
  • VS Code 中 GitHub Copilot 插件无法加载模型的排查与修复
  • 利用 AI 快速开发 Microsoft Visual C++ 应用
  • DeepSeek 深度使用指南:提示词技巧与本地知识库搭建
  • 前端交互体验中的消息提示组件设计
  • MySQL 到 KingbaseES 数据库迁移最佳实践指南
  • 使用 Web Unlocker API 高效抓取亚马逊数据实战
  • Python 开源聊天机器人在电商外贸智能客服中的实战应用与架构解析
  • C++ 实现红黑树:深入理解 STL map 底层原理
  • OpenClaw 集成飞书机器人部署指南
  • OpenClaw 对接飞书机器人:消息不回与 Gateway 断开排查实录
  • C++ 位图与布隆过滤器:原理与实现

相关免费在线工具

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online

  • JavaScript 压缩与混淆

    Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online

  • SQL 美化和格式化

    在线格式化和美化您的 SQL 查询(它支持各种 SQL 方言)。 在线工具,SQL 美化和格式化在线工具,online

  • SQL转CSV/JSON/XML

    解析 INSERT 等受限 SQL,导出为 CSV、JSON、XML、YAML、HTML 表格(见页内语法说明)。 在线工具,SQL转CSV/JSON/XML在线工具,online