Cesium调用Geoserver发布的 WMS、WFS服务

1 GeoServer服务发布

1.1 WMS服务

下载GeoServer安装版安装,同时安装geopackage扩展,以备使用。使用XX地图下载器下载地图,导出成GeoPackage地图文件。

(1)下载 GeoPackage DEM数据

(2)打开GeoServer服务界面

(3)点击左侧工作区 ->添加新的工作区 ->输入一个名字URL可以随意起,点击提交(作者使用的名字是Cesium)

(4)点击左侧数据存储->新建数据源,会发现两个GeoPackage,此处根据下载的地图类型选择即可

(5)工作区选择刚刚新建的工作区,数据源名称可以随便起,连接参数点击浏览选择刚才导出的GeoPackage文件

发布成功后弹出如下窗口,点击发布

点击左侧 -> Layer Perview 找的刚才发布的图层,点击 OpenLayers 

出现如下效果:

2 Cesium调用

2.1 WMS服务

打开Cesium工作区,添加如下代码。

1<script> 2 var viewer = new Cesium.Viewer('cesiumContainer'); 3 var provider = new Cesium.WebMapServiceImageryProvider({ 4 url: 'http://localhost:8082/geoserver/cesium/wms', 5 layers: 'cesium:taile', 6 parameters: { 7 <span style="white-space:pre"> </span> service : 'WMS', 8 format: 'image/png', 9 transparent: true, 10 } 11 }); 12 viewer.imageryLayers.addImageryProvider(provider); 13 </script>

至此Cesium离线地图服务完成

注意:最后访问时使用谷歌浏览器跨域方式访问,否则会出现WMS服务无响应的情况。

2.2 WFS服务

需求: 为了便于前端渲染数据,自定义图层渲染。

**思路:**获取地图服务中的要素进行渲染。

**工具:**GeoServer2.6.4,cesium,

思路有了就开始找资料写代码,cesium有接口可以加载WMS服务,但是加载的WMS服务获取到的是切片,不可能将获取到的要素进行渲染。于是想通过WFS服务来渲染数据,但是cesium没有提供可用的接口,通过google,找到了一个比较靠谱的思路:geoserver的地图服务支持很多格式,其中就可以显示GeoJson数据,然后通过AJAX获取geoserver服务中的GeoJson数据,在通过cesium的GeoJsonDataSource进行数据的加载,然后渲染就好说了。

这里假设geoserver的WFS服务已经发布好了。

获取服务地址

在GeoServer的LayerPreview图层列表中的目标图层后面,再select on中选择GeoJson。

这个时候页面中会以GeoJson格式显示该图层的数据,然后地址栏中的链接就是我们需要的地址,如下图所示。

AJAX获取GeoJson数据

1var viewer = newCesium.Viewer('cesiumContainer'); 2 $.ajax({ 3 url:"http://localhost:8082/geoserver/mytest/ows?service=WFS&request=GetFeature&typeName=mytest:river4&outputFormat=application/json", 4 cache: false, 5 async: true, 6 success: function(data) { 7 var datasource=Cesium.GeoJsonDataSource.load(data); 8 viewer.dataSources.add(datasource); 9 }, 10 error: function(data) { 11 console.log("error"); 12 } 13 });

这样数据就被加载到cesium中了,然后使用 dataSource.entities.values,就可以对图层进行渲染了,代码如下:

1var entities = dataSource.entities.values;for (var i = 0; i < entities.length; i++) { 2 var entity = entities[i]; 3 var polylineVolume = { 4 positions:entity.polyline._positions, 5 shape:computeCircle(50.0), 6 material:Cesium.Color.RED 7 } 8 entity.polylineVolume=polylineVolume; 9 entity.polyline=null; 10}

**PS:**这里还要解决跨域问题,否则ajax获取不到GeoJson数据,解决方法:http://pan.baidu.com/s/1cpGg1oCesium_Load_GeoJson.rar

效果图:

参考文章

kill5921,   Cesium 调用Geoserver WMS服务及Geoserver服务发布

cesium加载WFS服务(GeoServer发布)

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

java中比较两个时间的差值

项目背景1.某篇文稿的发布时间是publishDate,例如:2020072118:00:41。2.现要求判断该篇文稿的发布时间是否在近30天之内。publicstaticlongdayDiff(DatecurrentDate,DatepublishDate){LongcurrentTimecurrentDat