javascript - 如何在不闪烁的情况下更新、重绘网格层

Question

我的问题是如何在没有奇怪的“闪烁”效果的情况下更新传单中的网格层。

我使用 Leaflet.VectorGrid在 Canvas 上显示我的 geojson。问题是当我想重绘图层时，因为我的数据已更新。我使用该代码重绘图层:

tileLayer.redraw();

当我一直在使用这个功能时，我的图层会消失一段时间，然后它会出现并显示更改的数据。所以最后的效果还是不错的，但是问题是:

如何消除 map “空”的这一刻？

我想重新绘制我的图层，没有这个奇怪的时刻，几毫秒图层是清晰的。

Answer 1

我知道这是事后的事，但我在寻找解决方案时发现了您的问题。我终于得到了一些有用的东西，并希望将它包含在这里，以防您仍然遇到问题或其他人遇到问题。

我找到了几个关于在多个图层上显示结果然后“一段时间后”移除旧图层的答案，但我觉得这并不干净。使用传单事件，我找到了一个遵循这些答案精神的解决方案，但仍然感觉很干净。我正在使用 vectorGrid.slicer 来创建我的网格，因此请将其替换为您用来创建网格层的任何内容。

  // Function to handle event from leaflet when all tiles are loaded
  // for the grid layer
  const onLoad = (e) => {
    // Use a brief timeout so the new layer has time to draw before
    // the old layer is removed.  This prevents a brief blink of the layers.
    setTimeout(
      () => {
        // Remove the old grid layer from the map
        this.graphicsLayer.remove();
        // Stop listening to the load event
        e.target.off('load', onLoad);
        // Save the new graphics layer into the member variable
        this.graphicsLayer = e.target;
      },
      250
    );
  };

  // Create the grid layer, and listen to the load event
  L.vectorGrid.slicer(geographyResults, slicerStyle)
    .on('load', onLoad).addTo(this.map);