javascript - Openlayers 4 - 使图层在功能点击时不可见

Question

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

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 图层中的一个要素， map 将放大并以该要素的位置为中心，这将使 exampleLayer1 消失而 exampleLayer2 可见。为此，我使用了这个函数:

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 之外点击它就会消失。

如何让layer(包括点击的feature)在点击feature时不可见？

Answer 1

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

这就是为什么即使底层不可见，所选特征也是可见的。

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

我还建议您使用层的最小/最大分辨率(参见 http://openlayers.org/en/latest/apidoc/ol.layer.Base.html)来切换层的可见性。