如何在 OpenLayers 4 上添加点击事件?
How do I add a click event on OpenLayers 4?
我需要将事件侦听器附加到 OpenLayers 4 中的功能。
我试过 feature.on('click',function(){...}) 但它不起作用。
如何将 tan 事件添加到功能?
提前谢谢你。
没有为特征 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 来演示这一点。点击印度地图。
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
}
});
我需要将事件侦听器附加到 OpenLayers 4 中的功能。 我试过 feature.on('click',function(){...}) 但它不起作用。 如何将 tan 事件添加到功能? 提前谢谢你。
没有为特征 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 来演示这一点。点击印度地图。
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
}
});