leaflet geoserver

图层的查询条件 CQL_FILTER

直接通过某个值直接查询 列如

CQL_FILTER = `region_code = ${this.row.regionCode}`

CQL_FILTER = 'region_code in (xxxx,xxxx,xxxx,xxxx)'

判断某一个地块是否存在某一个区域中 列如

CQL_FILTER = `INTERSECTS(geom,polygon(( 
	119.8733711 29.19246529,
	....
	一般可填写多边形地块点金纬度
)))`
// 判断返回接口中的 features 数组长度判断是否存在

判断某一个地块是否与某一个地块重叠 列如

CQL_FILTER = `CONTAINS(geom,polygon(( 
	119.8733711 29.19246529,
	....
	一般可填写多边形地块点金纬度
)))`
// 判断返回接口中的 features 数组长度判断是否重叠

点击地块变色

var param = {
  service: "WFS",
  version: "1.0.0",
  request: "GetFeature",
  typeName: `shp330703-a:grain_acre`,//在某一个图层上查询
  maxFeatures: 9999999,//最大可查询到的数量
  outputFormat: "application/json",//返回的类型
  CQL_FILTER: sql,//查询条件
}
let { data } = await getGeoJsonFromGeoserver(param)
if (data.features.length > 0) {
  data.features.map(v => {
    let obj = L.geoJSON([v.geometry], {
      style: {
        color: '#fff', // 边框颜色
        weight: 1, // 边框粗细
        opacity: 1, // 透明度
        fillColor: '#fff', // 区域填充颜色
        fillOpacity: 0.3,  // 区域填充颜色的透明
      }, 
      pane: 'popupPane',// 层级，类似 z-index
      obj.on('click', (e) => {
      	//点击地块时可拿到相应数据-可操作地块
    	})
    }).addTo(this.map)
    this.list.push(obj)//这里一定需要存储一下，方便后面点击非地图区域时操作地块
  })
}

// 变色
this.list.map(v=>{
  if(条件){
    v.setStyle({color:'red'})
  }
  // 可移除某一个地块
  this.map.removeLayer(v)
})

删除某一个地块/图层

let xml = `<wfs:Transaction xmlns="http://www.opengis.net/wfs" xmlns:wfs="http://www.opengis.net/wfs" xmlns:gml="http://www.opengis.net/gml" xmlns:shp330703-a="shp330703-a" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs https://map.phone366.com:8443/geoserver/schemas/wfs/1.0.0/WFS-basic.xsd shp330703-a https://map.phone366.com:8443/geoserver/shp330703-a/wfs" service="WFS" version="1.0.0">`
xml += "<wfs:Delete typeName='shp330703-a:grain_acre'>"
xml += '<Filter xmlns="http://www.opengis.net/ogc">'
xml += '<FeatureId fid="' + val + '"/>'//fid是图层自动生成的id
xml += '</Filter>'
xml += "</wfs:Delete>"
xml += " </wfs:Transaction>"