使用 Leafletjs 和 OSM 取得本地和英語的重複地圖

Question

我使用 leafletjs 和 Openstreetmap 在 vuejs 中創建了一個地圖（使用官方網站：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>

但現在我想在我的地圖上同時顯示本地原始語言和英語，就像我們在（見下圖）中顯示的那樣

https://liveuamap.com/

我用谷歌搜尋並檢查了很多教程，但找不到我想要的東西。 我如何使用 vuejs 為我的地圖實現這一點。 其次，我還需要關閉英語，因此如果使用者只想查看本地語言或想查看英語，則可以選擇執行此操作。 任何幫助都感激不盡。先致謝！

Answer 1

您需要變更為提供不同語言選項的向量切片提供者（例如 MapTiler），或者如果您想使用 Leaflet 和柵格切片 - 使用提供英文標籤的切片提供者。例如。 MapTiles API 提供具有全球柵格圖塊的本地或英文標籤（但不是兩者組合）。

例如這個（您需要 API 金鑰）將顯示英文標籤：

編輯：找到了一個帶有英語/本地標籤混合的地圖圖層：Thunderforest 地圖圖塊同時顯示英語和本地標籤，類似於您的 liveuamap 範例。您還需要一個 API 金鑰。

程式碼範例：

關於切換：對於光柵圖塊，這只能透過地圖圖層切換器（在Leaflet 中稱為圖層控件，請參見此處：https://leafletjs.com/SlavaUkraini/examples/ layers-control/ ）。例如。一層有標準 OpenStreetMap 圖塊，另一層則有例如MapTiles API 英文圖塊和 Thunderforest 圖塊。