我遇到了一个在互联网上找不到的问题。或者至少不是我的意思。
在我的代码部分,我制作了一个带有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:" + ' ' + feature.get('Name') + '</h2>';
/* contentjson += "<img src='img/bottleneckpictures/"+imagebottleneckbefore+"' style='width:260px; height:130px;'>";*/
contentjson += ' '
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;
}
});
图层没有单击事件。