Отображаем карты OpenStreetMap на iPhone 4 с учётом сетчаточного дисплея при помощи Leaflet

в 13:23, , рубрики: iphone, iphone 4, Leaflet, OpenStreetMap, retina display, метки: , , ,

Всякий, кому до сегодняшнего дня доводилось запускать полноэкранный пример работы движка Leaflet на новейших мобильниках iPhone 4, неизменно получал перед собою вот какую карту OpenStreetMap в новоайфоновском разрешении 640×960:

[скриншот]

Как видите, векторный гипертекст (подпись под картою) выглядит существенно лучше по качеству, чем растровый текст (надписи на карте) и чем контуры дорог на карте. Это потому, что растровые картинки на сетчаточном дисплее по умолчанию состоят из квадратов 2×2 реальных (физических) пикселов — стало быть, растровый текст получается угловатым, контуры дорог получаются ступенчатыми, и так далее.

Сегодня это положение дел изменилось к лучшему.

Сегодня mourner внёс в Leaflet написанный мною джаваскрипт, который проверяет значение window.devicePixelRatio и запускает на сетчаточных дисплеях использование вчетверо большего количества вчетверо меньших по площади (вдвое меньших по размеру) тайлов карты. (Тайлы 256×256 уменьшаются до 128×128 условных пикселов, что составляет 256×256 физических пикселов сетчаточного дисплея.)

Мой джаваскрипт настроен срабатывать не по умолчанию, а только в том случае, если при создании тайлового слоя задан параметр «detectRetina» со значением «true». Дело в том, что вдвое более чёткие надписи одновременно становятся и вдвое более мелкими — далеко не для всех слоёв это может быть удобно.

Например, если поверх слоя ненадписанных космоснимков или не надписанных карт в вашем приложении лежит слой отдельных надписей (скажем, локализованных под язык письменной речи конкретного пользователя), то вы легко сможете уменьшить тайлы космоснимков (да и тайлы карт, если контуры дорог не выйдут чрезмерно тонкими), повысив их чёткость, но при этом не тронуть надписи, если они при уменьшении в два раза становятся чрезмерно трудночитаемыми, хотя и чёткими.

Надеюсь, это улучшение прекрасного mournerовского движка карт окажется для кого-нибудь полезным.

Автор: Mithgol


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js