Table Des Matières
Introduction:
Dans l’article précédent concernant Leaflet JS, on a vu comment ajouter des points à notre carte. Celui-ci sera dédié à l’ajout d’un polyligne ou un polygone à votre carte avec les différentes options qu’on peut leur attribuer. Si c’est la première fois que vous utiliser cette bibliothèque n’hésitez pas de consulter les articles précédents.
Ajouter un polyligne:
Les lignes sont un excellent moyen de fournir une indication d’un chemin ou d’une bordure. Leaflet fournit la fonction polyline (polyligne) pour faire ceci; voici le code complet pour afficher une carte simple avec un polyligne dessinée avec 4 points ;
See the Pen XgebKM by Med Mus (@MedMus) on CodePen.
Ici, on définit une route allant d’un point lat/long à un autre. On déclare un tableau de points et on l’ajoute comme paramètre à la fonction L.polyline.
Ensuite, on ajoute simplement cela à notre carte avec addTo (map).
Et voilà notre carte prête avec la route affichée (Ce n’est qu’un exemple et ne représente aucune relation avec la réalité!).
Ajouter des options à votre polyligne:
Il existe une panoplie d’options qui peut être attribuée à notre ligne et ces options sont ajoutées sous forme d’un tableau. Voici le même exemple mais avec une couleur changée en rouge, une largeur de ligne sur 10 pixels, une opacité définie sur 0.7 ( Sur une échelle de 0 (transparent) à 1 ( Opaque)), dessinée avec des tirets de 20 pixels suivis d’un espace de 15 pixels (dashArray) et avec des coins arrondis où les lignes se rejoignent.
et maintenant notre route s’affichera ainsi:
Ajouter un polygone:
De la même façon, on peut ajouter un polygone sauf qu’ici on utilise la fonction L.polygon comme indiqué dans l’exemple:
On a pris le même tableau de points et automatiquement le premier point se joint au dernier pour former une surface.
Cette fonction a la possibilité d’avoir un deuxième tableau qui sera considéré comme un vide à l’intérieur de la surface dessinée. Voyez l’exemple suivant pour bien comprendre (pour le style, procédez de la même manière que pour polyline):
Votre surface sera affichée sous cette forme:
Conclusion:
Vous avez vu dans cette article comment ajouter des lignes et des polygones à une carte LeafletJS et comment leur attribuer un style . Rendez-vous la prochaine fois avec d’autres intéressantes possibilités fournies par cette immense bibliothèque.
