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) {

                            }
                        });