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

使用

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

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

1 个答案: