Leaflet: GeoJson pointerEvents = 'ninguno' ningún efecto

Creado en 3 feb. 2017  ·  4Comentarios  ·  Fuente: Leaflet/Leaflet

  • [X] Estoy reportando un error, no pido ayuda
  • [X] Revisé la documentación para asegurarme de que el comportamiento esté documentado y esperado
  • [X] Estoy seguro de que se trata de un problema con el código del folleto, no con mi propio código ni con el marco que estoy usando (Cordova, Ionic, Angular, React...)
  • [X] He buscado en los problemas para asegurarme de que aún no se haya informado.

como reproducir

  • Versión del folleto que estoy usando: 1.0.3
  • Navegador (con versión) que estoy usando: Chrome 55
  • Sistema operativo/plataforma (con versión) que estoy usando: Windows

Qué comportamiento estoy esperando y qué comportamiento estoy viendo

Tengo que mostrar dos superposiciones de GeoJson: una que puede interactuar con el usuario (hacer clic, pasar el mouse) y la segunda sin interacción, solo para mostrar información visual.
La primera capa está debajo de la segunda y solo se debe dibujar el trazo.

He especificado "pointerEvents" en ninguno para el estilo de la segunda capa, pero LeafLet no usa esta propiedad: el svg generado no tiene esta propiedad.

Ejemplo mínimo que reproduce el problema

  • [X] este ejemplo es lo más simple posible
  • [ ] este ejemplo no se basa en ningún código de terceros
var interactiveLayer = L.topoJson(epci2014TopoJson, {
        style: function (feature) {
            return {
                weight: 0.0,
                fillOpacity: 0.7,
                color: 'rgb(200,200,200)',
                fillColor: getColor(feature.properties.siren_epci || feature.properties.SIREN_EPCI)
            }
        },
        onEachFeature: function (feature, layer) {
            layer.on({
                mouseover: highlightFeature,
                mouseout: resetHighlight,
                click: zoomToFeature
            });

        }
    }).addTo(map);

    var justForDrawLayer=L.geoJson(departementsGeoJson, {
        style: function (feature) {
            return {
                pointerEvents : 'none',
                clickable:false,
                weight: 3,
                fillOpacity: 0.0,
                color: 'rgb(220,220,220)'
            }
        }
    }).addTo(map);

He intentado poner "se puede hacer clic" en "falso", sin cambios.

Disculpe si mi inglés no es suficiente, ¿verdad? Gracias.

Usando http://playground-leaflet.rhcloud.com/ o cualquier otro sitio similar a jsfiddle.

Comentario más útil

Lo he intentado con " interactive:false ", funciona.
Lo siento (haber solicitado comunidad) y feliz (porque funciona).

Gracias.

Todos 4 comentarios

He especificado "pointerEvents" en ninguno para el estilo de la segunda capa, pero LeafLet no usa esta propiedad

Bueno, pointerEvents no es una opción reconocida para L.Path , así que no estoy seguro de qué esperabas.

He intentado poner "se puede hacer clic" en "falso", sin cambios.

Esa opción cambió de nombre a interactive en 1.0.0, consulte "Opciones heredadas de la capa interactiva" en la documentación.

Gracias por su respuesta.

Para los "pointerEvents": como no estaba habilitado para hacer que la capa estuviera "inactiva" para las interacciones del usuario, intenté seguir el ejemplo que se da aquí: http://leafletjs.com/examples/map-panes/ para el panel y los pointerEvents aplicados a la capa geoJson. Tal vez entendí mal esta noción.

Probaré con la propiedad inactiva para el estilo geojson.

Mi objetivo es mostrar algunos países pequeños (polígonos) como un mapa de cloropletas. Debajo de esta capa, la capa de mosaicos, y en la parte superior, otra capa geojson que muestra países más grandes, cada uno es un "contenedor" para países pequeños. Quiero que esta superposición muestre solo el trazo del polígono con total transparencia para el interior. Quiero que la superposición de "países pequeños" interactúe con el usuario y la capa de "países más grandes" no.

Gracias

Lo he intentado con " interactive:false ", funciona.
Lo siento (haber solicitado comunidad) y feliz (porque funciona).

Gracias.

Tengo la misma tarea para renderizar dos capas y la capa superior debería estar inactiva. " interactive:false " ayudó, ¡gracias!

¿Fue útil esta página
0 / 5 - 0 calificaciones