javascript - forEachFeatureAtPixel 在不同的特征上表现不同

Question

单击地图上的要素时，我正在尝试添加叠加层。这工作得很好。如果有几个功能，我希望有一个显示图片日期的表格，并使不同的日期可单击以显示图像。

问题来了：我有 2 个图层添加了不同的图像/图标，但通常相同的代码正在为图层创建所有信息。当我单击第一层的图标时，一切都像预期的那样工作得很好。但是，单击第二层上的重叠图标仅显示一个日期，因此仅显示一个图像。要查看我的问题，您可以访问：https ://forestwatch.lup-umwelt.de/app_development/，打开左侧的地图层，将“Fotos”和“Drohnenbilder”添加到地图中。您将在右侧看到一堆相机符号，其行为与预期一样：无需缩放，单击堆栈将为您提供一堆日期。单击中间的无人机图像将打开覆盖，显示必须单击的单个日期（如果只有一个图像，则不应发生这种情况）。所以 - 没有自动打开，也没有带图像的表格。

这是我用于检测功能的代码：

var overlay = new ol.Overlay({
    element: document.getElementById('overlay'),
    positioning: 'bottom-left'
    });

var displayImage = function(pixel) {
    var features = [];
    map.forEachFeatureAtPixel(pixel, function(feature){
        features.push(feature);
    },{hitTolerance: 0});
    if (features.length === 1){
        var imag = features[0].values_.pointAttributes.Image;
        var date = features[0].values_.pointAttributes.Datum;
        overlay.setPosition(features[0].values_.geometry.flatCoordinates); 
        var innerHTML = "<img ID=\"theImage\" src= " + imag + "><table id=\"fototable\"><tr><td><button class=\"btn\" disabled>" +  date + "</button><td><tr></table>";
        var element = overlay.getElement();
            element.innerHTML = innerHTML;
        map.addOverlay(overlay);
    }else if (features.length > 1) {
        var imag = [];
        var date = [];
        for (var i = 0, ii = features.length; i < ii; ++i) {
            imag.push(features[i].values_.pointAttributes.Image);
            date.push(features[i].values_.pointAttributes.Datum);
            overlay.setPosition(features[i].values_.geometry.flatCoordinates); 
            let innerHTMLStart = "<img ID=\"theImage\" src= \"\"><table id=\"fototable\">";
            let innerHTMLEnd = "</table>";
            let innerHTML = innerHTMLStart;
            let lastIndex = imag.length - 1;

            //loop over our items
            for(var i = 0; i < date.length; i++) {
                //first iteration
                if(i % 3 === 0 && i === 0) {
                innerHTML = innerHTML + "<tr>";
                //modulo 3 but not first iteration
                } else if(i % 3 === 0 && i > 0) {
                innerHTML = innerHTML + "</tr><tr>";
                }

                 //add cells to the table
                innerHTML = innerHTML + "<td><button class=\"btn\" data-img=" + imag[i] + " onclick=\"showImage(this);\">" +  date[i] + "</button></td>";
                if(i === lastIndex) {

                //last iteration? how many <td>?
                //always finish with 3 cells
                if((i+1) % 3 === 0) {
                    innerHTML = innerHTML + "</tr>";
                } else if((i+1) % 2 === 0) {
                innerHTML = innerHTML + "<td></td></tr>";
                } else {
                innerHTML = innerHTML + "<td></td></tr>";
                }
                }
                }

                innerHTML = innerHTML + innerHTMLEnd;

            var element = overlay.getElement();
            element.innerHTML=innerHTML        
            ;
            map.addOverlay(overlay);
            }
    } else{
        var element = overlay.getElement();
        element.innerHTML = null;
        overlay.setPosition(undefined);

        
    } 
};


map.on('click', function(event) {
    var pixel = event.pixel;
    displayImage(pixel);
    });

这是创建层的代码（两个变量名相同的代码）：

var FotoSource = new ol.source.Vector();

$.getJSON('config/Fotos.json', function (data) {
  $.each(data, function(key, val){
     var newMarker = new ol.Feature({
        geometry: new ol.geom.Point([this.Longitude,this.Latitude]),
            pointAttributes: {'Datum': this.Datum, 'Image':this.Name}
       
        });
    
        FotoSource.addFeature(newMarker);
        });
    });


var FotoStyle = new ol.style.Style({
  image: new ol.style.Icon({
    src: 'images/camera2.png',
    class: "Fotoicon"
})
});

我将它们添加为新的 ol.layer.Vector，并以 Fotosource 作为源。

标签： javascriptjqueryopenlayers