Leafletjs와 OSM을 사용하여 현지 및 영어 중복 지도 얻기

Question

저는 leafletjs와 Openstreetmap을 사용하여 vuejs에서 지도를 만들었습니다(공식 웹사이트: https://leafletjs.com/ 사용),

으아아아

하지만 이제 우리가 표시한 것처럼 내 지도에 현지 원래 언어와 영어를 모두 표시하고 싶습니다(아래 이미지 참조)

https://liveuamap.com/

Google에서 많은 튜토리얼을 검색하고 확인했지만 원하는 내용을 찾을 수 없었습니다. vuejs를 사용하여 내 지도에서 이를 어떻게 달성할 수 있나요? 둘째, 영어도 꺼야 하므로 사용자가 현지 언어만 보고 싶거나 영어만 보고 싶다면 그렇게 하도록 선택할 수 있습니다. 어떤 도움이라도 대단히 감사하겠습니다. 미리 감사드립니다!

Answer 1

다른 언어 옵션(예: MapTiler)을 제공하는 벡터 타일 공급자로 변경해야 합니다. 또는 전단지 및 래스터 타일을 사용하려면 영어로 레이블을 제공하는 타일 공급자를 사용하세요. 예를 들어. MapTiles API는 글로벌 래스터 타일과 함께 로컬 또는 영어 레이블(둘의 조합은 아님)을 제공합니다.

예를 들어 이 항목(API 키가 필요함)에는 영어 라벨이 표시됩니다.

으아아아

편집: 영어/현지 라벨이 혼합된 지도 레이어를 찾았습니다. Thunderforest 지도 타일은 liveuamap 예시와 유사하게 영어와 현지 라벨을 모두 표시합니다. API 키도 필요합니다.

코드 예:

으아아아

전환 정보: 래스터 타일의 경우 지도 레이어 전환기를 통해서만 가능합니다(Leaflet에서는 레이어 제어라고 함, 여기 참조: https://leafletjs.com/SlavaUkraini/examples/layers-control/ ). 예를 들어. 한 레이어에는 표준 OpenStreetMap 타일이 있고 다른 레이어에는 MapTiles API 영어 타일 및 Thunderforest 타일 등이 있습니다.