Нормализация значений в веб-картографии представляет собой приведение исходных данных к унифицированному диапазону, удобному для визуального отображения. В рамках Mapbox GL JS это особенно важно при работе с data-driven styling, где свойства слоёв зависят от числовых или категориальных данных источника.
Типичный сценарий — преобразование произвольных значений (например, численности населения, скорости ветра, плотности застройки) в диапазон, пригодный для:
Без нормализации данные с разными порядками величин становятся несопоставимыми и приводят к визуальным искажениям.
Наиболее распространённый метод:
[ x_{norm} = ]
В Mapbox GL JS аналог реализуется через выражения
interpolate и linear.
paint: {
'circle-radius': [
'interpolate',
['linear'],
['get', 'population'],
0, 2,
1000000, 10,
5000000, 25
]
}
Здесь исходное значение population фактически
нормализуется к диапазону радиусов.
Часто требуется ограничить значения сверху и снизу, чтобы избежать выбросов:
['clamp',
['get', 'value'],
0,
100
]
Такой подход стабилизирует визуализацию при наличии аномальных данных.
Интерполяция является основным механизмом нормализации в стиле Mapbox:
'fill-color': [
'interpolate',
['linear'],
['get', 'temperature'],
-20, '#2c7bb6',
0, '#abd9e9',
20, '#fdae61',
40, '#d7191c'
]
Фактически происходит преобразование непрерывного числового диапазона в цветовую шкалу.
При работе с данными, распределёнными по степенному закону, линейная нормализация даёт плохую читаемость. Используется экспоненциальная кривая:
[
'interpolate',
['exponential', 1.5],
['get', 'value'],
1, 2,
1000, 20
]
Степень 1.5 усиливает различие в малых значениях и сжимает большие.
Категориальные данные требуют дискретного преобразования:
[
'step',
['get', 'risk'],
'#00ff00',
30, '#ffff00',
70, '#ff0000'
]
Здесь нормализация происходит не в непрерывной форме, а через пороговые значения.
Нормализация может выполняться до передачи данных в стиль:
const normalizedFeatures = features.map(f => ({
...f,
normValue: (f.value - min) / (max - min)
}));
После этого Mapbox использует уже подготовленное поле:
'opacity': ['get', 'normValue']
Такой подход снижает нагрузку на выражения стиля и упрощает отладку.
Для сильно асимметричных данных используется логарифмирование:
[
'interpolate',
['linear'],
['ln', ['get', 'income']],
0, 1,
10, 10
]
Логарифмическая нормализация позволяет визуализировать значения, отличающиеся на несколько порядков.
Нормализация часто комбинируется с масштабированием по уровню приближения:
'circle-radius': [
'interpolate',
['linear'],
['zoom'],
5, 2,
10, 6,
15, 20
]
Фактически значение радиуса нормализуется относительно zoom, что создаёт визуально стабильную карту.
Часто требуется учитывать сразу несколько факторов:
Пример:
'circle-opacity': [
'interpolate',
['linear'],
['+', ['get', 'density'], ['zoom']],
5, 0.2,
15, 0.8
]
Линейная шкала при наличии выбросов приводит к сжатию большинства данных в узкий диапазон.
Чрезмерная нормализация может скрыть реальные различия между объектами.
Если разные слои используют разные методы нормализации, визуальная система становится непредсказуемой.
Выбор метода зависит от характера данных:
Цветовые шкалы в Mapbox GL JS часто напрямую зависят от нормализованного значения:
'fill-color': [
'interpolate',
['linear'],
['get', 'score'],
0, '#2c3e50',
50, '#f1c40f',
100, '#e74c3c'
]
Нормализация здесь фактически встроена в процесс интерполяции, где диапазон 0–100 служит эталонной шкалой.
В геоданных часто требуется нормализация расстояний и плотностей:
Пример нормализации расстояния:
'heatmap-intensity': [
'interpolate',
['linear'],
['get', 'distance'],
0, 1,
10000, 0
]
Heatmap особенно чувствителен к диапазону входных значений. Нормализация здесь влияет на:
'heatmap-weight': [
'interpolate',
['linear'],
['get', 'magnitude'],
0, 0,
6, 1
]
При построении комплексных карт важно сохранять единые правила масштабирования:
Несогласованность приводит к визуальной фрагментации данных, когда один слой кажется «сильнее» другого без объективной причины.