CODEWITHSUNDEEP
javascriptopenlayers-3
Raskolnikoov
Raskolnikoov

Reputation: 557

Hide layer or features on zooming in openlayers 3?

Is it possible to hide all features on a layer when zooming occurs? I've tried to set both the visible and opacity properties on the layer itself to now show when zooming. Also i've tried to set style on each feature to 'none' but it dosen't seem to work. I've tried with these two alternatives:

1.

function hideGraphicsFeatures(hide) {
  if(hide) {
     graphicsLayer.setVisible(false);
  } else {
     graphicsLayer.setVisible(true);
  }
  map.render();

}

2.

function hideGraphicsFeatures(hide) {
  var features = graphicsLayer.getFeatures();
  if(hide) {
     for (var i = features.length - 1; i >= 0; i--) {
           features[i].style.display = 'none';
     };
  } else {
     for (var i = features.length - 1; i >= 0; i--) {
           features[i].style.display = ''; // show. Set to anything but 'none'
     };
  }
  map.render();

}

Upvotes: 0

Views: 6022

Answers (3)

xcbx
xcbx

Reputation: 26

I believe I know what you are looking for. I had to do something similar to improve the zoom/pan performance when tens of thousands of features on many layers were displayed on the map. For panning I set the layers' visibility to false when the first map 'pointerdrag' event is triggered and set them back to visible in the 'moveend' event (you may need some additional handling to avoid redundant actions and data reloads).

For zooming it is a bit trickier but fortunately you can override the ol.interaction.MouseWheelZoom handler by using a custom function: 

ol.interaction.MouseWheelZoom.handleEvent = myFunction(evt){
  // here you set the layers to invisible and set the new map zoom level
  // based on the event's wheel value...
}

After that in the 'zoomend' event handler you make the layers visible. If you just use buttons to zoom in/out then it's easy to hide/show the layers. It worked for me and it is a good workaround in some situations.

Upvotes: 1

td-edge
td-edge

Reputation: 588

Try:

function zoomChanged() {
   zoom = map.getZoom();
   if (zoom >=15) {
      graphicsLayer.setVisibility(true);
   }
   else if (zoom < 15) {
      graphicsLayer.setVisibility(false);
   }
}

And then call that function using:

map.events.register("zoomend", map, zoomChanged);

Where "map" is the variable of your map initialization. Combined, these toggle a layer's visibility on and off based on your zoom level. If that's not exactly what you're going for, you could use a different indicator in the if/else block. I think you were just missing the event handler.

Upvotes: 1

Eru
Eru

Reputation: 51

maybe you can do this one. But, sorry if this can't help you.

function showGraphic () { $('#Graphic1').hide(); $('#Graphic2').show(2000); $('#Graphic3').hide(); $('#Graphic4').hide(); }

Upvotes: -1

Related Questions