Jak zaktualizować, przerysować warstwę siatki bez migania

Question

Moje pytanie brzmi: jak zaktualizować moją warstwę siatki w ulotce bez dziwnego efektu "mrugnięcia".

Używam Leaflet.VectorGrid do wyświetlania geojsona na płótnie. Problem polega na tym, że chcę przerysować moją warstwę, ponieważ moje dane zostały zaktualizowane. używam tego kodu, aby przerysować warstwy:

tileLayer.redraw(); 

Kiedy zostały przy użyciu tej funkcji, mój warstwa znika na chwilę, a potem okazuje się, ze zmienionymi danymi. Efekt końcowy jest ładny, ale pytanie brzmi:

Jak wyeliminować ten moment, gdy mapa jest "pusta"?

Chcę przerysować moją warstwę, bez tego dziwnego momentu, gdy przez kilka milisekund warstwa jest wolna.

Answer 1

Wiem, że to dobrze po fakcie, ale znalazłem twoje pytanie, kiedy szukałem rozwiązania. W końcu dostałem coś, co działa i chciałem włączyć to tutaj, na wypadek, gdyby nadal występowały problemy lub inne problemy wystąpiły.

Znalazłem kilka odpowiedzi, które mówiły o wyświetlaniu twoich wyników na wielu warstwach, a następnie usuwaniu starych warstw "po pewnym czasie", ale to nie było dla mnie czyste. Korzystając z wydarzeń ulotnych, znalazłem rozwiązanie, które podąża za duchem tych odpowiedzi, ale nadal jest czyste. Używam vectorGrid.slicer do tworzenia mojej siatki, więc zamień ją na cokolwiek, czego używasz do utworzenia warstwy siatki.

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