Suite

Redimensionner les divIcons (svg) aux niveaux de zoom - Leaflet


J'ajoute un geoJSON à une carte à l'aide d'un divIcon personnalisé (à partir de svg) pour les marqueurs de points avec Leaflet. Le divIcon doit être redimensionné à différents niveaux de zoom. Actuellement, je peux voir les icônes et la fenêtre contextuelle fonctionner, mais elles ne se redimensionnent pas (et en fait, elles ne sont pas ancrées correctement non plus). J'ai essayé de réinitialiser la propriété iconSize sur un événement de zoom, mais cela ne fonctionne pas ; l'événement de zoom est touché mais l'icône ne change pas. J'ai également essayé d'ajouter plusieurs icônes à chaque entité (points) dans le geoJSON en utilisant la fonction 'pointToLayer' comme décrit dans les documents Leaflet, pensant que je pouvais basculer l'opacité à différents niveaux de zoom, mais cela ne fonctionne pas non plus (un seul l'icône est ajoutée). Comment puis-je utiliser des divIcons qui se redimensionnent ?

quelques extraits de code :

geoJSONLayer = L.geoJson(newFeatures, { //onEachFeature: onEachFeature, pointToLayer: function (feature, latLng) { return new L.Marker(latLng, { icon: aDivIcon, clickable:false, opacity:1 }).bindPopup(popupContent , popupOptions), nouveau L.Marker(latLng, { icon: aDivIcon2, clickable:false, opacity:0 }).bindPopup(popupContent, popupOptions); /// cela ne fonctionne pas } }).addTo(map); var aDivIcon = L.divIcon({"iconSize": [12,12], "iconAnchor": Anchorvar, "popupAnchor": Popupvar, html: ''});

(exemple d'événement)

map.on('zoomend', function(e) { if (map.getZoom() === 15) { iconSize = [12,12]; Anchorvar = [12,12] ; Popupvar = [ 0, -12] ; }… }

Vous devrez peut-être changer les div eux-mêmes.

Quelque chose comme

map.on('zoomend', function(e) { if (map.getZoom() === 15) { var elements = document.getElementsByClassName( 'icon-wrapper' ); for (var i=0, max=elements .length; i < max; i++) { elements[i].style.width = 8; elements[i].style.height = 10; elements[i].style.marginLeft = 4; elements[i].style. margeTop = 11 ; } }… }


Voir la vidéo: How To Enlarge Icons On Android - The Blind Life (Octobre 2021).