【WebGIS】 矢量栅格可视化网页实践——基于cesium、geoserver、postgis

目录

主要内容

环境配置

技术流程

创建web项目

1、创建空项目

2、添加Web框架

3、配置tomcat

4、构建完成

 地图服务发布

栅格

矢量

 服务查看

页面编码测试

配置拓展库

 测试页

结果

底图加载

栅格加载

矢量加载

附录

---

主要内容

矢量数据借助postgis上传到postgre数据库，连同栅格数据发布到geoserver；

构建web项目，引入相关拓展库，使用的jsp仅为展示前端功能

前端借助cesium调用地图服务加载地图

环境配置

以下为用到的环境配置，版本号为本文所用版本，仅供参考

Cesium-1.95

jdk-17

apache-tomcat-9

geoserver-2.21.0

可选：

postgresql-14.4-1及其postGIS插件（仅用于矢量数据管理发布）

IDE选用IntelliJ IDEA 2022，可自选其他便于编译web前端的工具

技术流程

创建web项目

1、创建空项目

2、添加Web框架

右击项目>Add Framework Support(添加框架支撑）

选中Java EE栏Web Application

3、配置tomcat

通过Run > Edit Configurations点击上面的+号，选择Tomcat Server

设置好tomcat以及jre 

默认启动的地址

端口号这里设置为8082，不与geoserver冲突

 

4、构建完成

右上部启动后 打开看到测试网页

测试页

 

 地图服务发布

主要借助geoserver发布地图服务，结合postGIS发布矢量数据

栅格

新建数据源，将本地栅格影像数据源创建，设置相应参数发布

矢量

将矢量存入空间数据库，之后geoserver发布成地图服务，

1、创建postgre空间数据库

使用pgAdmin 4来完成创建，打开创建的普通数据库，在扩展插件列表中右键 ->创建 -> 插件，在添加PostGis空间数据库相关插件

2、上传矢量数据

打开PostGIS Shapefile and DBF Loader Exporter（需安装PostGIS插件）图形化界面工具来完成Shapefile空间数据的导入与导出

连接数据库

 导入矢量文件，设置SRID（从shp文件的.prj查看，对比pg数据库中的spatial_ref_sys确定空间数据的SRID）

 3、发布

 设置好连接空间数据库参数，之后发布即可

 

 服务查看

geoserver管理页面，点击图层预览查看

地址栏可见类似的URL：

http://localhost:8080/geoserver/test/wms?service=WMS

页面编码测试

配置拓展库

将cesium以及vue（便于cesium开发）相关文件复制到文件目录

 测试页

web文件夹下创建index.html，也可直接使用原有jsp文件

由于用到官方在线底图，需要官网申请账号获取使用密钥

    
    
    
    
    
    


 加载栅格
 加载矢量 
 加载多波段 

结果

底图加载

cesium自带多种地图 还有三维显示等诸多丰富功能

 

栅格加载

矢量加载

附录

jsp代码，与html类似

<%--
  Created by IntelliJ IDEA.
  User: run
  Date: 2022/8/23
  Time: 10:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>



  
  
  
  
  
  


 加载栅格
 加载矢量 
 加载多波段