Loading features from server on tile level and according to zoom level?

Question

I am using openlayers to display a large amount of features in the map. Because the number of features is too large, I cannot load all the features to frontend in one API call. So I want to get features per tile, like TileLayer do. And also, I want to display different feature sets according to zoom level.

I tried following way to do so, but it doesn't work as my expection.

Some grid tile didn't get features when I using tileStrategy in OpenLayers

Is there any better way to achieve my requirement?

One possible solution I think is listen to the map zoom in / zoom out event. Question is, in the event handler, can I get the zoom level and extend?

Answer 1

Like as example.

const vectorSource = new VectorSource({
            features: new GeoJSON().readFeatures(geojsonObject),
        }) ;

        const vectorLayer = new VectorLayer({
            source: vectorSource,      
            style: styleFunction,  // you can get features and set styles feature.
            extent: extent
        });

  function styleFunction (feature) {
        const zooom = map.getView().getZoom();
        current_extent = map.getView().calculateExtent(map.getSize()) ;
        let diff = current_extent[2] - current_extent[0] ;
        let scale = (extent[2] - extent[0]) / diff ;
        
        let real_width = feature.values_.real_size[0] ;
        var width =  feature.values_.size[0] ;

        scale = scale * (width / real_width) ;

        let style = new Style({
            image: new Icon({
              src: '/images/'+feature.values_.name,
              anchor: [0, 0],
              scale: scale
            })
        }) ;

        return style ;
    };

Hope to success!