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?


1 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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.