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

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