使用 Leafletjs 和 OSM 获取本地和英语的重复地图
P粉878542459
P粉878542459 2024-03-28 09:40:20
0
1
438

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

P粉878542459
P粉878542459

全部回复(1)
P粉014293738

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

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

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

代码示例:

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!