openlayer cql_filter 实现空间查询

发表于

加载geoserver Wms服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
this.polygonSource = new TileWMS({
	url:"http://120.196.115.131:18080/geoserver/oceandata/wms",
	params: {
		'LAYERS': 'oceandata:data_polygon',
		"STYLES":"datapolygon",
		"CQL_FILTER":CQL_FILTER,
	
	},
	serverType: 'geoserver',
	transition: 0,
})
this.wmsLayerPolygon = new TileLayer({
	source: this.polygonSource
})
this.map.addLayer(this.wmsLayerPolygon)

使用Cql

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var CQL_FILTER="";
var point = transform([position.west,position.south], 'EPSG:4326', 'EPSG:3857')
var point2 = transform([position.east, position.north], 'EPSG:4326', 'EPSG:3857')
var polygon1 = transform([position.west,position.south], 'EPSG:4326', 'EPSG:3857');
var polygon2 = transform([position.east, position.south], 'EPSG:4326', 'EPSG:3857');
var polygon3 = transform([position.east, position.north], 'EPSG:4326', 'EPSG:3857');
var polygon4 = transform([position.west,position.north], 'EPSG:4326', 'EPSG:3857');
if(this.formData.positionType==1){//交叉查询
    CQL_FILTER = `BBOX(sampling_station_info_geom, ${point[0]},${point[1]},${point2[0]},${point2[1]}) and share_state=0`
}else{//包含查询
    CQL_FILTER = `WITHIN(sampling_station_info_geom, POLYGON((
                ${polygon1[0]} ${polygon1[1]}, 
                ${polygon2[0]} ${polygon2[1]}, 
                ${polygon3[0]} ${polygon3[1]}, 
                ${polygon4[0]} ${polygon4[1]},
                ${polygon1[0]} ${polygon1[1]}))) and share_state=0`
}
if(metadata_name){//名称模糊搜索
    CQL_FILTER+=` and metadata_name like '%${metadata_name}%'`
}
if(area.length>0){
    var temp = ''
    area.forEach((item,index)=>{
        if(index+1!=area.length){
            temp+= `area like '%${item}%' or `
        }else{
            temp+= `area like '%${item}%' `
        }
    })
    CQL_FILTER+=` and (${temp})`
}
if(classification.length>0){
    var temp = ''
    classification.forEach((item,index)=>{
        if(index+1!=classification.length){
            temp+= `classification like '%${item}%' or `
        }else{
            temp+= `classification like '%${item}%' `
        }
    })
    CQL_FILTER+=` and (${temp})`
}

cql文档 链接

示意图

0%