Solutions des exercices sur le Webmapping

3.4. Création de tuiles

Exercice 1

Q: A quel niveau de zoom voit-on apparaître la ville de Sète ?

R: Z=9

Q: A quel niveau de zoom voit-on apparaître la gare de Sète ?

R: Z=16

Q: Au niveau de zoom Z=17, quelles sont les coordonnées "Google" de la tuile du Buffet de la Gare de Sète (avec le logo rouge du bar) ?

R: Google (X=66881, Y=47956) et TMS (X=66881, Y=83115)

Q: Avec Firefox, utilisez le modèle d'URL https://tile.openstreetmap.org/${z}/${x}/${y}.png pour ouvrir et télécharger sur votre ordinateur la tuile OSM ${z}/${x}/${y} = 16/33436/23982

R: L'URL est https://tile.openstreetmap.org/16/33436/23982.png (il s'agit de la tuile avec le Lazaret de Sète).

3.5. Création de cartes avec Leaflet

Exercice 2

Q: Dans le code vu précédemment, que signifient {s}, {z}, {x} et {y} dans l'argument 1 ? Quel est le nom et le type de l'option passée dans l'argument 2 ?

R: Dans le motif d'URL, {s} désigne le sous-domaine. Par défaut, il peut prendre les valeurs a, b ou c. Chez beaucoup de fournisseurs, les tuiles sont dupliquées sur 3 serveurs, par exemple : a.fournisseur.org/, b.fournisseur.org/, c.fournisseur.org/.

{z} désigne le niveau de zoom demandé - {x} et {y}, la colonne et la ligne dans le système de coordonnée "à la Google".

Le 2nd argument est un objet qui regroupe les options. L'option attribution est de type String (remarque : elle est héritée de la classe Layer)

Exercice 3

Q: Vous allez ajouter dans le code JavaScript de la page tp_lazaret.html 2 lignes, pour afficher un marqueur à l'emplacement du Lazaret. Les coordonnées du Lazaret figure dans lat_lng_lazaret. Inspirez-vous des 2 lignes suivantes en les complétant.

R:

var marker = L.marker(lat_lng_sete);
marker.addTo(ma_carte).bindPopup("<strong>ANF SIST 2020</strong><br>Le Lazaret, Sète")

3.6. Les données vectorielles dans Leaflet

Exercice 4

Q: Quelle commande JavaScript permettrait de définir une nouvelle variable test_lat avec la latitude de la 3ème entité du fichier GeoJSON ?

R:

var test_lat = datageo.features[2].geometry.coordinates[1]
// test_lat = 43.61108