如何使用 Leafletjs 和 OSM 在地图上使用本地语言和英语进行重复

发布于 2025-01-11 11:36:01 字数 858 浏览 0 评论 0原文

我使用 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 为我的地图实现此目的。其次，我还需要关闭英语，因此如果用户只想查看本地语言或想查看英语，则可以选择执行此操作。任何帮助将不胜感激。提前致谢！

原文

I have created a map in vuejs using leafletjs and Openstreetmap ( using there official site: https://leafletjs.com/),

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

But now I want to have both local original language and also English language display on my map same way as we have in ( see image below)

https://liveuamap.com/

I have google and checked many tutorials but cannot find exactly what I am looking for.
How can I achieve this for my map using vuejs.
And secondly I also need to turn off the English language, so if user want to see only local language or want to see the English language, so there can be options to do it.
Any help will be much appreciated. Thanks in Advance !

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜扑 2025-01-18 11:36:01

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

例如，这个（您需要 API 密钥）将显示英文标签：

<l-tile-layer
    url="https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=XXXXXX"
    attribution='© data <a target="_blank" 
    href="http://osm.org/copyright">OpenStreetMap</a>, © tiles <a target="_blank" href="https://www.maptilesapi.com">MapTiles API</a>'></l-tile-layer>

编辑：找到一个具有英文/本地标签混合的地图图层：Thunderforest 地图图块显示英文和本地标签，类似于您的 liveuamap 示例。您还需要一个 API 密钥。

代码示例：

<l-tile-layer
    url="https://tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png?apikey==XXXXXX"
    attribution='© data <a target="_blank" 
    href="http://osm.org/copyright">OpenStreetMap</a>, © tiles <a target="_blank" href="https://www.thunderforest.com">Thunderforest</a>'></l-tile-layer>

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

You would either need to change to a vector tile provider that offers different language options (e.g. MapTiler does) or if you want to use Leaflet and raster tiles - use a tile provider that offers English labels. E.g. MapTiles API offers either local or English labels with raster tiles worldwide (but not both combined).

E.g. this one (you'll need an API key) would show English labels:

<l-tile-layer
    url="https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=XXXXXX"
    attribution='© data <a target="_blank" 
    href="http://osm.org/copyright">OpenStreetMap</a>, © tiles <a target="_blank" href="https://www.maptilesapi.com">MapTiles API</a>'></l-tile-layer>

Edit: found a map layer with English/local labels mix: The Thunderforest map tiles show both the English and local label similar to your liveuamap example. You would need an API key as well.

Code example:

<l-tile-layer
    url="https://tile.thunderforest.com/neighbourhood/{z}/{x}/{y}.png?apikey==XXXXXX"
    attribution='© data <a target="_blank" 
    href="http://osm.org/copyright">OpenStreetMap</a>, © tiles <a target="_blank" href="https://www.thunderforest.com">Thunderforest</a>'></l-tile-layer>

Regarding the toggle: with raster tiles this would only be possible by having a map layer switcher (called layers control in Leaflet, see here: https://leafletjs.com/SlavaUkraini/examples/layers-control/ ). E.g. one layer with standard OpenStreetMap tiles, the other with e.g. the MapTiles API English tiles and one with the Thunderforest tiles.

回复收藏 0 原文

~没有更多了~