Тепловая карта Mapbox GL JS: проблемы с цветовым кодированием и непрозрачностью на разных уровнях масштабирования ⇐ Javascript

[Anonymous]

Я разрабатываю интерактивную карту с помощью Mapbox GL JS для визуализации данных о снегопадах на различных горнолыжных курортах. Данные каждого курорта включают его название, широту, долготу и количество снегопадов (в дюймах). Цель состоит в том, чтобы отобразить интенсивность снегопада с помощью тепловой карты с определенной цветовой кодировкой и обеспечить постоянную непрозрачность при разных уровнях масштабирования.
Запрос на помощь: мне нужны рекомендации по:
Запрос на помощь: мне нужны рекомендации по:
strong>
Правильная настройка тепловой карты для отражения точного цветового кодирования на основе данных о снегопадах.
Обеспечение единообразной непрозрачности и представления цвета при различных уровнях масштабирования.
Любая информация, предложения или примеры будем очень признательны за решение этих проблем.
Дополнительная информация:
Версия Mapbox GL JS: 2.15.0
Браузер: Google Chrome Версия 131.0.6778.264
Пример данных: приведен ниже
Соответствующий код: приведен ниже
Заранее благодарим вас за помощь.
Проблемы Встречается:
Цветовое кодирование:
Курорты с большим количеством снегопадов (например, 17 дюймов) отображаются цветами, предназначенными для более низких диапазонов снегопадов.
Цветовое представление не соответствует заданным настройкам веса тепловой карты и цвета тепловой карты.
Уровни непрозрачности и масштабирования:
При масштабировании или гаснет, цвета тепловой карты тускнеют или исчезают, что приводит к нестабильной визуализации.
Желаемое поведение — поддерживать постоянную непрозрачность и представление цвета на всех уровнях масштабирования.
Попытки устранения неполадок:
Проверка данных: подтверждено, что значения снегопада правильно анализируются как целые числа.
Корректировки конфигурации: экспериментировались с различными значениями веса тепловой карты, цвета тепловой карты, радиуса тепловой карты и непрозрачности тепловой карты. настройки без достижения желаемого результата.
Документация
Обзор: просмотрено руководство Mapbox GL JS Heatmap Tutorial и связанные ресурсы.
Текущая реализация:

• Источник данных: Resorts_with_snowfall.json, содержащий:

  Код: Выделить всё

  [
  {
  "resortName": "Alyeska",
  "latitude": "63.588753",
  "longitude": "-154.4930619",
  "snowfall": "23in"
  },
  {
  "resortName": "Arctic Valley",
  "latitude": "61.2391787",
  "longitude": "-149.6337609",
  "snowfall": "9in"
  }
  // Additional resort data...
  ]
  
  

Конфигурация слоя тепловой карты:
map.addLayer({
id: 'курорт-тепловая карта',
тип: 'тепловая карта',
источник: 'курорты',
paint: {
'тепловая карта-вес': [
'интерполировать',
['линейный'],
['получить', 'снегопад'],
0, 0,
1, 0.1,
5, 0.3,
12, 1
],
'тепловая карта-цвет': [
'интерполировать',
['линейная'],
['тепловая карта-плотность'],
0, 'rgba(0, 0, 0, 0.8)', // Черный для низких (1–5 дюймов)
0.2, 'rgba(35, 238, 255, 0.5)', // Светлый Синий для среднего (5–12 дюймов)
0,5, 'rgba(255, 255, 255, 0,8)', // Белый для высокого (>12 дюймов)
1, 'rgba(255, 255, 255, 1)' // Сплошной белый для максимальной интенсивности
],
'heatmap-radius': [
'интерполировать',
['линейный'],
['масштабирование'],
0, 20,
9, 50,
15, 100
],
'heatmap-opacity': 0,8
}
});


Подробнее здесь: https://stackoverflow.com/questions/793 ... oom-levels