как раскрасить изображение, взяв значения пикселей из базы данных

Question

Я хочу сделать тепловую карту, и для этого я снял изображение с карт Google и разделил его на сетку, например,

Теперь я хочу раскрасить конкретную сетку в соответствии с количеством людей, проживающих в этой сетке. Например, если в сетке 7,5 нет. жителей 7к + раскрась красным цветом. 4k до 7k, раскрасьте его оранжевым цветом. меньше 4К, закрасьте его желтым цветом.

есть ли способ, которым я могу этого достичь. пс. это веб-приложение. Спасибо за ваши предложения.

Answer 1

Если ваши данные находятся в двумерном массиве, например:

data = [ [6323, 9538, 1043, 1023, 4029],
         [3912, 5921, 4893, 9836, 2994],
         ... ];

Затем выполните цикл, чтобы создать двумерный массив того же размера со связанными цветами:

colors = [data.length][data[0].length]
for (let row = 0; row < data.length; row++) {
    let colorRow = []
    for (let col = 0; col < data[0].length; col++) {
        if data[row][col] > 7000 {
            colorRow.append('red');
        } else if data[row][col] > 4000 {
            colorRow.append('orange');
        } else {
            colorRow.append('yellow');
        }
    }
    colors.append(colorRow);

Тогда вы можете просто получить доступ к цвету для любой конкретной ячейки в матрице и делать с этой информацией все, что вам нужно:

color = colors[0][2] //returns 'red' for 9538