Кейсы
Рекомендации по уменьшению размеров тайлов при работе с ORBISmap
Задача
Создать единую цифровую среду для мониторинга и прогнозирования зон затопления. Основная цель — обеспечить МЧС, городские службы и население актуальными данными о движении воды в режиме реального времени.
ORBISmap позволяет настроить отображение данных тайлами в формате PNG8 (PNG256) — изображения в формате PNG с фиксированной и ограниченной палитрой. Использование данного формата позволяет, в зависимости от отображаемых данных, уменьшить размер тайлов в среднем в 3–5 раз по сравнению с полноцветным изображением PNG, не создавая дополнительную нагрузку при генерации тайлов на стороне сервера. Этот формат применяется, например, в сервисе Яндекс.Карты.
Решение
Для возможности использовать в публичной карте отображение данных в PNG8 необходимо:
Создать единую цифровую среду для мониторинга и прогнозирования зон затопления. Основная цель — обеспечить МЧС, городские службы и население актуальными данными о движении воды в режиме реального времени.
ORBISmap позволяет настроить отображение данных тайлами в формате PNG8 (PNG256) — изображения в формате PNG с фиксированной и ограниченной палитрой. Использование данного формата позволяет, в зависимости от отображаемых данных, уменьшить размер тайлов в среднем в 3–5 раз по сравнению с полноцветным изображением PNG, не создавая дополнительную нагрузку при генерации тайлов на стороне сервера. Этот формат применяется, например, в сервисе Яндекс.Карты.
Решение
Для возможности использовать в публичной карте отображение данных в PNG8 необходимо:
- Включить режим отображения карты Несколькими слоями.
- Поместить данные карты в папку первого уровня со свойствами отображения Растровыми тайлами и выбрать Формат файла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 поддерживает отображение любых векторных данных как в виде растровых форматов тайлов, так и в виде векторных тайлов.