如何在 OpenLayers 4 上添加点击事件？答案

【问题标题】：How do I add a click event on OpenLayers 4?如何在 OpenLayers 4 上添加点击事件？
【发布时间】：2017-03-24 16:25:31
【问题描述】：

我需要将事件侦听器附加到 OpenLayers 4 中的功能。我已经尝试过 feature.on('click',function(){...}) 但它不起作用。如何将棕褐色事件添加到功能？提前谢谢你。

【问题讨论】：

标签： gis openlayers

【解决方案1】：

没有为功能ol.Feature 对象注册click 事件。但是click 事件存在于ol.Map。使用forEachFeatureAtPixel 方法获取一个像素的所有特征，并将其与您要为其添加侦听器的特征进行比较。

相关代码：

var featureListener = function ( event ) {
    console.log("featureListenerCalled");
    alert("Feature Listener Called");
};

map.on('click', function(event) {

    map.forEachFeatureAtPixel(event.pixel, function(feature,layer) {
        if ( feature.getId() == "IND" ) {
                feature.setStyle(listenerStyle);
                featureListener(event);
        }
    });
});

我创建了这个 pluckr link 来证明这一点。点击印度地图。

【讨论】：

【解决方案2】：

var iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([lon, lat])),
  adres: adres
  //population: 4000,
  //rainfall: 500
});

// iconFeatureA is an array that gets all features on mouse click pixel location

map.on('click', function(e) {
  var iconFeatureA = map.getFeaturesAtPixel(e.pixel);
  if (iconFeatureA !== null) {
    var adres = iconFeatureA[0].get("adres");
    alert(adres);
    e.preventDefault(); // avoid bubbling 
  }
});

【讨论】：