Openlayers 4 - 在功能点击时使图层不可见 [英] Openlayers 4 - Make layer invisible on feature click

问题描述

我有一张地图，其中包含 2 个 layer，其中包含 features(标记).我已经这样做了，如果地图放大到足够远，1 layer 将变得不可见，而另一个将变得可见(反之亦然).像这样:

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);
    }
  }
})

我现在需要补充的是，如果您单击 exampleLayer1 图层中的 feature，地图将放大并以该要素的位置为中心，这将使 exampleLayer1 消失而 exampleLayer2 可见.为此，我使用此功能:

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);

几乎一切正常，这意味着一个 layer 将消失而另一个将出现.但是，点击的 feature 不会消失，即使它的父级(layer)确实消失了.如果我点击离开 feature 它就会消失.

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.

我怎样才能让 layer(包括点击的 feature)在 feature 被点击时变得不可见?

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

推荐答案

ol.interaction.Select 选择的功能被添加到内部非托管层.

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.

您可以在使用 select_interaction.getFeatures().clear() 放大时取消选择选定的特征(就像点击离开一样).

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

我还建议您使用层的 min/maxResolutions(参见 http://openlayers.org/en/latest/apidoc/ol.layer.Base.html ) 切换图层可见性.

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.

这篇关于Openlayers 4 - 在功能点击时使图层不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！