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

Question

我已经使用umap创建了地图，并使用内置的iframe选项将其嵌入到website中。它在桌面上完全可以正常工作，但图块层无法在移动设备上显示-而是背景为灰色。如果用户通过菜单手动选择它，它就会显示出来。

我尝试过：

• 不同的浏览器/设备
• 使用另一个图块主题
• 开发控制台中的不同屏幕分辨率（所有正常，在实际电话中只是一个问题）
• 不同的iframe大小和绝对/相对值
• 启用/禁用滚轮缩放

网站上的当前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不支持“视网膜磁贴”。这些图块用于具有高DPI的显示器。这些通常可以在智能手机和大型台式机屏幕上找到。

这两者之间的区别是图块层URL。在您的配置中，例如通过

检索“标准”图块

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

通过检索“视网膜图块”时

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

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

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

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

with

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