vue项目中使用cesium且使用geoserver服务，实现条件查询及拿到过滤之后的json数据

如图所示，geoserver上有自带查询功能，我们使用cesium之后，搭配geoserver的瓦片服务，也需要这个条件查询怎么办？

解决办法：使用cql_filter

其中searchName为查询参数， cql_filter中的属性值为sql查询语句，这句是模糊查询

还有一个办法使用空间过滤器

这边鉴于自己实际情况，我使用了BBOX，这个是个盒子，截取的部分为一个方形

DISJOINT ，截取除多边形之外的内容

INTERSECTS，截取多边形

注意，上面俩方法都必须形成一个多边形闭环，即出发点是结束点

OGC（即使用xml写法）这个示例是用了geoserver中美国人口分布的那个图层

<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"> 
	<Intersects>
		 <PropertyName>the_geom</PropertyName>
		<gml:LineString><gml:coordinates>-90,40 -90,45 -60,45 -60,40 -90,40</gml:coordinates></gml:LineString>
	</Intersects>
</Filter>

针对多个不同区域的空间过滤、筛选。 这边我使用的是“或”关系，我使用“与”好像。总之问题是给解决了

<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">
	<Or>
	<Within>  
		<PropertyName>SHAPE</PropertyName>
		<gml:LineString>  
			<gml:coordinates>
				113.91,29.59 113.80,29.57 113.69,29.59 113.69,29.68 113.91,29.59
			</gml:coordinates> 
            	</gml:LineString>
	</Within>
	<Intersects>  
		<PropertyName>SHAPE</PropertyName>
		<gml:LineString>  
			<gml:coordinates>
				114.08,29.82 114.10,29.80 114.12,29.75 114.14,29.71 114.08,29.82
			</gml:coordinates> 
            	</gml:LineString>
	</Intersects>
	</Or>
</Filter>

空间过滤js的写法如下：

let filter= `
        <Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"> 
          <Intersects><PropertyName>SHAPE</PropertyName>
          <gml:LineString>
            <gml:coordinates>113.74,29.79 113.77,29.81 113.83,29.82 113.74,29.79 </gml:coordinates>
          </gml:LineString>
          </Intersects>
        </Filter>
      `

var layer = new Cesium.WebMapServiceImageryProvider({
        url: `${this.shpAddress}geoserver/yzzh/wms`,
        layers: "yzzh:biz_line",//图层名
        index: 1,
        parameters: {
          service: "WMS",
          format: "image/png",
          transparent: true,
          FILTER: filter,
        },
      });
      window.viewer.imageryLayers.addImageryProvider(layer);

以上两种js写法都可以在页面中显示你想要的结果shp，那我们如何得到过滤之后的shp返回给我们的json数据呢？

如下所示：

 这是页面展示数据，条件过滤之后的shp

 这是在geoserver上使用ogc空间过滤之后的数据，结果一致。然后怎么得到json数据呢？

let filter= `
        <Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"> 
          <Intersects><PropertyName>SHAPE</PropertyName>
          <gml:LineString>
            <gml:coordinates>113.74,29.79 113.77,29.81 113.83,29.82 113.74,29.79 </gml:coordinates>
          </gml:LineString>
          </Intersects>
        </Filter>
      `
      axios({
        method:'get',
        url:'xxxx/geoserver/yzzh/wfs?',//图层发布的地址
        params:{
          service: 'WFS',
          version: '1.0.0',
          request: 'GetFeature',
          typeName: 'xxx',//图层名称
          maxFeatures: 500000,
          outputFormat: 'application/json',
          // cql_filter: `属性名 like '%查询条件%'`,// cql模式过滤
          filter: filter,//ogc模式过滤
        },
      }).then(res=>{
        //拿到数据之后，你要执行的操作
      })

记住“SHAPE”是这个图层的geometry_name的属性值