Vue+Openlayers+forEachFeatureAtPixels实现鼠标单击时获取feature

场景

Vue+Openlayer使用overlay实现弹窗弹出显示与关闭:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121268946

在上面的基础上，怎样实现鼠标单击时获取点击的feature对象并对其进行操作。

forEachFeatureAtPixel

 

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、监听地图点击事件

            let self = this;
           // 监听地图点击事件
            self.onShow = self.map.on("singleclick", (evt) => {
                self.mapDialog(evt);
            });

调用封装的方法并传递参数

2、方法实现中调用forEachFeatureAtPixel获取feature对象

        mapDialog(evt, isShow, fea) {
            let self = this;
            self.$nextTick(() => {
                if (!isShow) {
                    var feature = self.map.forEachFeatureAtPixel(evt.pixel, (feature) => {
                            return feature;
                        }
                    );
                }

3、然后就可以根据自己的需求去匹配feature的id

前提是在新增feature时需要设置其id

data.forEach((item, index) => {
                var feature = new Feature({
                    geometry: new Point(item.videoAdd),
                });
                feature.setId(`video_${item.id}`);

给其指定一个id

然后就可以根据id获取该feature的数据了

                        self.videoListData.forEach(async (e) => {
                            if (self.searchEmpId == 'video_'+ e.id) {

                            }
                        });