Obtenez des cartes en double locales et anglaises à l'aide de Leafletjs et OSM

Question

J'ai créé une carte dans vuejs en utilisant leafletjs et Openstreetmap (en utilisant le site officiel : https://leafletjs.com/),

more code here......
<l-tile-layer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a target="_blank" 
        href="http://osm.org/copyright">OpenStreetMap</a>'
></l-tile-layer>

Mais maintenant, je souhaite afficher à la fois la langue d'origine locale et l'anglais sur ma carte, comme nous le montrons (voir l'image ci-dessous)

https://liveuamap.com/

J'ai cherché et consulté de nombreux tutoriels sur Google, mais je n'ai pas trouvé ce que je cherchais. Comment puis-je y parvenir pour ma carte en utilisant vuejs. Deuxièmement, je dois également désactiver l'anglais, donc si l'utilisateur souhaite uniquement voir la langue locale ou souhaite voir l'anglais, il peut choisir de le faire. Toute aide est grandement appréciée. Merci d'avance!

Answer 1

Vous devrez passer à un fournisseur de tuiles vectorielles qui propose différentes options de langue (par exemple MapTiler), ou si vous souhaitez utiliser des tuiles Leaflet et raster, utilisez un fournisseur de tuiles qui propose des étiquettes en anglais. Par exemple. L'API MapTiles fournit des étiquettes locales ou anglaises (mais pas une combinaison des deux) avec des tuiles raster globales.

Par exemple, celui-ci (vous avez besoin d'une clé API) affichera le label anglais :

Modifier : J'ai trouvé une couche de carte avec des étiquettes mixtes anglaises/locales : les tuiles de la carte Thunderforest affichent à la fois des étiquettes anglaises et locales, similaires à votre exemple liveuamap. Vous avez également besoin d'une clé API.

Exemple de code :

À propos du changement : pour les tuiles raster, cela n'est possible que via le sélecteur de couche de carte (appelé contrôle de couche dans Leaflet, voir ici : https://leafletjs.com/SlavaUkraini/examples/layers-control/ ). Par exemple. Une couche contient des tuiles OpenStreetMap standard et une autre couche contient, par exemple, des tuiles anglaises de l'API MapTiles et des tuiles Thunderforest.