仅在OpenLayers中一次显示一个图层

时间:2015-02-17 23:49:16

标签: javascript openlayers

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

1 个答案:

答案 0 :(得分:1)

根据http://dev.openlayers.org/apidocs/files/OpenLayers/Map-js.html

上的changeLayer定义
  

changelayer

     

在图层名称更改,订单更改,不透明度更改,参数更改,可见性更改(实际可见性,而不是图层的可见性属性)或归因更改(由于范围更改)后触发。监听器将接收具有图层和属性属性的事件对象。 layer属性将是对已更改图层的引用。属性属性将是已更改属性的关键(名称,顺序,不透明度,参数,可见性或属性)。

所以,

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

    下面的代码可以解决您的问题,

    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()条件)

    以上代码应符合您的要求。

    希望这个答案可以帮到你。