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

已于 2022-08-28 08:54:14 修改
阅读量2k 收藏 22
点赞数 3
分类专栏： webgis 文章标签： intellij-idea tomcat web postgresql
于 2022-08-23 16:16:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40694662/article/details/125959584
版权

目录

主要内容

环境配置

技术流程

创建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文件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <!-- Include the CesiumJS JavaScript and CSS files -->
    <script src="js/Cesium/Cesium.js"></script>
    <link href="js/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<button onclick="upmap()"> 加载栅格</button>
<button onclick="upmap2()"> 加载矢量 </button>
<button onclick="upmap3()"> 加载多波段 </button>

<div id="cesiumContainer" style="height: 90%;width: 90%"></div>
<script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    // 从cesium官网申请账号Replace `your_access_token` with your Cesium ion access token.

    Cesium.Ion.defaultAccessToken = '替换密钥';

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider: Cesium.createWorldTerrain(),

        sceneMode : Cesium.SceneMode.SCENE2D,
        animation : false,
        // baseLayerPicker : false,
        fullscreenButton : false,
        // vrButton : false,
        // geocoder : false,
        // homeButton : false,
        // infoBox : false,
        // sceneModePicker : false,
        // selectionIndicator : false,
        timeline : false,
        // navigationHelpButton : false,
        // skyBox : false

    });
    // 去除logo
    viewer.cesiumWidget.creditContainer.style.display = "none";
    // // Add Cesium OSM Buildings, a global 3D buildings layer.
    // const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    // viewer.camera.flyTo({
    //     destination : Cesium.Cartesian3.fromDegrees(120.4175, 40.655, 400),
    //     orientation : {
    //         heading : Cesium.Math.toRadians(0.0),
    //         pitch : Cesium.Math.toRadians(-15.0),
    //     }
    // });
    viewer.camera.setView({
        destination : Cesium.Cartesian3.fromDegrees(122, 41, 1000000)
    })

    // var viewer = new Cesium.Viewer('cesiumContainer');
    var wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
        url : 'http://localhost:8080/geoserver/test/wms?service=WMS',
        layers : 'test:result2010',
        parameters : {
            transparent : true,     //是否透明
            format : 'image/png',
            srs: 'EPSG:4326',
            styles:''
        }
    });

    var wmsImageryProvider2 = new Cesium.WebMapServiceImageryProvider({
        url : 'http://localhost:8080/geoserver/test/wms?service=WMS',
        layers : 'test:shi',
        parameters : {
            transparent : true,     //是否透明
            format : 'image/png',
            srs: 'EPSG:4326',
            styles:''
        }
    });

    var wmsImageryProvider3 = new Cesium.WebMapServiceImageryProvider({
        url : 'http://localhost:8080/geoserver/test/wms?service=WMS',
        layers : 'test:2020LC8',
        parameters : {
            transparent : true,     //是否透明
            format : 'image/png',
            srs: 'EPSG:4326',
            styles:''
        }
    });
    // viewer.imageryLayers.addImageryProvider(wmsImageryProvider2);
    function upmap(){
        console.log('hello world');
        viewer.imageryLayers.addImageryProvider(wmsImageryProvider);
        console.log(viewer.imageryLayers);
    }
    function upmap2(){
        console.log('hello world');
        viewer.imageryLayers.addImageryProvider(wmsImageryProvider2);
        console.log(viewer.imageryLayers);
    }
    function upmap3(){
        console.log('hello world');
        viewer.imageryLayers.addImageryProvider(wmsImageryProvider3);
        console.log(viewer.imageryLayers);
    }
</script>
</body>
</html>

结果

底图加载

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" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/vue.js"></script>
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="js/Cesium/Cesium.js"></script>
  <link href="js/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<button onclick="upmap()"> 加载栅格</button>
<button onclick="upmap2()"> 加载矢量 </button>
<button onclick="upmap3()"> 加载多波段 </button>

