umap tilelayer на встроенном фрейме не отображается на мобильных устройствах - PullRequest
1 голос
/ 13 марта 2020

Я создал карту с помощью umap и встроил ее в веб-сайт с помощью встроенного параметра iframe. Он отлично работает на настольном компьютере, но на мобильном не отображается слой плитки - вместо этого фон просто серый. Он появляется, если пользователь выбирает его вручную через меню.

Я пробовал:

  • разные браузеры / устройства
  • , используя другую тему листов
  • разные разрешения экрана в консоли разработчика (все нормально, просто проблема на реальных телефонах)
  • разные размеры и абсолютные / относительные значения 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

1 Ответ

1 голос
/ 13 марта 2020

Сконфигурированный слой плиток не поддерживает «плитки сетчатки». Эти плитки используются для дисплеев с высоким 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} из URL-адреса плитки. Заменить

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

на

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

...