我使用 leafletjs 和 Openstreetmap 在 vuejs 中创建了一个地图(使用官方网站: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>
但现在我想在我的地图上同时显示本地原始语言和英语,就像我们在(见下图)中显示的那样
https://liveuamap.com/
我用谷歌搜索并检查了很多教程,但找不到我想要的东西。 我如何使用 vuejs 为我的地图实现这一点。 其次,我还需要关闭英语,因此如果用户只想查看本地语言或想查看英语,则可以选择执行此操作。 任何帮助都感激不尽。提前致谢!
您需要更改为提供不同语言选项的矢量切片提供商(例如 MapTiler),或者如果您想使用 Leaflet 和栅格切片 - 使用提供英文标签的切片提供商。例如。 MapTiles API 提供带有全球栅格图块的本地或英文标签(但不是两者组合)。
例如这个(您需要 API 密钥)将显示英文标签:
编辑:找到了一个带有英语/本地标签混合的地图图层:Thunderforest 地图图块同时显示英语和本地标签,类似于您的 liveuamap 示例。您还需要一个 API 密钥。
代码示例:
关于切换:对于光栅图块,这只能通过地图图层切换器(在 Leaflet 中称为图层控件,请参见此处:https://leafletjs.com/SlavaUkraini/examples/layers-control/ )。例如。一层带有标准 OpenStreetMap 图块,另一层带有例如MapTiles API 英文图块和 Thunderforest 图块。