<div id="cesiumContainer" style="height: 90%;width: 90%"></div>
<script>
  // Your access token can be found at: https://cesium.com/ion/tokens.
  // 从cesium官网申请账号Replace `your_access_token` with your Cesium ion access token.

  Cesium.Ion.defaultAccessToken = '替换秘钥';

  // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
  const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain(),
    sceneMode : Cesium.SceneMode.SCENE2D,
    animation : false,
    fullscreenButton : false,
    timeline : false,
  });
  // 去除logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
  viewer.camera.setView({
    destination : Cesium.Cartesian3.fromDegrees(122, 41, 1000000)
  })
  var wmsImageryProvider = new Cesium.WebMapServiceImageryProvider({
    url : 'http://localhost:8080/geoserver/test/wms?service=WMS',
    layers : 'test:result2010',
    parameters : {
      transparent : true,     //是否透明
      format : 'image/png',
      srs: 'EPSG:4326',
      styles:''
    }
  });

  var wmsImageryProvider2 = new Cesium.WebMapServiceImageryProvider({
    url : 'http://localhost:8080/geoserver/test/wms?service=WMS',
    layers : 'test:shi',
    parameters : {
      transparent : true,     //是否透明
      format : 'image/png',
      srs: 'EPSG:4326',
      styles:''
    }
  });

  var wmsImageryProvider3 = new Cesium.WebMapServiceImageryProvider({
    url : 'http://localhost:8080/geoserver/test/wms?service=WMS',
    layers : 'test:2020LC8',
    parameters : {
      transparent : true,     //是否透明
      format : 'image/png',
      srs: 'EPSG:4326',
      styles:''
    }
  });
  // viewer.imageryLayers.addImageryProvider(wmsImageryProvider2);
  function upmap(){
    console.log('hello world');
    viewer.imageryLayers.addImageryProvider(wmsImageryProvider);
    console.log(viewer.imageryLayers);
  }
  function upmap2(){
    console.log('hello world');
    viewer.imageryLayers.addImageryProvider(wmsImageryProvider2);
    console.log(viewer.imageryLayers);
  }
  function upmap3(){
    console.log('hello world');
    viewer.imageryLayers.addImageryProvider(wmsImageryProvider3);
    console.log(viewer.imageryLayers);
  }
</script>
</body>
</html>

runepic
关注
  • 3
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
GIS教程之将栅格数据 raster data发布到 Web 的 3 个简单步骤
iCloudEnd的博客
11-06 515
易于使用的包来创建 web 地图有很多，想想带有传单的 R 闪亮，或带有传单的 Python Flask，或 Mapbox GL 等等。然而，这并不需要，使用上面的步骤，我自己花了不到 2 分钟的时间将我的光栅文件放入 Web 应用程序，而没有增加任何技术深度。但是，当您想在地图中创建自己的自定义图层时，事情通常会变得更加棘手。也就是说，除了开放的街道地图之外，您还想显示一些您自己的栅格或矢量数据，这些数据已存储在某个文件中的某个位置。只要您的文件小于 5Gb，您就可以在此处免费托管您的文件。
三维webgis开发-Cesium
08-16
基于cesium的三维webgis开发讲解
PostGIS空间数据表建立及Cesium可视化空间数据.docx
04-28
基于postgresql数据库，安装postgis插件后，创建空间数据表，并使用nodejs + express服务空间数据表，在前端采用Cesium加载空间数据，实现空间数据可视化
Geoserver+Cesium 发布带样式矢量数据
baidu_34785556的博客
09-01 1259
geoserver发布矢量地图样式，并用cesium调用。
QGis+PostGis+Geoserver+Cesium
usdnfo的专栏
11-22 6590
手把手,从安装到发布. 从QGIS生产 = > PostGis存储=>Geoserver发布到接口=>Cesium 发布到网页
Web Gis_webgis_GIS地图开发Js_gis_webgis地图来源_web地图可视化_
10-01
通过HTML，实现基本的地图显示以及查找地点等部分的功能。实现地图可视化。
基于GeoServer开发WebGIS相关文档
04-17
学习WebGIS开发，积攒的相关文档和工具，分享给大家学习
cesium学习记录03-QGis数据生产=＞Postgis存储=＞Geoserver发布=＞Cesium调用
木卯彳亍的博客
02-28 1298
Gis数据生产=>Postgis存储=>Geoserver 发布=>Cesium 调用
基于Cesium，探索实景三维webgis的实现过程
WSYYCCY的博客
08-27 2088
基于Cesium，探索三维webgis的实现思路
发布栅格切片地图服务及前端调用
gislaozhang
04-08 1682
1、数据准备 链接：https://pan.baidu.com/s/1RHrwPXPqs4opcHoUBQAFtg 提取码：6scr 研究区北京行政区划数据 cgs2000 符号化、标注（字体需为中文字体，例如：微软雅黑） 2、生成切片方案 注意设置切片原点，切片原点将决定切片的区域，如果切片原点在地图原点的左上角，则切片的范围是全图范围，切片原点和地图原点的关系可...
从零开始学GeoServer源码七（如何注册服务并发布3dtiles和cesium的地形terrain？）
xiangshangdemayi的博客
04-07 6644
  本来发布 3dtiles 和 cesium 的 terrain 文件并不是一定要依赖于 GeoServer ，使用 IIS 或者 Tomcat 都可以，但是发布服务，我习惯了使用 GeoServer ，因此，也就将这些功能整合到 GeoServer 里，方便自己使用。  发布 3dtiles 和 terrain 文件的本质，都是可以通过浏览器访问静态资源，我们知道 3dtiles 有四种格式，分别为 i3dm 、b3dm、pnts、cmpt。而 terrain 文件则是 cesium 的 quanti
