单个JSON层的.on('click')事件,如何?



我遇到了一个在互联网上找不到的问题。或者至少不是我的意思。

在我的代码部分,我制作了一个带有map.on('click'(事件的弹出窗口,但我希望该事件只能在一个层中发生,并且只有当该层处于活动状态时。正如你在我的代码中看到的,我还希望我的侧边栏在点击图层时打开一个选项卡,但现在当你点击地图时,侧边栏仍然会打开。我希望侧边栏对其作出反应的层被称为:";装瓶工人";下一个代码是我目前的代码,底部的代码显示了我也尝试过但没有成功的代码。

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

var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {

return feature;

});

document.getElementById("sidebar").classList.toggle("collapsed");
document.getElementById("pop-up-message").classList.toggle("active");


if (feature) {
var geometry = feature.getGeometry();
var coord = geometry.getCoordinates();
var imagebottleneckbefore = feature.get('Image_before');
var imagebottleneckafter = feature.get('Image_after');



/* if (imagebottleneckbefore === null)
{imagebottleneckbefore = "hidden"};*/

if (imagebottleneckafter === null)
{imagebottleneckafter =  "otterplaceholde.jpg"};

if (imagebottleneckafter === "nopic")
{imagebottleneckafter =  "otterplaceholde.jpg"};

if (feature.get('Description') === null)
{return "Er is geen beschrijving bij dit knelpunt."};


var contentjson = '<h2 >' + "Knelpunt:" + '&nbsp;' + feature.get('Name') + '</h2>';
/* contentjson += "<img src='img/bottleneckpictures/"+imagebottleneckbefore+"' style='width:260px; height:130px;'>";*/
contentjson += '&nbsp'
contentjson += "<img src='img/bottleneckpictures/"+imagebottleneckafter+"' style='width:260px; height:130px;'>";
contentjson += '<p class="lorem" >' +  feature.get('Description') + '</p>';
// contentjson += '<h3>' + feature.get('Descriptionholder') + '</h3>';
content_elementjson.innerHTML = contentjson;

}


});

这是代码中也不起作用的部分:

bottlenecklayer.on('click',function(evt){ 
document.getElementById("sidebar").classList.toggle("collapsed");
document.getElementById("pop-up-message").classList.toggle("active")
});

您需要在forEachFeatureAtPixel请求中指定一个layerFilter函数:

var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature) {

return feature;

}, {
layerFilter: function(layer) {
return layer === bottlenecklayer;
}
});

图层没有单击事件。

相关内容

  • 没有找到相关文章

最新更新