首页 文章

Openlayers 4 - 在要素点击时使图层不可见

提问于
浏览 次
1

我有一张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 图层中的 feature ， 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 它就会消失 .

单击 feature 时，如何使 layer （包括 feature 点击）变为不可见？

javascript typescript openlayers

1 回答

  • 4

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

    这就是所选特征即使底层不可见也是可见的原因 .

    您可以在使用select_interaction.getFeatures（） . clear（）进行缩放时取消选择所选要素（就像点击一样） .

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

    回复于

相关问题