OpenLayers bbox strategy does not work when zoom in

Question

I am using OpenLayers 6 vector source and bbox loading strategy.

this.source = new VectorSource({
  format: new EsriJSON(),
  strategy: bbox,
  loader: this.loader(layer)
});

So, when I open tha app first, it appears in 14 zoom level. The data is loading at first. But when I zoom in, the data does not refresh? My ArcGIS Server serves maximum 1000 feature in an extent. When I zoom in, the other unloaded data should be load and map data should be refresh. But does not work. Why?

Answer 1

All the predefined loading strategies have the same problem - once an extent is loaded any extents fully contained by it will also be considered loaded. You will need a custom strategy which removes those extents, which is best done based on the logic for a tile strategy https://github.com/openlayers/openlayers/blob/main/src/ol/loadingstrategy.js#L41

  strategy: function(extent, resolution) {
    const tileGrid = createXYZ({
      tileSize: 512
    });
    const z = tileGrid.getZForResolution(resolution);
    const tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z);
    const extents = [];
    const tileCoord = [z, 0, 0];
    for (
      tileCoord[1] = tileRange.minX;
      tileCoord[1] <= tileRange.maxX;
      ++tileCoord[1]
    ) {
      for (
        tileCoord[2] = tileRange.minY;
        tileCoord[2] <= tileRange.maxY;
        ++tileCoord[2]
      ) {
        extents.push(tileGrid.getTileCoordExtent(tileCoord));
      }
    }
    if (z > tileGrid.getMinZoom()) {
      const tileRange = tileGrid.getTileRangeForExtentAndZ(extent, z - 1);
      const tileCoord = [z - 1, 0, 0];
      for (
        tileCoord[1] = tileRange.minX;
        tileCoord[1] <= tileRange.maxX;
        ++tileCoord[1]
      ) {
        for (
          tileCoord[2] = tileRange.minY;
          tileCoord[2] <= tileRange.maxY;
          ++tileCoord[2]
        ) {
          this.removeLoadedExtent(tileGrid.getTileCoordExtent(tileCoord));
        }
      }
    }
    return extents;
  }

Compare the effect of zooming in and getting more detail in https://codesandbox.io/s/vector-esri-64j7f with the original example https://openlayers.org/en/latest/examples/vector-esri.html which uses the standard strategy.