Openlayers 4 - Make layer invisible on feature click

问题

I have a map with 2 layer's containing features (markers). I have made it so that if the map is zoomed in far enough, 1 layer will become invisible and the other will become visible (and vise versa). Like this:

this.map.getView().on('propertychange', (e: any) => {
  if (e.key == "resolution") {
    if (this.map.getView().getZoom() >= 17) {
      exampleLayer1.setVisible (false);
      exampleLayer2.setVisible (true);
    } else if(this.map.getView().getZoom() < 17) {
      exampleLayer2.setVisible (false);
      exampleLayer1.setVisible (true);
    }
  }
})

What I now need to add is that if you click on a feature in the exampleLayer1 layer, the map would zoom in and center on the location of that feature, which would make the exampleLayer1 disappear and exampleLayer2 visible. For this, I use this function:

var select_interaction = new ol.interaction.Select();

select_interaction.getFeatures().on("add", (e: any) => {
  var feature = e.element;
  this.map.getView().setCenter(feature.getGeometry().getCoordinates())
  this.map.getView().setZoom(17);
});

this.map.addInteraction(select_interaction);

Almost everything works fine, meaning one layer will disappear and the other will appear. However, the feature clicked on will not disappear, even though it's parent (the layer) does disappear. If I then click away from the feature it will disappear.

How could I make it the layer (including the feature clicked on) will become invisible when the feature is clicked?

回答1:

The ol.interaction.Select selected features are added to an internal unmanaged layer.

This is why the selected feature is visible even if the underlying layer is not.

You could unselect the selected features while you zoom on it using select_interaction.getFeatures().clear() (just like clicking away).

I also suggest you to use layer's min/maxResolutions (see http://openlayers.org/en/latest/apidoc/ol.layer.Base.html ) to toggle layers visibility.

来源：https://stackoverflow.com/questions/43998187/openlayers-4-make-layer-invisible-on-feature-click

标签

javascript

typescript

OpenLayers