2

I am using OpenLayers version 6. I want to change the declutter of a vector tile layer by using vecTileLayer.set('decluter',false).

After changing declutter of layer with the set method of vecTileLayer, My map is not updated and nothing changes.

I also used vecTileLayer.getSource().refresh() to refresh layer after setting declutter, but nothing happens.

This is my code:

layer.set('declutter',!layer.get('declutter'));
layer.getSource().refresh()

How should I change declutter of a vector tile layer and see updates on the map?

5
  • Changing constructor options using set() is unlikely to have any effect, only those with bespoke methods such as setSource(), setStyle(), setVisible(), etc. would work. It would be easier to create and add two layers with identical options except for declutter and visible and toggle their visibility using layer.setVisible(!layer.getVisible()).
    – Mike
    Oct 8, 2020 at 15:33
  • Thank you but it seems it is not a standard way! Oct 9, 2020 at 8:43
  • There is no standard way. If it was intended to updateable there would be a setDeclutter() method.
    – Mike
    Oct 9, 2020 at 9:00
  • @Mike It seems this answer is more standard! Oct 9, 2020 at 13:32
  • 2
    Yes, it works but using an internal value not documented in the API isn't good practice and might not work in feature releases. Adding a documented setDeclutter method (for both Vector and VectorTile layers) would be safer.
    – Mike
    Oct 9, 2020 at 19:41

2 Answers 2

2

I opened an issue here, on the GitHub repo of OpenLayers. M393 Answered me a way of changing declutter and it worked truly.

I used this code and it worked truly.

layer.declutter_ = !layer.declutter_;
let source = layer.getSource();
source.refresh()

Also, M393 said, A PR adding the missing setDeclutter(declutter) method with the above code might make sense, unless this causes some problem which I didn't run into when I tried this ....

1

It's refreshing for me. I don't know it's good for your case or not. (zoom filtering just extra.)

    var lyrSource = new VectorTileSource({
        cacheSize: 1,
        format: new MVT(),
        url: 'http://localhost:9080/maps/mapname/:layer/{z}/{x}/{y}.vector.pbf',
    });

    var layer = new VectorTileLayer({
        preload: 0,
        declutter: true,
        title: 'Layer', //optional
        visible: true,  //optional
        source: lyrSource,
        minZoom: 10, //optional
        style: styleFunction
    });

    function refresh() {
        var zoomLevel = map.getView().getZoom(); //optional
        console.log("zoom: " + zoomLevel)  //optional
        if (zoomLevel > 12) {  //optional
            console.log('Time is running: '+ new Date())
            lyrSource.tileCache.expireCache({});
            lyrSource.tileCache.clear();
            lyrSource.refresh();
        } //optional

    }

    setInterval(refresh, 5000)
1
  • Thanks,but I used this code layer.set('declutter',!layer.get('declutter'));let source = layer.getSource(); source.tileCache.expireCache({});source.tileCache.clear();source.refresh(). it's not working. Oct 8, 2020 at 8:31

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.