Erhalten Sie lokale und englische Duplikatkarten mit Leafletjs und OSM
P粉878542459
P粉878542459 2024-03-28 09:40:20
0
1
469

Ich habe eine Karte in vuejs mit leafletjs und Openstreetmap erstellt (unter Verwendung der offiziellen Website: 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>

Aber jetzt möchte ich auf meiner Karte sowohl die lokale Originalsprache als auch Englisch anzeigen, wie wir es in (siehe Bild unten) zeigen

https://liveuamap.com/

Ich habe viele Tutorials gegoogelt und überprüft, konnte aber nicht finden, wonach ich gesucht habe. Wie kann ich dies für meine Karte mit vuejs erreichen? Zweitens muss ich auch Englisch deaktivieren. Wenn der Benutzer also nur die Landessprache oder Englisch sehen möchte, kann er sich dafür entscheiden. Jede Hilfe wird sehr geschätzt. Dank im Voraus!

P粉878542459
P粉878542459

Antworte allen(1)
P粉014293738

您需要更改为提供不同语言选项的矢量切片提供商(例如 MapTiler),或者如果您想使用 Leaflet 和栅格切片 - 使用提供英文标签的切片提供商。例如。 MapTiles API 提供带有全球栅格图块的本地或英文标签(但不是两者组合)。

例如这个(您需要 API 密钥)将显示英文标签:

编辑:找到了一个带有英语/本地标签混合的地图图层:Thunderforest 地图图块同时显示英语和本地标签,类似于您的 liveuamap 示例。您还需要一个 API 密钥。

代码示例:

关于切换:对于光栅图块,这只能通过地图图层切换器(在 Leaflet 中称为图层控件,请参见此处:https://leafletjs.com/SlavaUkraini/examples/layers-control/ )。例如。一层带有标准 OpenStreetMap 图块,另一层带有例如MapTiles API 英文图块和 Thunderforest 图块。

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage