Leaflet: GeoJson pointerEvents = 'none' aucun effet

Créé le 3 févr. 2017  ·  4Commentaires  ·  Source: Leaflet/Leaflet

  • [X] Je signale un bug, je ne demande pas d'aide
  • [X] J'ai consulté la documentation pour m'assurer que le comportement est documenté et attendu
  • [X] Je suis sûr que c'est un problème de code Leaflet, pas un problème avec mon propre code ni avec le framework que j'utilise (Cordova, Ionic, Angular, React…)
  • [X] J'ai parcouru les problèmes pour m'assurer qu'ils n'ont pas encore été signalés

Comment reproduire

  • Version de la notice que j'utilise : 1.0.3
  • Navigateur (avec version) que j'utilise : Chrome 55
  • Système d'exploitation/plate-forme (avec version) que j'utilise : Windows

Quel comportement j'attends et quel comportement je vois

Je dois afficher deux superpositions GeoJson : une qui peut interagir avec l'utilisateur (clic, survol de la souris) et la seconde sans interaction, juste pour afficher des informations visuelles.
La première couche est sous la seconde et seul le trait doit être dessiné.

J'ai spécifié "pointerEvents" à none pour le second style de calque, mais LeafLet n'utilise pas cette propriété : le svg généré est sans cette propriété.

Exemple minimal reproduisant le problème

  • [X] cet exemple est le plus simple possible
  • [ ] cet exemple ne repose sur aucun code tiers
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);

J'ai essayé de mettre "cliquable" à "faux", aucun changement.

Excusez-moi si mon anglais n'est pas suffisant. Merci.

En utilisant http://playground-leaflet.rhcloud.com/ ou tout autre site similaire à jsfiddle.

Commentaire le plus utile

J'ai essayé avec " interactive:false ", ça marche.
Je suis désolé (d'avoir sollicité la communauté) et content (car ça marche).

THX.

Tous les 4 commentaires

J'ai spécifié "pointerEvents" sur aucun pour le deuxième style de calque, mais LeafLet n'utilise pas cette propriété

Eh bien, pointerEvents ce n'est pas une option reconnue pour L.Path , donc je ne sais pas à quoi vous vous attendiez.

J'ai essayé de mettre "cliquable" à "faux", aucun changement.

Cette option a changé son nom en interactive dans la version 1.0.0, voir "Options héritées de la couche interactive" dans la documentation.

Merci pour votre réponse.

Pour les "pointerEvents" : comme je n'étais pas activé pour rendre la couche "inactive" pour les interactions utilisateur, j'ai essayé de suivre l'exemple donné ici : http://leafletjs.com/examples/map-panes/ pour le volet et les pointerEvents appliqués à la couche geoJson. Peut-être que j'ai mal compris cette notion.

Je vais essayer avec la propriété inactive pour le style geojson.

Mon objectif est d'afficher certains petits pays (polygones) sous forme de carte cloroplèthe. Sous cette couche la couche de tuiles, et en haut une autre couche geojson affichant les plus grands pays, chacun étant un "container" pour les petits pays. Je veux que cette superposition affiche uniquement le trait du polygone avec une transparence totale pour l'intérieur. Je veux que la couche "petits pays" interagisse avec l'utilisateur et pas la couche "grands pays".

THX

J'ai essayé avec " interactive:false ", ça marche.
Je suis désolé (d'avoir sollicité la communauté) et content (car ça marche).

THX.

J'ai la même tâche pour rendre deux calques et le calque supérieur doit être inactif. "in teractive:false " a aidé, merci !

Cette page vous a été utile?
0 / 5 - 0 notes