polyline polygone

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.

Leaflet JS

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).

code (polyline)

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é!).

polyline

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.

polyline avec style

et maintenant notre route s’affichera ainsi:

polyline avec style

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:

code (polygone simple)
On a pris le même tableau de points et automatiquement le premier point se joint au dernier pour former une surface.

polygone simple

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):

code (polygone avec anneau intérieur)

Votre surface sera affichée sous cette forme:

polygone avec anneau intérieur

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.

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here