pdam-simplewebgis:用于水务公司GIS数据可视化的简单免费网络地图模板
05-17
PDAM简单的WebGIS模板 这是一个简单的Webmap模板，用于将空间数据显示到Web上。 指示 支持的数据是geoJSON格式，请先转换您的数据，或者如果数据在数据库中，请使用PHP函数；要进行自定义，请修改资产/ js / config.js 版权所有（c）2017 Muhammad Iqnaul CC BY-NC-SA 4.0许可。 pdam-simplewebgis“”＃pdam-simplewebgis“
基于WebGIS和WebRTC的可视化校园.pdf
01-02
基于WebGIS和WebRTC的可视化校园.pdf
基础WebGIS应用程式_基于openlayers,与GeoServer和PostGIS联动.zip
07-13
基础WebGIS应用程式_基于openlayers,与GeoServer和PostGIS联动.zip
基于Cesium的WebGIS三维客户端实现技术研究_
11-28
基于Cesium的WebGIS三维客户端实现技术研究,该论文实现思路清晰
基于WebGIS课程作业设计-考研信息可视化.zip
08-31
2.数据：以14-19年本校的应届生考研情况统计为基础在Map Lab实现自定义的数据可视化。 3.网页样式：用Bootstrp的栅格布局排版的。 4.代码：HTML+CSS+JQuery，一共将近四百行 有兴趣的可以拿去参考学习
基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程数据
03-09
基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程数据
geoserver_postgis_postgres_udiga安装程序.zip
09-27
geoserver_postgis_postgres_udiga安装程序.zip
(七)Servlet教程——Idea编辑器集成Tomcat
最新发布
04-24 659
5. 选择Tomcat主目录，Tomcat主目录为bin目录的上级目录，选择完Tomcat主目录后，Tomcat基目录会自动设置好，然后点击“确定”按钮。1. 点击桌面上Idea快捷方式打开Idea编辑器，假如没有创建项目的话打开Idea编辑器后的界面展示如下图所示。3. 然后点击界面中的“所有设置...”,然后点击“构建、执行、部署”，选择其中的“应用程序服务器”4. 点击“+”按钮，选择Tomcat服务器。这样Idea的Tomcat就设置好了。然后点击“应用”和“确定”按钮。
html基于webgis的网页设计
02-27
HTML是一种用于创建网页的标记语言，而WebGIS是一种用于创建基于地图的应用程序的技术。将两者结合起来，可以创建具有交互性、地理空间信息的网站。 以下是一些在HTML中使用WebGIS的技术： 1. 地图插件：许多WebGIS平台（如Google Maps、OpenLayers和Leaflet）都提供可以嵌入HTML网页的JavaScript地图插件。这些插件允许您在网页上添加交互式地图和图层，并使用地理坐标系（如经纬度）来标识位置和区域。 2. 数据可视化：使用WebGIS可以将地理空间数据（如地形、气候、人口等）可视化并呈现在网页上。通过使用各种地图工具和交互式图表，可以帮助用户更好地理解地理空间数据。 3. 位置服务：WebGIS平台还提供位置服务，可让用户在网页上搜索地点、获取路线、查看天气等。通过使用这些服务，用户可以轻松获取与位置相关的信息。 4. 数据库连接：WebGIS可以连接到数据库（如PostgreSQL、MySQL和Oracle），从而使网页可以直接从数据库中读取和写入地理空间数据。这可以使网页变得更加动态和个性化。 5. WebGIS API：许多WebGIS平台还提供API（应用程序接口），这些API允许开发人员编写自己的WebGIS应用程序，并与其他Web服务集成。这些API可以使用多种编程语言（如JavaScript、Python和Java）编写。 总之，使用HTML和WebGIS技术，可以创建出具有丰富地理空间信息和交互性的网站，从而为用户提供更好的地理信息服务。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

runepic

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值