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

Question

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

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

有什么办法可以做到这一点。 附言。这是一个网络应用程序。 谢谢你的建议。

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