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工作区,添加如下代码。

    <script>  var viewer = new Cesium.Viewer('cesiumContainer');  var provider = new Cesium.WebMapServiceImageryProvider({  url: 'http://localhost:8082/geoserver/cesium/wms',  layers: 'cesium:taile',  parameters: {  <span style="white-space:pre"> </span>   service : 'WMS',  format: 'image/png',  transparent: true,  }  });  viewer.imageryLayers.addImageryProvider(provider);  </script>  

至此Cesium离线地图服务完成


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

 

2.2 WFS服务

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

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

工具:GeoServer2.6.4,cesium,

 

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

这里假设geoserverWFS服务已经发布好了。

 

获取服务地址

GeoServerLayerPreview图层列表中的目标图层后面,再select on中选择GeoJson

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

 

 

 

AJAX获取GeoJson数据

 

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

 

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

var entities = dataSource.entities.values;for (var i = 0; i < entities.length; i++) {var entity = entities[i];var polylineVolume = {positions:entity.polyline._positions,shape:computeCircle(50.0),material:Cesium.Color.RED}entity.polylineVolume=polylineVolume;entity.polyline=null;
}

 

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

效果图:

 

 

 

 

 

 

参考文章

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

cesium加载WFS服务(GeoServer发布)

 

 

 

转载于:https://www.cnblogs.com/arxive/p/8414843.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369664.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何用ThreadLocals射击自己

它将很好地启动。 像大多数故事一样。 您会发现一个新概念&#xff0c;并对其功能感到惊讶。 然后突然装备了这把新锤子&#xff0c;一切开始看起来像钉子。 根据我们过去几个月的经验&#xff0c; java.lang.ThreadLocal真是一锤定音。 我想这全都归结为ThreadLocal的工作原理…

确保任务的执行顺序

有时有必要对线程池中的任务施加一定的顺序。 JavaSpecialists通讯的第206期提出了一种这样的情况&#xff1a;我们有多个连接&#xff0c;使用NIO可以从中读取。 我们需要确保给定连接中的事件按顺序执行&#xff0c;但是不同连接之间的事件可以自由混合。 我想提出一个类似但…

transition

一、语法 transition: property duration timing-function delay transition属性是个复合属性&#xff0c;她包括以下几个子属性&#xff1a; transition-property &#xff1a;规定设置过渡效果的css属性名称transition-duration &#xff1a;规定完成过渡效果需要多少秒或…

图解在VC里使用graphics.h画图(相似TC)

1 www.easyx.cn 下载 EasyX 库 我下的2014;解压后例如以下图&#xff1b; 2 依据自己的VC 版本号进行安装 3 在控制台画一个圆 #include <graphics.h> // 引用图形库 #include <conio.h> void main() {initgraph(640, 480); // 初始化画图窗体circle(200, 200, 100…

使用SwingWorker的Java Swing中的多线程

如果要使用Swing用J​​ava编写桌面或Java Web Start程序&#xff0c;您可能会觉得需要通过创建自己的线程在后台运行某些东西。 没有什么可以阻止您在Swing中使用标准的多线程技术&#xff0c;并且需要遵循通常的注意事项。 如果您有多个线程访问相同的变量&#xff0c;则需要…

MySql Jar 包下载

MySql JAR 包下载 我们要使用Spring 链接MySql 需要两个Jar 包 一个是C3p0 一个是MySql 的Connection Jar 包 C3p0&#xff1a; 进入下面的网址 http://www.mchange.com/projects/c3p0/ 按照黄色的指示 下载 2. MySql Jar 包 进入MySql 官网 https://dev.mysql.com/down…

c语言以空格分割字符串_c语言中,输入任意字符串,任意空格隔开

c语言中,输入任意字符串,任意空格隔开关注:132 答案:3 mip版解决时间 2021-01-27 16:01提问者更无风月2021-01-27 01:51如题,希望大神代码最佳答案二级知识专家闪光的男人2021-01-27 02:50用scanf以%s读入字符串&#xff0c;即可实现输入以空格分隔的字符串。以下代码功能为&…

Unity经典游戏教程之:是男人就下100层

