在 OpenLayers 中一次只显示一层答案

【问题标题】：Only show one layer at a time in OpenLayers在 OpenLayers 中一次只显示一层
【发布时间】：2021-04-12 14:56:42
【问题描述】：

我在 OpenLayers 中有两个叠加层，我不希望它们同时显示。这是我正在使用的代码，因此当有人使用图层切换器时，另一层会关闭。问题是这段代码再次触发了“changeLayer”事件监听器，函数隐藏了两个层。

还有其他方法可以强制用户一次只查看一个图层吗？理想情况下，我希望图层切换器框中的单选按钮而不是复选框。

var mapLayerChanged = function(event) {
  if (event.layer.name == "Sea Cells") {
    $('.toolbar .view-options').show();

    map.layers[1].setVisibility(false);
  } else if (event.layer.name == "Coast Cells") {
    $('.toolbar .view-options').hide();

    map.layers[2].setVisibility(false);
  }
}

map = new OpenLayers.Map( {
  div : 'map',
  panDuration : 100,
  numZoomLevels : 18,
  maxResolution : maxResolution,
  maxExtent : maxExtent,
  displayProjection : new OpenLayers.Projection( "EPSG:2193" ),
  controls : [],
  eventListeners: {
    "changelayer" : mapLayerChanged
  }
} );

【问题讨论】：

标签： javascript openlayers

【解决方案1】：

根据http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html上changeLayer的定义

换层

在图层名称更改、顺序更改、不透明度更改、参数更改、可见性更改（实际可见性，而不是图层的可见性属性）或属性更改（由于范围更改）后触发。侦听器将接收具有图层和属性属性的事件对象。 layer 属性将是对已更改图层的引用。属性属性将是更改属性（名称、顺序、不透明度、参数、可见性或属性）的键。

所以，

由于此事件会因各种类型的属性更改（如图层名称更改、顺序更改、不透明度更改等）而触发，您必须添加条件以检查当前事件是否因图层可见性属性的更改而被触发只要。可以通过property属性验证。
此方法将在您更新可见性时触发，因此在您显示图层以及隐藏图层时都会触发该方法；由map.layers[1].setVisibility(false); 行触发

下面的代码可以解决你的问题，

function mapLayerChanged(event){
    if(event.property = "visibility"){
        if (event.layer.name == "Sea Cells") {
            if(event.layer.getVisibility()){
                $('.toolbar .view-options').show();
                map.getLayersByName("Coast Cells")[0].setVisibility(false);
            }
        } else if (event.layer.name == "Coast Cells") {
            if(event.layer.getVisibility()){
                $('.toolbar .view-options').hide();
                map.getLayersByName("Sea Cells")[0].setVisibility(false);
            }
        }
    }
}

它首先检查是否仅因为可见性变化而触发事件（通过event.property == "visibility" 条件），并且仅当当前图层的可见性为真时才会触发（通过 event.layer.getVisibility() 条件）

以上代码应该可以按照您的要求工作。

【讨论】：