wfs、wms图层获取当前点击位置的feature

---

需求

使用vue、openlayer加载浙江省范围内的5000个点，一开始使用mapbox的矢量切片mvt，但是数量一多就变得非常卡顿,影响使用，可能openlayer对这个支持并不好吧，于是决定在小比例尺下使用wms服务、大比例尺下使用wfs图层，然后需要在wfs或wms层点击并缩放到点击的feature范围，并弹出属性框展示feature属性

---

一、添加点击事件

首先添加openlayer的点击事件

 // 为图层增加点击事件，查看图层属性字段,不希望点击到的图层，可以在geoserver中将图层queryable去掉勾选
map.on('singleclick', (evt) => {
   //处理点击事件
}）

---

二、WMS图层

对于WMS图层使用getGetFeatureInfoUrl方法取得点击位置的Features

var viewResolution =  map.getView().getResolution()
var url = LayerWMS.getSource().getGetFeatureInfoUrl(
    evt.coordinate, viewResolution, 'EPSG:4326', { 'INFO_FORMAT': 'application/json'
})
if (url) {
    axios.get(url).then(res => res.data).then(data => {
       if (data.features.length > 0) {
       // 处理features     data.features[0]
       // 处理features属性  data.features[0].properties
       }
     })
}

---

三、WFS图层

对于WFS图层使用forEachFeatureAtPixel方法取得点击位置的Features

// 定义状态值，只取一个feature
let hasSelected = 0

map.forEachFeatureAtPixel(evt.pixel, (feature, layer) => {
	
	//这个匿名函数对于每个符合条件的featture都会执行一遍
	if (hasSelected > 0) {
        return false
    }
    // 处理features    feature
    // 处理feature属性  feature.getProperties()

    hasSelected++
    },
    {
        hitTolerance: 5, // 点击面不需要缓冲区，点或线等不容易被点中的可以加缓冲区帮助点中
        layerFilter: function f(obj) {
            const layername = obj.get('name')
            return layername !== undefined && layername === 'LayerWFS' // 根据图层名过滤
        }
    }
)