跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScript大前端java

WEBGIS 全栈演示:从 PostGIS 导入到 GeoServer 发布及 OpenLayers 调用

综述由AI生成演示了 WebGIS 全栈开发流程。首先将 SHP 矢量数据导入 PostgreSQL 并启用 PostGIS 扩展;接着部署 Tomcat 和 GeoServer,配置工作区与数据存储,将数据库图层发布为 WMS 服务;最后使用 OpenLayers 框架在前端调用 WMS 接口加载地图,并解决跨域问题实现城市矢量地图切换。

赛博朋克发布于 2026/4/5更新于 2026/5/2229 浏览
WEBGIS 全栈演示:从 PostGIS 导入到 GeoServer 发布及 OpenLayers 调用

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

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

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

空间数据导入到 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 官网。

  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 那里新建的数据库的密码)。

  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 表示任何人都可以访问。

自有数据加载成功界面:

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

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

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

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

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

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

方法二:

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

目录

  1. 一、将 SHP 数据导入到 PostGIS 数据库
  2. 二、将 PostGIS 数据库中的数据发布成标准地图服务
  3. 三、使用 OpenLayers 调用 WMS 服务加载发布地图
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

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

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

更多推荐文章

查看全部
  • C++ 继承机制详解:派生类函数、虚继承与菱形继承案例
  • C++ 指针与引用核心面试题解析
  • Java synchronized 深入解析:从字节码指令到锁升级机制
  • llama-cpp-python 从安装到 AI 应用实战指南
  • OpenClaw 接入飞书机器人并部署 Ollama 本地大模型实战
  • OpenJDK 安装与配置图文详解
  • Java synchronized 底层原理:从字节码到锁升级详解
  • Java synchronized 底层原理:从字节码到锁升级机制
  • 二级 Python 考试真题及参考代码合集(简单应用题部分)
  • Java 拼图小游戏开发:基于 Swing 的完整实现
  • Java ThreadLocal 原理、使用场景及内存泄漏问题
  • 基于 SpringBoot2+Vue3 的旅游出行指南系统设计与实现
  • Java JUnit NoSuchMethodError 异常处理与版本兼容修复
  • 自然语言处理在金融领域的应用与实战
  • ComfyUI 节点式工作流与 AI 图像生成技术指南
  • AI 原生重构低代码:开发行业迎来范式革命
  • 各无人机厂家 RemoteID 支持情况汇总
  • GLM-4.6V-Flash-WEB 本地部署与云端 API 成本性能对比
  • 2025 年 10 大 AI 模型 API 中转聚合平台横评与选型指南
  • 拆解 CASIC MOTOR 机器人底盘无刷减速电机

相关免费在线工具

  • 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

  • Base64 字符串编码/解码

    将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online

  • Base64 文件转换器

    将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online