OpenLayers Show and Hide Layers

You can toggle any feature layer in OpenLayers, Here we have mentioned the following step you can follow to show or hide any feature layer. Assuming you have already created a map and added layers to it, you can control the visibility of a layer like this

First setup your vector source and vector layer class with your current map instance

import {VectorSource , VectorLayer} from 'ol/source';

class Map {
      constructor (){
      this.vectorSource = VectorSource({wrapX: false});
      this.vectorLayer = new VectorLayer({
  		source: vectorSource
      })
    }
    toggleLayer(show){
      if(show){
        this.vectorLayer.setVisible(true);
      } else {
        this.vectorLayer.setVisible(false);
      }
    }
  }
    

In this example, the toggleLayer() the function takes a parameter (show ‘which’ is type boolean) and toggles its visibility using the setVisible() method. You can call this function whenever you want to show or hide a specific layer.

For More Info Visit – Openlayer official documentation https://openlayers.org/

Happy Coding ☺️

Setup OpenLayers in Angular | Step By Step