OpenLayers 6 : populate Source Vector from multiple geoJson depending on current coordinates

Question

I have multiple GeoJson (based on OSM data) that are stored locally, one for each region of a country. I'm using OpenLayers and I would like to display relevant features of those GeoJson (for instance 10 features max) based on the current view of a map (+ zoom level).

Is there an easy way to populate my vector Source from those multiple GeoJson (loader function) ? It would be like creating my own BBOX strategy (for instance : displaying 10 features at a time in my current box) but instead of collecting data from a remote server, the data would need to be fetched from my local GeoJson.

I've been trying to make my own loader function which loop on all my Geojson features coordinates and compare them to my current box coordinates to populate the source but it's definitely not efficient. I'm not looking for Cluster solution as this would imply to pre-load all the GeoJson first.

Answer 1

Do not reinvent the wheel and use vector tiles - this is precisely what they are for. geojson-vt - https://github.com/mapbox/geojson-vt - can transform a GeoJSON to vector tiles on the fly.

If you don't want to run code on the server, you can use the VectorTile class and implement your own tileLoadFunction.

Or you can simply hook yourself to the map view and manually load the features - but frankly I do not recommend it.