如何通过从数据库中获取像素值来着色图像

Question

我想制作一张热图，为此我从谷歌地图中捕获了一张图片并分成了网格，例如

现在，我想根据居住在该网格中的人数为特定网格着色。例如， 如果在网格7,5没有。居民是 7k +颜色为红色。 4k至7k，颜色为橙色。 少于4k，用黄色着色。

有什么方法可以实现这一点。 PS。这是一个Web应用程序。 谢谢你的建议。

Answer 1

如果您的数据是二维数组，请执行以下操作：

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

然后循环创建一个具有相关颜色的相同大小的2d数组：

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