如何更新,重绘网格层而不闪烁

Question

我的问题是如何在传单中更新我的网格层而没有一些奇怪的"眨眼"效果.

我使用Leaflet.VectorGrid在画布上显示我的geojson.问题是我想重绘我的图层,因为我的数据已更新.我使用该代码重绘图层:

tileLayer.redraw();

当我使用此功能时,我的图层会消失一段时间,然后它会显示更改的数据.所以最后的效果很好,但问题是:

当地图"空"时,如何消除这一时刻？

我想重绘我的图层,没有这个奇怪的时刻,当几毫秒时图层清晰.

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);