Avoiding Duplicate Features in Extended TileLayer rendering GeoJsonLayer

[kolpav]

I've created TileLayer with getTileData function that gives back a Promise<FeatureCollection> based on the current tile.bbox.

The issue is, some of the features show up more than once because a single geojson feature might stretch across several tiles and end up included in each of them.

Each feature has a unique id in its properties. Could I use that to get rid of duplicates in each tile or maybe come up with some custom indexing method?

What’s the best way to make sure each feature only gets shown once?

In the drawing below, f3 gets "placed" twice, which becomes apparent when I use alpha/opacity for the fill color. This will then make some polygons brighter than others because there are multiple of them on top of each other.

          tile1        tile2     
      ┌────────────┬────────────┐
      │   f1       │       f2   │
      │  ┌──┐      │ f3    ┌─┐  │
      │  │  │    ┌─┼────┐  └─┘  │
      │  └──┘    │ │    │       │
      │          └─┼────┘       │
      │            │            │
      └────────────┴────────────┘                  

It will end up looking something like this.

Simplified version of my fetching logic

  getTileData(tile: _TileLoadProps): Promise<FeatureCollection> | null {
    const boundingBox = tile.bbox as GeoBoundingBox;
    const data = fetchByBoundingBox(boundingBox);
    return data as Promise<FeatureCollection>;
  }

[Pessimistress]

The basic idea of the TileLayer is that you do not fetch or display data that is out of view. This means that you never return the whole feature when it spans multiple tiles. You are supposed to crop that feature and only return the portion that overlaps with the given bounding box.

Well, that is easier said than done, with a few catches here and there. The generation of tiles is most commonly done on a server, and transmitted with a protocol other than GeoJSON, for example, check out the MVTLayer which extends TileLayer to handle the MVT tile format. If you have to do the tile slicing on the client side, there are tools like geojson-vt. I put together a simple demo here.

[kolpav]

As temporary solution I decided not to use TileLayer instead I am using CompositeLayer to load features for entire viewport bounding box up to specified minZoom with debounce.

But I find geojson-vt really interesting and would like to try it in the future, or generally make my data loading more polished than it is now.

Could you please advise me on what my options are, given that I am working with the ArcGIS REST API, which returns data only via Query? This method basically accepts a bounding box (features can extend out of it) and an output format (geoJSON, PBF, KMZ), so loading all data in advance to then operate on it is not possible. I think just being able to display the PBF format somehow would be enough for my use case.