qgis2web, las ventanas emergentes con información se muestran para la capa inferior (no la capa superior)

Question

Tengo un mapa, la capa inferior (detrás) contiene los estados unidos (polígonos para cada estado); y la capa superior contiene las ubicaciones de mi estudio (capa de puntos).

Las capas se muestran correctamente, pero cuando paso el ratón por encima de uno de mis puntos de ubicación de estudio, la información aparece como "Montana", que es la información de mi capa "detrás" de los Estados Unidos y no de mi capa "arriba" de ubicaciones de estudio. (Véase la foto 1)

He cambiado el orden de mis capas (he colocado las ubicaciones de los campos detrás de los polígonos de EE.UU.). No puedo ver mis localizaciones de campo, porque están ocultas detrás de los polígonos, PERO ahora cuando paso el ratón por encima de las localizaciones de mi lugar de estudio (aunque no pueda verlas) aparece la información de mi lugar de estudio.

Parece que, aunque el mapa muestra las capas en el orden correcto, se accede a la información de la ventana emergente en orden inverso. Esto es cierto para qgis2web vista previa en el escritorio de QGIS y una vez que extraer los archivos y ver mi Index.html en un navegador web.

He añadido un duplicado de mi capa de sitios de estudio, detrás de la capa de Estados Unidos (pero esto es un feo arreglo y la "copia de Sitios de Estudio" capa aparece en el conmutador de capas, lo que confundirá al usuario) (Por favor, vea la foto 2)

¿Puede alguien ayudarme a entender la conexión entre el orden de las capas que creo que se determina en el layers.js:

var layersList = [lyr_USA1,lyr_MajorUSCities2,lyr_MT3,lyr_MTRoads4,lyr_MTCities5,lyr_StudySites6];   

--> ¿La capa USA ya tiene 1 adjunta?

y el código qgis2web.js

map.forEachFeatureAtPixel(pixel, function(feature, layer)

¿Cómo puedo ordenar las capas de forma diferente (una layersList para mostrar las capas y la layersList inversa para extraer la información emergente hover)?

Answer 1

Después de depurar durante varias horas (por falta de práctica y todo eso), encontré una solución sencilla:

La cuestión es que map.forEachFeatureAtPixel lee las características en el siguiente orden: de la más alta a la más baja. Al ser la última en leerse, sobrescribe la tabla popupText con su información.

Mi solución fue añadir un contador y sólo rellenar el popupText si contador = 1 (sólo obtener información de la primera característica leída, que es la característica superior).

(solución alternativa es declarar el popupText = '<table>' fuera del map.forEachFeatureAtPixel en cuyo caso la tabla se rellenará con información de varias funciones)

var counter = 1;

map.forEachFeatureAtPixel(pixel, function(feature, layer) {  // goes through features that are present as that pixel coordinate
    currentFeature = feature; 
    currentFeatureKeys = currentFeature.getKeys(); //currentFeatureKeys is an array with field names
    var doPopup = false;      

    //this loop checks if current feature contains at least one field that is not set to 'hidden'
    for (k in layer.get('fieldImages')) { 
        if (layer.get('fieldImages')[k] != "Hidden") {  
            doPopup = true;
        }
    } 

    if (counter == 1){
        if (doPopup) {
            popupText = '<table>';
            for (var i=0; i<currentFeatureKeys.length; i++) {
                if (currentFeatureKeys[i] != 'geometry') { 
                    popupField = '';
                    if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "inline label") {  //checks if label-type is a header or an inline (displayed on top or beside the value)
                        popupField += '<th>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</th><td>'; // 
                    } else {
                        popupField += '<td colspan="2">';
                    }
                    if (layer.get('fieldLabels')[currentFeatureKeys[i]] == "header label") {
                        popupField += '<strong>' + layer.get('fieldAliases')[currentFeatureKeys[i]] + ':</strong><br />'; //
                    }
                    if (layer.get('fieldImages')[currentFeatureKeys[i]] != "Photo") { // checks if the actual value is a string or a link to a photo
                        popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? Autolinker.link(String(currentFeature.get(currentFeatureKeys[i]))) + '</td>' : '');  // currentFeature.get(currentFeatureKeys[i])) this is the actual value at that pixel for that field
                    } else {
                        popupField += (currentFeature.get(currentFeatureKeys[i]) != null ? '<img src="images/' + currentFeature.get(currentFeatureKeys[i]).replace(/[\\\/:]/g, '_').trim()  + '" /></td>' : '');
                    }
                    popupText = popupText + '<tr>' + popupField + '</tr>'; //popupField gets appended to the popupText table
                }
            }
            popupText = popupText + '</table>';
        }
    }
    counter++;

});

Answer 2

Parece que has encontrado un error en qgis2web. Hasta que se solucione, en QGIS, para su capa de estados de fondo, intente establecer el widget de edición de cada campo en Oculto. Eso debería evitar cualquier ventana emergente para esa capa, lo que debería significar que se obtiene la información correcta al pasar el ratón por encima.