ΠΠ½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ Π΄Π²Π° ΠΎΠ²Π΅ΡΠ»Π΅Ρ GeoJson: ΠΎΠ΄ΠΈΠ½, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ΅Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ (ΡΠ΅Π»ΡΠΎΠΊ, Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΊΡΡΡΠΎΡΠ°), Π° Π²ΡΠΎΡΠΎΠΉ - Π±Π΅Π· Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΡ, ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΠ΅ΡΠ²ΡΠΉ ΡΠ»ΠΎΠΉ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ΄ Π²ΡΠΎΡΡΠΌ ΠΈ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ±Π²ΠΎΠ΄ΠΊΡ.
Π― ΡΠΊΠ°Π·Π°Π» Β«pointerEventsΒ» Π΄Π»Ρ ΡΡΠΈΠ»Ρ Π²ΡΠΎΡΠΎΠ³ΠΎ ΡΠ»ΠΎΡ, Π½ΠΎ LeafLet Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ: ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ svg Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΡΡΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
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.
Π― ΡΠΊΠ°Π·Π°Π» Π΄Π»Ρ Β«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 " ΠΏΠΎΠΌΠΎΠ³Π»ΠΎ, ΡΠΏΠ°ΡΠΈΠ±ΠΎ!
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π― ΠΏΡΠΎΠ±ΠΎΠ²Π°Π» Ρ Β«in teractive:false Β», ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ.
Π― ΠΈΠ·Π²ΠΈΠ½ΡΡΡΡ (Π·Π° ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π°) ΠΈ ΡΡΠ°ΡΡΠ»ΠΈΠ² (ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΡΡΠΎ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ).
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ.