Folleto: capas superpuestas mutuamente excluyentes: El evento "overlayadd" se dispara dos veces

Question

LeafletJS. Estoy intentando que dos capas superpuestas sean mutuamente excluyentes. Ejemplo completo aquí en jsfiddle

Supongo que todo se reduce a este trozo de código:

        map.on('overlayadd', function(event)
        {
            console.log( "Clicked on " + event.name )
            if ( event.name == "layer1" && map.hasLayer(layer2) ) {
                console.log("remove layer2")
                map.removeLayer(layer2)
            }
            if ( event.name == "layer2" && map.hasLayer(layer1) ) {
                console.log("remove layer1")
                map.removeLayer(layer1)
            }
            ccontrol._update();
        });

Si selecciono sólo la capa 2 y luego selecciono la capa 1, funciona bien (la capa 1 se selecciona y se muestra en el mapa y la capa 2 se desactiva). La consola muestra que la secuencia de eventos es:

• Pulsado en la capa2
• Pulsado en la capa1
• eliminar la capa2

Pero si selecciono primero la capa 1 y luego intento seleccionar la capa 2 no parece ocurrir nada. La consola muestra que la secuencia de eventos es:

• Se ha hecho clic en la capa 1 < he hecho clic manualmente en esto
• Se ha hecho clic en la capa 2 < he hecho clic manualmente en esto
• eliminar la capa1
• Hice clic en la capa 1 < Esto sucedió automáticamente
• eliminar la capa2

¿Puede alguien arrojar algo de luz sobre esto?

Answer 1

El problema viene de su uso del método de control de la capa interna ._update() . Nunca es prudente utilizar los internos, ya que no se sabe exactamente cómo/cuándo deben utilizarse y cuáles son las consecuencias.

Se utiliza para refrescar el control del conmutador de capas, ya que no quiere refrescarse si se añaden/eliminan capas dentro de overlayadd función de procesamiento de eventos. La solución para esto es añadir/eliminar la capa async con la ayuda de setTimeout función.

Su código podría entonces ser algo así:

function removeWithTimeout(layer) {
  setTimeout(function() {
    map.removeLayer(layer);
  }, 10);
}

map.on('overlayadd', function(event)
{
  console.log( "Clicked on " + event.name )
  if ( event.name == "layer1" && map.hasLayer(layer2) ) {
    console.log("remove layer2");
    removeWithTimeout(layer2);
  }
  if ( event.name == "layer2" && map.hasLayer(layer1) ) {
    console.log("remove layer1");
    removeWithTimeout(layer1);
  }
});