Рекомендации по уменьшению размеров тайлов при работе с ORBISmap
Тайлы — основа растровой формы представления картографических данных. От их размера зависит, как долго пользователи будут ждать загрузки области карты, а также сколько пользователей сможет обслуживать сервер картографии, так как размер исходящего канала сервера не безграничный.
ORBISmap позволяет настроить отображение данных тайлами в формате PNG8 (PNG256) — изображения в формате PNG с фиксированной и ограниченной палитрой. Использование данного формата позволяет, в зависимости от отображаемых данных, уменьшить размер тайлов в среднем в 3–5 раз по сравнению с полноцветным изображением PNG, не создавая дополнительную нагрузку при генерации тайлов на стороне сервера. Этот формат применяется, например, в сервисе Яндекс.Карты.
При разрешении экрана пользователя 1920x1080 пикселей (Full HD) и полноэкранном режиме работы карты, единовременно будет запрашиваться примерно 40 тайлов, что при среднем размере тайла в 20 Кбайт равняется примерно 800 Кбайт. Если считать комфортным время отрисовки карты за 3 секунды, то пользователю необходимо получать данные со скоростью 800 Кбайт за 3 сек = 266 Кбайт/с или 2 Мбит/с (мегабита в секунду), что позволяет серверу с каналом 100 Мбит/c одновременно обслуживать примерно 50 пользователей. Без применения PNG8 сервер с таким же каналом смог бы обслуживать всего 10–15 пользователей.
Для возможности использовать в публичной карте отображение данных в PNG8 необходимо:
Сравнение размеров тайлов в полноцветном формате PNG и PNG8
ORBISmap позволяет настроить отображение данных тайлами в формате PNG8 (PNG256) — изображения в формате PNG с фиксированной и ограниченной палитрой. Использование данного формата позволяет, в зависимости от отображаемых данных, уменьшить размер тайлов в среднем в 3–5 раз по сравнению с полноцветным изображением PNG, не создавая дополнительную нагрузку при генерации тайлов на стороне сервера. Этот формат применяется, например, в сервисе Яндекс.Карты.
При разрешении экрана пользователя 1920x1080 пикселей (Full HD) и полноэкранном режиме работы карты, единовременно будет запрашиваться примерно 40 тайлов, что при среднем размере тайла в 20 Кбайт равняется примерно 800 Кбайт. Если считать комфортным время отрисовки карты за 3 секунды, то пользователю необходимо получать данные со скоростью 800 Кбайт за 3 сек = 266 Кбайт/с или 2 Мбит/с (мегабита в секунду), что позволяет серверу с каналом 100 Мбит/c одновременно обслуживать примерно 50 пользователей. Без применения PNG8 сервер с таким же каналом смог бы обслуживать всего 10–15 пользователей.
Для возможности использовать в публичной карте отображение данных в PNG8 необходимо:
- Включить режим отображения карты Несколькими слоями.
- Поместить данные карты в папку первого уровня со свойствами отображения Растровыми тайлами и выбрать Формат файлаPNG8.
- Настроить стили отображения слоев.
- Опубликовать настроенные данные как список слоев или базовую карту.
Сравнение размеров тайлов в полноцветном формате PNG и PNG8
PNG, 99.4 Кбайт
PNG8, 33.8 Кбайт
PNG, 115.6 Кбайт
PNG8, 35.1 Кбайт
Особенности PNG8
Фиксированная палитра PNG8 налагает некоторые ограничения на раскраску объектов карты — желательно минимизировать количество различных цветов, попадающих в один тайл, и количество переходов от одного цвета к другому.
Минимизация количества переходов от одного цвета к другому позволит уменьшить количество переходных цветов на стыке разных цветов (градиент), так как переходные цвета занимают место в палитре PNG8, а также позволяет более эффективно использовать встроенное сжатие PNG.
Альтернативный формат
Помимо PNG8 широко используемым форматом для отображения тайлов является JPEG. Формат JPEG хорошо подходит для визуализации данных с большим количеством цветов и отсутствием альфа-канала (прозрачности) — космических снимков земли. При достаточно высоком качестве тайлы имеют гораздо меньший размер, чем в формате PNG или PNG8.
Фиксированная палитра PNG8 налагает некоторые ограничения на раскраску объектов карты — желательно минимизировать количество различных цветов, попадающих в один тайл, и количество переходов от одного цвета к другому.
Минимизация количества переходов от одного цвета к другому позволит уменьшить количество переходных цветов на стыке разных цветов (градиент), так как переходные цвета занимают место в палитре PNG8, а также позволяет более эффективно использовать встроенное сжатие PNG.
Альтернативный формат
Помимо PNG8 широко используемым форматом для отображения тайлов является JPEG. Формат JPEG хорошо подходит для визуализации данных с большим количеством цветов и отсутствием альфа-канала (прозрачности) — космических снимков земли. При достаточно высоком качестве тайлы имеют гораздо меньший размер, чем в формате PNG или PNG8.
PNG, 124.5 Кбайт
PNG8, 53.6 Кбайт
JPEG, 16.8 Кбайт
JPEG плохо подходит для отображения схематичных данных — при сопоставимых с PNG8 размерах тайлов становятся заметны артефакты JPEG-сжатия в районе текстовых подписей, тонких линий и резких смен цветов.
PNG8, 33.8 Кбайт
JPEG, 32.9 Кбайт
Рекомендации по настройке стилей
Градиент
Не рекомендуется использовать PNG8 для тайлов с данными, подразумевающими плавные переходы цветов (градиент, например, тепловая карта), так как в общем случае потеря и искажение цветов неизбежны.
Обводка данных
Желательно минимизировать количество переходных цветов — отказаться от обводки на тех масштабах и данных, где это возможно, например обводка линий дорог на дальних масштабах.
Градиент
Не рекомендуется использовать PNG8 для тайлов с данными, подразумевающими плавные переходы цветов (градиент, например, тепловая карта), так как в общем случае потеря и искажение цветов неизбежны.
Обводка данных
Желательно минимизировать количество переходных цветов — отказаться от обводки на тех масштабах и данных, где это возможно, например обводка линий дорог на дальних масштабах.
PNG, 234.4 Кбайт
PNG8, 96.3 Кбайт
CartoCSS
::out {
…
[zoom = 10] { line-width: 4.5; } // одинаковая толщина внешней (обводки) и внутренней линий на масштабе 10
[zoom = 11] { line-width: 7; }
…
}
::in {
…
[zoom = 10] { line-width: 4.5; } // внутренняя линия
[zoom = 11] { line-width: 5; }
…
}
…
[zoom = 10] { line-width: 4.5; } // одинаковая толщина внешней (обводки) и внутренней линий на масштабе 10
[zoom = 11] { line-width: 7; }
…
}
::in {
…
[zoom = 10] { line-width: 4.5; } // внутренняя линия
[zoom = 11] { line-width: 5; }
…
}
PNG8, с обводкой, 20.1 Кбайт
PNG8, без обводки, 19.4 Кбайт
Близкие цвета
Не использовать близкие цвета для объектов, где недопустимо их слияние в один цвет. Данный случай возможен при наличии в одном тайле рядом расположенных объектов близких цветов и большого количества объектов разных цветов.
Мелкие объекты
Минимизировать количество незначащих объектов на различных масштабах, например, не отображать части слоя растительности, имеющие небольшие площади для данного масштаба.
Не использовать близкие цвета для объектов, где недопустимо их слияние в один цвет. Данный случай возможен при наличии в одном тайле рядом расположенных объектов близких цветов и большого количества объектов разных цветов.
Мелкие объекты
Минимизировать количество незначащих объектов на различных масштабах, например, не отображать части слоя растительности, имеющие небольшие площади для данного масштаба.
CartoCSS
/*[zoom >= 8] { // без ограничений по размеру
polygon-fill: #d0dec7;
}*/
[zoom = 8][area > 10000000] {
polygon-fill: #d0dec7;
}
[zoom = 9][area > 2000000] {
polygon-fill: #d0dec7;
}
[zoom = 10][area > 400000] {
polygon-fill: #d0dec7;
}
[zoom >= 11][area > 200000] {
polygon-fill: #d0dec7;
}
polygon-fill: #d0dec7;
}*/
[zoom = 8][area > 10000000] {
polygon-fill: #d0dec7;
}
[zoom = 9][area > 2000000] {
polygon-fill: #d0dec7;
}
[zoom = 10][area > 400000] {
polygon-fill: #d0dec7;
}
[zoom >= 11][area > 200000] {
polygon-fill: #d0dec7;
}
PNG8, без ограничений, 13.2 Кбайт
PNG8, с ограничениями, 11.8 Кбайт
Готовый пример настроенной Базовой карты ORBISmap с выполнением изложенных рекомендаций по уменьшению размера тайлов.
Векторные тайлы
В последние годы помимо классических растровых форматов тайлов (PNG, PNG8 и JPEG) начали появлятся векторные форматы. Наиболее популярным форматом стал Mapbox Vector Tile, основанный на протоколе сериализации данных Protocol Buffers.
Данный формат содержит только координаты пространственных объектов и не содержит информации о их раскраске. Такой подход имеет свои плюсы и минусы, которые мы опишем в отдельной статье.
При грамотном использовании MVT может быть эффективнее растровых форматов тайлов по размеру тайла. Но неправильные настройки и объёмы данных могут привести к тайлам в несколько сотен килобайт.
ORBISmap поддерживает отображение любых векторных данных как в виде растровых форматов тайлов, так и в виде векторных тайлов.
Векторные тайлы
В последние годы помимо классических растровых форматов тайлов (PNG, PNG8 и JPEG) начали появлятся векторные форматы. Наиболее популярным форматом стал Mapbox Vector Tile, основанный на протоколе сериализации данных Protocol Buffers.
Данный формат содержит только координаты пространственных объектов и не содержит информации о их раскраске. Такой подход имеет свои плюсы и минусы, которые мы опишем в отдельной статье.
При грамотном использовании MVT может быть эффективнее растровых форматов тайлов по размеру тайла. Но неправильные настройки и объёмы данных могут привести к тайлам в несколько сотен килобайт.
ORBISmap поддерживает отображение любых векторных данных как в виде растровых форматов тайлов, так и в виде векторных тайлов.