Old Tiles Remain Drawn with client-side Rendering on BaseTileLayer

RyanSutcliffe

I have been working on setting up client-side rendering for Raster-based layers. I've created a customized BaseTileLayer where I can change the filter of the data client-side. However sometimes old tiles of data persist.

Example:

This codepen is a rough example that demonstrates the issue.

Set threshold to something like 3400. Zoom in a bit. Set threshold to 400. Zoom out. See old filter applied still for certain tiles.

This is not a new issue. I initially noted this problem here in another post. I also posted about similar problems occuring when changing the colors client-side on a renderer for a ImageryTileLayer. 

I've raised the issue to ESRI Technical support but we were unable to resolve the issue. At that time I thought it would be sufficient for my needs to ensure that the MapView was fully drawn and stationary before letting the user adjust the styles. But that turns out not to be acceptable from a client standpoint. 

Does anyone know if there is something that can be done to prevent this while still allowing client-side rendering and adjustments?

RyanSutcliffe

A very late response to an old post, but the trick I recently found that, so far, has gotten around this problem well is to hold off calling .refresh until after the layer has finished loading:

So the setThreshold function in the codepen becomes something like:

function layerCompletelyDrawnAndVisible(layer, view) {
  let [watchUtils] = await loadModules(["esri/core/reactiveUtils"]);
  let layerView = await view.whenLayerView(layer);
  let layerId = await new Promise((resolve) => {
    if (layerView.updating) {
      watchUtils.when(
        () => !layerView.updating,
        () => {
          return resolve(layer.id);
        },
        {
          once: true,
        }
      );
    } else return resolve(layer.id);
  });
  return layerId;
}

function setThreshold() {
    thresholdVal = parseInt(threshold.value);

    let { colors, stops } = getRasterStopsAndColors(
      5000,
      thresholdVal,
      seedColors
    );
    //lercLayer.max = 3000;
    lercLayer.threshold = thresholdVal;
    lercLayer.stops = stops;
    lercLayer.colors = colors;

    //lercLayer.refresh();
    layerCompletelyDrawnAndVisible(lercLayer, view).then(v => lercLayer.refresh())
  }
  // <a href="https://community.esri.com/t5/user/viewprofilepage/user-id/69004">@ts</a>-ignore
  threshold.addEventListener("change", setThreshold);

that seems to deal with the problem nicely!