更新する方法、ブリンクすることなくグリッドレイヤーを再描画する

Question

私の質問は、ちょっと変わった "点滅"効果なしでリーフレットのグリッドレイヤーを更新する方法です。

私はキャンバスにgeojsonを表示するのにLeaflet.VectorGridを使用します。 問題は、データが更新されたためにレイヤを再描画したいときです。 私は層再描画するためにそのコードを使用します。

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