Чжэнь Синь, инженер-разработчик Getui
Когда нам нужно отобразить все виды информации о больших данных в более интуитивно понятной и эффективной форме, тепловая карта, несомненно, является хорошим способом. В качестве карты плотности тепловая карта обычно использует метод со значительными цветовыми различиями для представления эффектов данных.Яркие цвета на тепловой карте обычно представляют события с высокой частотой или высокой плотностью распределения вещей, а темные цвета - наоборот.
Стоит упомянуть, что конечный эффект тепловой карты часто лучше, чем прямое отображение дискретных точек, которые могут интуитивно отображать плотность или частоту пространственных данных на двумерной плоскости или карте.
Итак, чтобы составить полную тепловую карту, какую работу должен выполнить внешний интерфейс? Далее я подробно разберу процесс реализации тепловой карты во фронтенде исходя из собственной практики в рабочем процессе.
Прежде всего, позвольте мне показать вам полную карту эффектов реализации тепловой карты:
О принципе реализации тепловой карты:
В целом его можно условно свести к следующим этапам:
1. Для каждой точки данных установите круг с градиентом оттенков серого от центра к краям;
2. Используя принцип наложения оттенков серого, рассчитайте значение оттенков серого, полученное путем наложения данных каждой точки пикселя;
3. В соответствии со значением серого, рассчитанным для каждого пикселя, выполните сопоставление цветов в цветовой полосе и, наконец, раскрасьте изображение, чтобы получить тепловую карту.
Когда тепловая карта основана на конкретной реализации клиентской технологии, ее можно разделить на следующие четыре шага, которые будут подробно проанализированы ниже:
1. Подготовьте формат данных тепловой карты Поскольку сценарий использования тепловой карты обычно представляет собой карту, источник данных должен предоставить широту и долготу в качестве информации о местоположении, а также учитывать значение веса точки данных. Ниже приведены примеры конкретных форматов данных:
2. Заполните данные на карте При рисовании тепловой карты на основе холста радиус каждой точки данных на тепловой карте будет напрямую влиять на эффект отображения тепловой карты, поэтому обычно необходимо комбинировать уровень масштабирования карты. и точность данных для установки. Пример в этой статье по умолчанию равен 15px.
Стиль точки, нарисованной с помощью вышеуказанных шагов, показан на рисунке ниже, который представляет собой серый круг с градиентом изнутри наружу:
Эффект от всех точек, наложенных на карту, показан на следующем рисунке:
3. Наложение отображения, алгоритм веса (плотности)
В приведенных выше результатах рисунка, поскольку значение веса не используется, значение серого в центральной точке каждой окружности точек данных равно 1, что не может быть непосредственно использовано для отображения цвета Плотность теплового распределения должна быть определена в соответствии с суперпозицией буферов дискретных точек. Каждая точка доступа имеет положение и вес. Чем больше вес, тем заметнее точка, что также представляет собой коэффициент затухания ее градиента. В это время нам нужно установить разные значения альфа в соответствии с разными подсчетами. В этой статье каждая точка данных получена на основе метода расчета отображения, в котором минимальное значение count соответствует alpha0, а максимальное значение соответствует 1, чтобы нарисовать alpha:
В сочетании с предыдущим шагом полный метод рисования на холсте выглядит следующим образом:
Конкретный эффект отрисовки показан на рисунке ниже.Из сравнения примеров графиков видно, что хороший метод сопоставления весов играет очень важную роль в эффекте отображения тепловой карты.
4. Цветовое отображение
В соответствии с накопленным значением серого каждого пикселя на холсте цвет соответствующей позиции может быть получен из цветовой полосы цветовой карты.
Итак, как получить информацию о каждом пикселе на холсте? Вы можете использовать метод getImageData(), предоставленный canvas, для возврата объекта ImageData, который копирует данные пикселей указанного прямоугольника холста.
Следует отметить, что каждый пиксель в объекте ImageData содержит четыре части информации RGBA:
Согласно методу putImageData(), предоставляемому холстом, данные на уровне пикселей могут быть помещены обратно в холст.
В процессе рисования тепловой карты, используя эти два метода, можно нарисовать тепловую карту, полученную на предыдущем шаге.
Получите значение серого (0 ~ 255) альфа-канала, полученное путем наложения каждой точки пикселя, а затем установите длину 256 пикселей.
Лента цветов , из которой значение RGB цвета, соответствующее пикселю, получается путем сопоставления.
Процесс создания радужной полосы длиной 256 пикселей показан на следующем рисунке:
Пример цветных полос, полученных с помощью пользовательских цветов:
Процесс отображения цветов из радужных полос выглядит так:
После вышеуказанных шагов эффект тепловой карты, который мы можем получить, выглядит следующим образом:
Наконец, я предоставлю вам метод оптимизации производительности для тепловых карт.Поскольку в тепловую карту загружено слишком много точек за один раз, она подвержена проблемам с зависанием.Когда внешний интерфейс отображает тепловую карту, оптимизация агрегации точек Тепловая карта может быть выполнена.
Относительно метода реализации оптимизации агрегации точек: разделите окно просмотра на сетки для работы, тем самым оценивая положение точек данных тепловой карты в сетке, если несколько точек находятся в сетке одновременно, объедините эти точки, это уменьшит рендеринг расходы.
Положение распределения каждой точки в сетке можно оценить следующим образом:
Методы построения сетки и агрегации точек следующие:
После того, как вы поделились информацией выше, вы уже должны были знать о внешнем процессе практической работы с тепловой картой!
О применении тепловой карты:
После того, как внешний интерфейс создаст полную тепловую карту, ее можно будет применить к нескольким предприятиям. брать
Для тепловых карт push это может помочь живописному месту определить распределение потока людей.Благодаря наложению различных цветовых блоков он может отображать плотность населения в разных областях живописного места и помогать живописному пятну делать хорошее Работа в интеллектуальном управлении. Кроме того, тепловая карта Getui также может помочь в оказании помощи при стихийных бедствиях, эффективно направлять эвакуацию людей и обеспечивать
Значительную помощь оказывает деятельность правительственных ведомств по оказанию помощи после стихийных бедствий.