- PVSM.RU - https://www.pvsm.ru -

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

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

[скриншот]

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

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

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

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

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

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

Автор: Mithgol


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/iphone-2/7234

Ссылки в тексте:

[1] полноэкранный пример: http://leaflet.cloudmade.com/examples/mobile-example.html

[2] движка Leaflet: http://leaflet.cloudmade.com/

[3] mourner: http://habrahabr.ru/users/mourner/

[4] написанный мною: https://github.com/CloudMade/Leaflet/pull/586

[5] проверяет: http://habrahabr.ru/post/140082/