cesium加载wms，支持空间范围与属性查询过滤

活了一百万次的Aisencl

于 2025-01-15 21:41:20 发布

阅读量875

点赞数 23

分类专栏： GIS 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/Aisencl/article/details/145168013

版权

关键点

使用CQL过滤器进行空间关系与属性的过滤
cql参数较长，改变原先默认的get请求为post请求
post请求发送的表单数据超出限制，不得不更改服务器配置

背景情况

项目需要对配好样式的wms图层进行的过滤显示，支持属性和空间关系的过滤。项目使用cesiumJS，图层服务是geoserver发布的wms，前端实现该功能。

关键源码

// 定义自的 WMS 图层
const customWMSProvider = new CustomWebMapServiceImageryProvider({
   url: newUrl, // 替换成你的WMS服务的URL 例如http://10.0.0.84:8080/geoserver/jilin/wms
   layers: layers,
   version: '1.1.1',
   request: 'GetMap',
   styles: '',
   transparent: true,
   CQL_FILTER: 'cql字符串', // 可以先在wms服务里面验证一下正确禹都
   SRS: 'EPSG:4490',
   format: 'image/png'
 })

 // 添加自定义WMS图层到Viewer
 viewer.imageryLayers.add(new Cesium.ImageryLayer(customWMSProvider))

扩展的 CustomWebMapServiceImageryProvider，主要是为了自定义post请求的方式来获取图片数据，解决get请求不能拼接太长的url参数的问题。