嵌入式 iframe 上的 umap tilelayer 未显示在移动设备上

Question

我使用 umap and embedded it on a website 使用内置的 iframe 选项创建了一个地图。它在桌面上工作得很好，但平铺层在移动设备上没有显示——相反，背景只是灰色的。如果用户通过菜单手动选择它，它确实会显示。

我试过：

不同browsers/devices
使用不同的磁贴主题
开发控制台中的不同屏幕分辨率（一切正常，只是实际手机上的问题）
不同的 iframe 大小和 absolute/relative 值
enabling/disabling滚轮缩放

网站当前iframe代码：

<iframe width="100%" height="400" frameborder="0" allowfullscreen src="https://umap.openstreetmap.fr/en/map/meinfirmenwiki_426663?scaleControl=true&miniMap=false&zoomControl=true&allowEdit=false&moreControl=false&searchControl=null&tilelayersControl=null&embedControl=null&datalayersControl=expanded&onLoadPanel=none&captionBar=false&fullscreenControl=true"></iframe>

编辑：在umap website

上查看地图时也是一样的

Answer 1

配置的tile layer不支持"retina tiles"。这些图块用于具有高 DPI 的显示器。这些常见于智能手机和大桌面屏幕上。

这两者的区别在于瓦片层URL。在您的配置中，例如通过

检索 "standard" 磁贴

https://a.forte.tiles.quaidorsay.fr/en/8/137/91.png

而 "retina tile" 是通过

检索到的

https://a.forte.tiles.quaidorsay.fr/en@2x/8/137/91.png

注意 @2x。但是，后者 URL 不存在。这意味着您要么必须切换到支持视网膜图块的图块服务器，要么必须为您的地图禁用视网膜图块。

要禁用视网膜图块，您必须从图块 URL 中删除 {r} 占位符。替换

https://{s}.forte.tiles.quaidorsay.fr/en{r}/{z}/{x}/{y}.png

与

https://{s}.forte.tiles.quaidorsay.fr/en/{z}/{x}/{y}.png

嵌入式 iframe 上的 umap tilelayer 未显示在移动设备上

umap tilelayer on embedded iframe not showing up on mobile devices

iframe

leaflet

openstreetmap

tile