angular - Leaflet - Angular：将大数据矩阵显示为网格的最佳方式

Question

我需要显示从外部 API 获得的数据（数字）矩阵，作为传单地图中的网格。我的矩阵的每个数字都代表给定区域中的物理测量值。根据数据的值，它应该用不同的颜色表示（例如：红色代表高数字，绿色代表低数字）。你可以看到我需要的表示：

我已经实现了一个使用 Leaflet 的 Rectangle 的解决方案。因此，对于我的矩阵的每一个数字，我都会创建一个由其坐标和颜色定义的 Rectangle。然后将所有矩形添加到我的地图中。

基本上，我的代码可以总结为以下几行：

var matrix=getDataFromAPI();
var layerGroup=L.LayerGroup;

//works well
for(var i=0 ; i<matrix.height ; i++)
{
   for(var j=0 ; j<matrix.width ; j++)
   {
      layerGroup.addLayer(L.Rectangle(matrix[i][j].coordinates,{fillcolor: getColor(matrix[i][j].value)}));
   }
}

//Work with a small matrix - Doesn't work with a big matrix
map.addLayer(layerGroup);

该解决方案对于小矩阵（例如 5*5）非常有效，但是当我需要显示更大的矩阵（400*400）时，我的应用程序变得无法使用。我所有的矩形都被创建（几乎很快），但是当我在地图中添加 layerGroup 时，我的应用程序不再响应。

所以我得出的结论是，为矩阵的每个元素创建一个 Rectangle 并不是满足我需求的好解决方案。尽管我进行了搜索，但我没有找到更好的解决方案。我找到的解决方案是：

• 创建代表我的数据的图像并显示它
• 创建一个完整的 GeoServer

这两种解决方案不适合我。第一个是因为用户必须与我的网格的每个案例进行交互，第二个是因为同样的原因，而且我绝对无法生成整个 GeoServer。

对我来说最好的方法应该是以优化的方式使用我所做的实现。

我感谢您的所有回复。

标签： angularmatrixleaflet