版权声明&#xff1a; 本文原创发布于博客园"优梦创客"的博客空间&#xff08;网址&#xff1a;http://www.cnblogs.com/raymondking123/&#xff09;以及微信公众号"优梦创客"&#xff08;微信号&#xff1a;unitymaker&#xff09;您可以自由转载&#x…

Html和websocket初识

一、web框架 众所周知&#xff0c;对于所有的Web应用&#xff0c;本质上其实就是一个socket服务端&#xff0c;用户的浏览器其实就是一个socket客户端。 import socketdef handle_request(client):buf client.recv(1024)client.send(b"HTTP/1.1 200 OK\r\n\r\n")cli…

java lombok 视频_Java开发神器Lombok使用详解

最近正在写SpringBoot系列文章和录制视频教程&#xff0c;每次都要重复写一些Getter/Setter、构造器方法、字符串输出的ToString方法和Equals/HashCode方法等。甚是浪费时间&#xff0c;也影响代码的可读性。因此&#xff0c;今天就给大家推荐一款Java开发神器——Lombok&#…

11-[函数进阶]-闭包

1.什么是闭包&#xff1f; 内部函数对外部函数作用域里变量的引用&#xff08;非全局变量&#xff09;&#xff0c;则称内部函数为闭包。 def outer():n 10def inner():print("inner:", n)return innerval outer() print(val) val() 闭包的意义&#xff1a;返回的…

CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来&#xff0c;当然还需要加宽度width属来兼容部分浏览。 实现方法&#xff1a; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 效果如图&#xff1a; 但是这个属性只支持单行…

显示日历的指令:cal

1.显示日历的指令&#xff1a;cal &#xff08;1&#xff09;参数&#xff1a; &#xff08;2&#xff09;实例&#xff1a; 转载于:https://www.cnblogs.com/yfacesclub/p/8434449.html

简单好用的计算器:bc

1.简单好用的计算器&#xff1a;bc &#xff08;1&#xff09;参数&#xff1a; &#xff08;2&#xff09;实例&#xff1a; 执行浮点运算和一些高级函数 设定小数精度&#xff08;数值范围&#xff09; 进制转换 执行结果为&#xff1a;11000000&#xff0c;这是用bc将十进制…

block,inline,inline-block的区别

最近正在复习&#xff0c;紧张地准备几天后的笔试&#xff0c;然后刚好看到这个地方。 block&#xff1a;块级元素&#xff0c;会换行&#xff0c;如div,p,h1~h6,table这些&#xff0c;可以设置宽高&#xff1b; inline:行内元素&#xff0c;不换行&#xff0c;挤在一行显示&am…

anyproxy抓取移动http、https请求

windows下安装AnyProxy抓取移动App Http请求AnyProxy是阿里巴巴基于 Node.js 开发的一款开源代理服务器。做为中间代理服务器&#xff0c;它可以收集所有经过它的http请求流量&#xff08;包括https明文内容&#xff09;&#xff1b;它提供了友好的web界面&#xff0c;便于直观…

Windows 10 IoT Core 17101 for Insider 版本更新

除夕夜&#xff0c;微软发布了Windows 10 IoT Core 17101 for Insider 版本更新&#xff0c;本次更新只修正了一些Bug&#xff0c;没有发布新的特性。已知的问题: F5 driver deployment from Visual Studio does not work on IoT Core.F5 application deployment of headed f…

Spring Batch中的块处理

大数据集的处理是软件世界中最重要的问题之一。 Spring Batch是一个轻量级且强大的批处理框架&#xff0c;用于处理数据集。 Spring Batch Framework提供了“面向TaskletStep”和“面向块”的处理风格。 在本文中&#xff0c;将解释面向块的处理模型。 此外&#xff0c;绝对建…

type=file文件上传H5新特性

1、语法 <input name"myFile" type"file"> 2、属性&#xff08;以下三个仅 HTML5支持&#xff0c;因此存在兼容性问题&#xff09;&#xff08;1&#xff09;multiple &#xff1a;表示用户是否可以选择多个值。multiple只能用于typefile和typeemail…