Leaflet: GeoJson pointerEvents = 'none' irgendwelche Effekte

Erstellt am 3. Feb. 2017  ·  4Kommentare  ·  Quelle: Leaflet/Leaflet

  • [X] Ich melde einen Fehler und bitte nicht um Hilfe
  • [X] Ich habe mir die Dokumentation angesehen, um sicherzustellen, dass das Verhalten dokumentiert und erwartet ist
  • [X] Ich bin mir sicher, dass dies ein Problem mit dem Leaflet-Code ist, kein Problem mit meinem eigenen Code oder mit dem Framework, das ich verwende (Cordova, Ionic, Angular, React…)
  • [X] Ich habe die Probleme durchsucht, um sicherzustellen, dass sie noch nicht gemeldet wurden

Wie reproduzieren

  • Broschürenversion, die ich verwende: 1.0.3
  • Browser (mit Version), den ich verwende: Chrome 55
  • Betriebssystem/Plattform (mit Version) Ich verwende: Windows

Welches Verhalten ich erwarte und welches Verhalten ich sehe

Ich muss zwei GeoJson-Overlays anzeigen: eines, das mit dem Benutzer interagieren kann (Klick, Mouseover) und das zweite ohne Interaktion, nur um visuelle Informationen anzuzeigen.
Die erste Schicht liegt unter der zweiten und es muss nur der Strich gezeichnet werden.

Ich habe "pointerEvents" für den Stil der zweiten Ebene auf none festgelegt, aber LeafLet verwendet diese Eigenschaft nicht: Das generierte SVG hat diese Eigenschaft nicht.

Minimales Beispiel, das das Problem reproduziert

  • [X] Dieses Beispiel ist so einfach wie möglich
  • [ ] Dieses Beispiel stützt sich nicht auf Code von Drittanbietern
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);

Ich habe versucht, "clickable" auf "false" zu setzen, keine Änderung.

Entschuldigen Sie, wenn mein Englisch nicht ausreicht. Danke.

Verwenden Sie http://playground-leaflet.rhcloud.com/ oder eine andere jsfiddle-ähnliche Website.

Hilfreichster Kommentar

Ich habe es mit "in teractive:false " versucht, es funktioniert.
Es tut mir leid (um Gemeinschaft gebeten zu haben) und glücklich (weil es funktioniert).

Vielen Dank.

Alle 4 Kommentare

Ich habe "pointerEvents" für den Stil der zweiten Ebene auf none festgelegt, aber LeafLet verwendet diese Eigenschaft nicht

Nun, pointerEvents es ist keine anerkannte Option für L.Path , daher bin ich mir nicht sicher, was Sie erwartet haben.

Ich habe versucht, "clickable" auf "false" zu setzen, keine Änderung.

Diese Option wurde in 1.0.0 in interactive umbenannt, siehe „Von der interaktiven Ebene geerbte Optionen“ in der Dokumentation.

Vielen Dank für Ihre Antwort.

Für die "pointerEvents": Da ich die Ebene nicht für Benutzerinteraktionen "inaktiv" machen konnte, habe ich versucht, dem hier angegebenen Beispiel zu folgen: http://leafletjs.com/examples/map-panes/ für den Bereich und die auf die geoJson-Ebene angewendeten pointerEvents. Vielleicht habe ich diesen Begriff falsch verstanden.

Ich werde es mit der inaktiven Eigenschaft für den Geojson-Stil versuchen.

Mein Ziel ist es, einige kleine Länder (Polygone) als Cloropleth-Karte darzustellen. Unter dieser Ebene befindet sich die Kachelebene und oben eine weitere Geojson-Ebene, die größere Länder anzeigt, wobei jede Ebene ein "Container" für kleine Länder ist. Ich möchte, dass diese Überlagerung nur den Polygonstrich mit vollständiger Transparenz für das Innere anzeigt. Ich möchte, dass das Overlay "kleine Länder" mit dem Benutzer interagiert und das Layer "größere Länder" nicht.

Vielen Dank

Ich habe es mit "in teractive:false " versucht, es funktioniert.
Es tut mir leid (um Gemeinschaft gebeten zu haben) und glücklich (weil es funktioniert).

Vielen Dank.

Ich habe die gleiche Aufgabe, zwei Ebenen zu rendern, und die oberste Ebene sollte inaktiv sein. "in teractive:false " hat geholfen, danke!

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen