Leaflet: GeoJson pointerEvents = 'none' Π½ΠΈΠΊΠ°ΠΊΠΈΡ… эффСктов

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 3 Ρ„Π΅Π²Ρ€. 2017  Β·  4ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: Leaflet/Leaflet

  • [X] Π― ΡΠΎΠΎΠ±Ρ‰Π°ΡŽ ΠΎΠ± ошибкС, Π° Π½Π΅ ΠΏΡ€ΠΎΡˆΡƒ ΠΏΠΎΠΌΠΎΡ‰ΠΈ
  • [X] Π― просмотрСл Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π·Π°Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ ΠΈ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎ
  • [X] Π― ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ это ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с ΠΊΠΎΠ΄ΠΎΠΌ Leaflet, Π° Π½Π΅ с ΠΌΠΎΠΈΠΌ собствСнным ΠΊΠΎΠ΄ΠΎΠΌ ΠΈΠ»ΠΈ с ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠΉ ΠΌΠ½ΠΎΠΉ структурой (Cordova, Ionic, Angular, React…)
  • [X] Π― просмотрСл ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎ Π½ΠΈΡ… Π΅Ρ‰Π΅ Π½Π΅ ΡΠΎΠΎΠ±Ρ‰Π°Π»ΠΎΡΡŒ.

Как воспроизвСсти

  • ВСрсия листовки, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ: 1.0.3
  • Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ (с вСрсиСй), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ: Chrome 55
  • ОБ/ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° (с вСрсиСй), ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ: Windows

КакоС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ я оТидаю ΠΈ ΠΊΠ°ΠΊΠΎΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π²ΠΈΠΆΡƒ

МнС Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π΄Π²Π° овСрлСя GeoJson: ΠΎΠ΄ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ (Ρ‰Π΅Π»Ρ‡ΠΎΠΊ, Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ курсора), Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ - Π±Π΅Π· взаимодСйствия, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для отобраТСния Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.
ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ слой находится ΠΏΠΎΠ΄ Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ ΠΈ Π½ΡƒΠΆΠ½ΠΎ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ.

Π― ΡƒΠΊΠ°Π·Π°Π» Β«pointerEventsΒ» для стиля Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ слоя, Π½ΠΎ LeafLet Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ это свойство: сгСнСрированный svg Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ этого свойства.

ΠœΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, воспроизводящий ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ

  • [X] этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€ максимально прост
  • [ ] этот ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ сторонний ΠΊΠΎΠ΄
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);

Π― попытался ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Β«ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉΒ» Π½Π° Β«Π»ΠΎΠΆΠ½Ρ‹ΠΉΒ», Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.

Π˜Π·Π²ΠΈΠ½ΠΈΡ‚Π΅, Ссли ΠΌΠΎΠΉ английский Π½Π΅ достаточно ΠΏΡ€Π°Π². Бпасибо.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ http://playground-leaflet.rhcloud.com/ ΠΈΠ»ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ сайт, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ jsfiddle.

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π― ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» с Β«in teractive:false Β», это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.
Π― извиняюсь (Π·Π° Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ сообщСства) ΠΈ счастлив (ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚).

Бпасибо.

ВсС 4 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π― ΡƒΠΊΠ°Π·Π°Π» для Β«pointerEventsΒ» Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ none для стиля Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ слоя, Π½ΠΎ LeafLet Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ это свойство.

Π§Ρ‚ΠΎ ΠΆ, pointerEvents это Π½Π΅ΠΏΡ€ΠΈΠ·Π½Π°Π½Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ для L.Path , поэтому я Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Π΅Π³ΠΎ Π²Ρ‹ ΠΎΠΆΠΈΠ΄Π°Π»ΠΈ.

Π― попытался ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Β«ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉΒ» Π½Π° Β«Π»ΠΎΠΆΠ½Ρ‹ΠΉΒ», Π±Π΅Π· ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ.

Π­Ρ‚Π° опция ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»Π° имя Π½Π° interactive Π² 1.0.0, см. Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, унаслСдованныС ΠΎΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ слоя» Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ.

Бпасибо Π·Π° ваш ΠΎΡ‚Π²Π΅Ρ‚.

Для Β«pointerEventsΒ»: ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΠ½Π΅ Π½Π΅ ΡƒΠ΄Π°Π»ΠΎΡΡŒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ слой Β«Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΒ» для взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, я попытался ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌΡƒ здСсь ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ: http://leafletjs.com/examples/map-panes/ для ΠΏΠ°Π½Π΅Π»ΠΈ ΠΈ pointerEvents, ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹Π΅ ΠΊ слою geoJson. ΠœΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, я Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ понял это понятиС.

Π― ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΡŽ с Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌ свойством для стиля geojson.

Моя Ρ†Π΅Π»ΡŒ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ нСсколько Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… стран (ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½ΠΎΠ²) Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹. Под этим слоСм слой ΠΏΠ»ΠΈΡ‚ΠΊΠΈ, Π° свСрху Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ слой geojson, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠΉ Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ страны, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… являСтся Β«ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠΌΒ» для Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… стран. Π― Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡƒ ΠΌΠ½ΠΎΠ³ΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° с ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ для Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ части. Π― Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ²Π΅Ρ€Π»Π΅ΠΉ «малСнькиС страны» взаимодСйствовал с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, Π° слой Β«ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… стран» β€” Π½Π΅Ρ‚.

Бпасибо

Π― ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π» с Β«in teractive:false Β», это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚.
Π― извиняюсь (Π·Π° Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ сообщСства) ΠΈ счастлив (ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚).

Бпасибо.

Π£ мСня такая ΠΆΠ΅ Π·Π°Π΄Π°Ρ‡Π° Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ΡŒ Π΄Π²Π° слоя ΠΈ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ слой Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π½Π΅Π°ΠΊΡ‚ΠΈΠ²Π΅Π½. "in teractive:false " ΠΏΠΎΠΌΠΎΠ³Π»ΠΎ, спасибо!

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