Cesium系列6 - 解决调用geoserver服务跨域请求的问题

本文介绍了解决Cesium加载GeoServer WMS数据时出现的跨域问题的方法。提供了两种解决方案,一种是通过修改GeoServer所在Tomcat的web.xml文件实现,另一种是修改web-inf下的web.xml文件来达到相同目的。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、cesium加载geoserver wms数据跨域报错,已成功解决,亲测可用

二、解决步骤:

解决方法一:修改geoserver所在tomcat的web.xml文件

解决方法二:修改geoserver所在web-inf/web.xml文件

二者选一种即可 ,原理一致,推荐选方法一

解决方法一步骤:

1.下载

链接:https://pan.baidu.com/s/15k3yTmtW5ojI4hPtNEhx1g 提取码:utbi 

2.找到里面的jar包cors-filter-2.4.jar和java-property-utils-1.9.1.jar复制在geoserver所在tomcat的根目录/lib/文件夹下

3.修改[tomcat]/conf/web.xml文件

将下述代码片段加入到在<filter>平级位置

<!-- cesium跨域解决方案1 步骤3--> 
 <filter>
	 <filter-name>CorsFilter</filter-name>
	 <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
	 <init-param>
	   <param-name>cors.allowed.methods</param-name>
	   <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
	 </init-param>
	 <init-param>
	   <param-name>cors.allowed.headers</param-name>
	   <param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
	 </init-param>
	 <async-supported>true</async-supported>
</filter>
<filter-mapping>
 <filter-name>CorsFilter</filter-name>
 <url-pattern>/*</url-pattern>
</filter-mapping>

4.重启测试

解决方法二步骤:

  1. 下载压缩包文件http://shanbe.hezoun.com/cors.zip 同上,
  2. 将其放在[Geoserver]\webapps\geoserver\WEB-INF\下,并解压缩,最终的文件路径如下: 
    [Geoserver]\webapps\geoserver\WEB-INF\org\mortbay\servlets\CrossOriginFilter.class
  3. 修改[geoserver]/webapps/geoserver/WEB-INF下面的web.xml文件, 
    <filter>平级位置添加如下内容:
<filter> 
<filter-name>cross-origin</filter-name> 
<filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class> 
<init-param> 
<param-name>allowedOrigins</param-name> 
<param-value>*</param-value> 
</init-param> 
<init-param> 
<param-name>allowedMethods</param-name> 
<param-value>GET,POST</param-value> 
</init-param> 
<init-param> 
<param-name>allowedHeaders</param-name> 
<param-value>x-requested-with,content-type</param-value> 
</init-param> 
</filter> 
...其他内容 
<filter-mapping> 
<filter-name>cross-origin</filter-name> 
<url-pattern>/*</url-pattern> 
</filter-mapping> 

 4.重启geoserver

三、参考

其他参考博客

<think>好的,用户想了解如何在Cesium加载GeoServer的图层,并且支持动态参数筛选。首先,我需要回顾一下CesiumGeoServer的基本知识。Cesium是一个用于3D地理空间数据可视化的JavaScript库,而GeoServer是一个开源服务器,用于共享地理空间数据,支持WMS、WFS等OGC标准。 接下来,用户提到的动态参数筛选,可能指的是根据用户输入或其他条件动态改变图层显示的要素。比如,根据时间、属性值等参数过滤图层中的数据。这通常可以通过在请求GeoServer的WMS或WFS服务时添加参数来实现。 首先,加载GeoServer的WMS图层。Cesium中可以使用WebMapServiceImageryProvider来加载WMS服务。需要提供GeoServer的URL、图层名称、参数等。这部分应该没问题,但用户可能需要具体的代码示例。 然后是动态参数筛选。WMS的CQL_FILTER参数可以用来过滤要素。例如,在请求中添加&CQL_FILTER=attribute%3D'value',可以只显示属性等于value的要素。但需要注意,CQL_FILTER需要GeoServer支持,并且图层已经发布了相应的属性字段。 另外,WMS的时间参数也可能用到,比如时间序列数据,可以通过TIME参数来指定时间范围。不过用户的问题更偏向属性筛选,所以可能更关注CQL_FILTER或FILTER参数。 接下来需要考虑如何动态修改这些参数。在Cesium中,一旦图层被加载,可能需要重新创建图层实例来应用新的参数,因为现有的ImageryProvider可能不支持动态更新参数。这可能会影响性能,需要提醒用户注意。 可能的步骤是: 1. 初始化加载GeoServer的WMS图层,使用初始参数。 2. 当用户改变筛选条件时,生成新的CQL_FILTER字符串。 3. 移除旧的图层,使用新的参数重新创建ImageryProvider并添加到Cesium中。 此外,用户可能需要处理多个动态参数的情况,比如同时筛选多个属性或时间范围。需要将这些参数正确拼接成CQL_FILTER的语法。 还需要注意GeoServer的版本是否支持某些功能,比如CQL_FILTER在较旧的版本中可能存在限制。另外,问题也可能出现,需要确保GeoServer配置了CORS支持。 可能的代码结构示例: - 创建函数来生成带参数的WMS URL。 -Cesium的viewer.imageryLayers中添加和移除图层。 - 事件处理,当用户输入改变时触发重新加载图层。 可能还需要考虑性能优化,比如防抖处理,避免频繁重新加载图层。 另外,也可以考虑使用WFS服务,但WFS返回的是矢量数据,可能在Cesium中处理更复杂,而WMS是作为图像叠加,可能更适合作为底图。用户需要根据具体需求选择。 总结步骤: 1. 使用WebMapServiceImageryProvider加载GeoServer的WMS图层。 2. 在参数中包含CQL_FILTER或其他过滤参数。 3. 动态修改参数时,重新创建图层并替换旧的。 4. 处理GeoServer的配置和问题。 5. 提供用户界面让用户输入过滤条件,触发参数更新。 最后,需要给出具体的代码示例和注意事项,帮助用户实现功能。</think>在Cesium加载GeoServer图层并支持动态参数筛选,可以通过以下步骤实现: --- ### **1. 基础环境配置** - **CesiumJS**:引入Cesium库(CDN或本地) - **GeoServer**:确保已发布图层并开启WMS/WFS服务 - **支持**:配置GeoServer的CORS允许前端--- ### **2. 加载GeoServer WMS图层** 使用`WebMapServiceImageryProvider`加载WMS服务,通过`parameters`传递动态参数: ```javascript const viewer = new Cesium.Viewer("cesiumContainer"); // 初始化WMS图层 function createWMSLayer(filterParams) { return new Cesium.WebMapServiceImageryProvider({ url: "http://your-geoserver-url/geoserver/wms", layers: "your_workspace:your_layer", parameters: { transparent: true, format: "image/png", ...filterParams // 动态参数(如CQL_FILTER) } }); } // 添加初始图层 let dynamicLayer = viewer.imageryLayers.addImageryProvider(createWMSLayer({})); ``` --- ### **3. 动态参数筛选** 通过 **CQL_FILTER** 或 **FILTER** 实现属性筛选(需GeoServer支持): ```javascript // 示例:根据属性值动态更新图层 function updateFilter(attribute, value) { const filter = `${attribute}='${value}'`; // 例如 "name='Beijing'" // 移除旧图层 viewer.imageryLayers.remove(dynamicLayer); // 添加新参数图层 dynamicLayer = viewer.imageryLayers.addImageryProvider( createWMSLayer({ CQL_FILTER: filter }) ); } // 调用示例:筛选属性"name"为"Beijing"的要素 updateFilter("name", "Beijing"); ``` --- ### **4. 时间动态筛选** 若图层包含时间属性,可使用`TIME`参数: ```javascript function updateTime(timeStr) { viewer.imageryLayers.remove(dynamicLayer); dynamicLayer = viewer.imageryLayers.addImageryProvider( createWMSLayer({ TIME: timeStr // 如"2023-01-01" }) ); } ``` --- ### **5. 用户交互示例** 结合HTML输入控件实现动态交互: ```html <input type="text" id="filterValue" placeholder="输入筛选值" /> <button onclick="applyFilter()">筛选</button> <script> function applyFilter() { const value = document.getElementById("filterValue").value; updateFilter("name", value); } </script> ``` --- ### **注意事项** 1. **GeoServer配置**:确保图层支持CQL_FILTER且属性已发布。 2. **性能优化**:频繁更新图层可能导致卡顿,建议添加防抖逻辑。 3. **错误处理**:捕获`Cesium.DeveloperError`等异常。 4. **WFS替代方案**:如需矢量交互,可改用WFS请求后通过`GeoJsonDataSource`加载--- 通过上述方法,即可在Cesium中实现基于GeoServer的动态参数筛选图层。具体参数需根据实际数据调整,更多细节可参考 [Cesium ImageryProvider文档](https://cesium.com/docs/cesiumjs-ref-doc/WebMapServiceImageryProvider.html) 和 [GeoServer CQL文档](https://docs.geoserver.org/stable/en/user/tutorials/cql/cql_tutorial.html)。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值