Suite

Ajout de propriétés aux fenêtres contextuelles dans les cartes de dépliants


J'ai une carte dépliante qui affiche des pop-ups qui donnent le nom d'un pays lorsqu'on clique dessus. Comment puis-je ajouter des propriétés supplémentaires et les afficher toutes, comme sur cette carte http://lotrproject.com/map.

Par exemple, comment puis-je faire en sorte que ma fonctionnalité contextuelle Islande affiche les propriétés de "nom" et de "langue", plutôt que simplement "nom".

var pays = [ { type : "Fonctionnalité", propriétés : { nom : "Islande", langue : "Islandais"}, géométrie : { type : "Point", coordonnées : [2535 911] } }, { type : " Entité", propriétés : { nom : "Ireland" }, géométrie : { type : "Point", coordonnées : [1324, 1580] } }, { type : « entité », propriétés : { nom : "England" }, géométrie : { type : "Point", coordonnées : [1498, 1662] } }, { type : "Feature", propriétés : { nom : "France" }, géométrie : { type : "Point", coordonnées : [1608, 1918 ] } }, { type : "Fonctionnalité", propriétés : { nom : "Italia" }, géométrie : { type : "Point", coordonnées : [1923, 2093] } }, { type : "Fonctionnalité", propriétés : { nom : "Hispania" }, géométrie : { type : "Point", coordonnées : [1374, 2148] } }, ] ; var layerCountries = L.geoJson(countries, { // mappe correctement les coordonnées geojson sur l'image coordsToLatLng: function(coords) { return rc.unproject(coords); }, // ajoute un contenu contextuel au marqueur onEachFeature: function ( feature, layer) { if (feature.properties && feature.properties.name) { layer.bindPopup(feature.properties.name); } }, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, { radius : 8, fillColor : "#800080", couleur : "#D107D1", poids : 1, opacité : 1, fillOpacity : 0.8 }); } });

Dans une fenêtre contextuelle Leaflet, vous pouvez simplement écrire du HTML simple avec tout ce que vous voulez. Alors au lieu d'écrire

layer.bindPopup(feature.properties.name);

tu pourrais simplement écrire

layer.bindPopup('

'+fonction.propriétés.nom+'

Langue : '+feature.properties.language+'

');

Si vous souhaitez afficher automatiquement toutes les propriétés sous forme de tableau dans la fenêtre contextuelle, vous pouvez créer votre code HTML de manière dynamique, par exemple :

var popupContent = ''; for (var p dans feature.properties) { popupContent += ''; } popupContenu += '
' + p + ''+ feature.properties[p] + '
'; layer.bindPopup(popupContent);

bindPopup prend html comme argument, vous pouvez donc le formater avec autant de propriétés que vous le souhaitez, en utilisant du texte, des variables JavaScript et du html ensemble :

layer.bindPopup('Nom : ' + feature.properties.name + '
' + 'Langue : ' + feature.properties.language);

Cet exemple tiré de la documentation Leaflet peut vous aider :

L.marker([51.5, -0.09]).addTo(map) .bindPopup("Bonjour le monde!
Je suis un popup.");

bindPopup fonctionne de la même manière pour les marqueurs et les couches geojson


Voir la vidéo: Tutoriel Ms Publisher. Création dépliant 3 volets recto-verso 13 (Octobre 2021).