Openlayers 3中的层排序(z-index)

时间:2015-08-07 09:39:45

标签: openlayers-3

我有一个地图应用程序,我有层树。当我单击图层时,我希望所有图层顶部都有最新点击的图层。

当我逐个单击图层时,此工作正常。但是,如果我关闭图层并再次打开它,那么它就不会出现在顶部。

我不知道我做错了什么。

任何帮助人员:))

我已将我正在使用的功能附加到我的应用程序中:

//this is the function when a checkbox is checked.
var AddLayerToSettings = function(layerName){
  var num = layerVisibleCount();
  if (layerName == "AH42Road"){
    if(num==0){//checking if there are any layers added before or not
      map.getLayers().insertAt(1, road_AH42);
    }else{
      layerOrderingWhenClicked();                   
    }
    $("#AH42RoadLayer").show();                 
    $( ".column" ).prepend( $( "#AH42RoadLayer" ) );                                        
  }

  if(layerName == "districtsboundary"){
    if(num==0){//checking if there are any layers added before or not
      map.getLayers().insertAt(1, districtsBoundary);
    } else {
      layerOrderingWhenClicked();                   
    }
    $("#districtsboundarylayer").show();
    $( ".column" ).prepend( $( "#districtsboundarylayer" ) );
  }
  if(layerName == "developmentregions"){
    if(num==0){//checking if there are any layers added before or not
      map.getLayers().insertAt(1, developmentRegions);
    }else{
      layerOrderingWhenClicked();                   
    }
    $("#developmentregionslayer").show();
    $( ".column" ).prepend( $( "#developmentregionslayer" ) );
  } 
};

var layerOrderingWhenClicked = function(){
  var zIndex = 1;
  for(i=0; i<selectedLayers.length; i++){
    if(selectedLayers[i] == "districtsBoundary"){
      map.getLayers().insertAt(zIndex, districtsBoundary);          
    }
    if(selectedLayers[i] == "road_AH42"){
      map.getLayers().insertAt(zIndex, road_AH42);
    }
    if(selectedLayers[i] == "developmentRegions"){
      map.getLayers().insertAt(zIndex, developmentRegions);
    }
    zIndex++;
  }
};

1 个答案:

答案 0 :(得分:0)

不是一个完整的答案,但问题的一部分是不一致的层命名。 这是一个重写,其中方法更独立于数据....

var specialLayers = {
  "road_AH42": { 
    "layer" : road_AH42,
    "id": "#AH42RoadLayer"
  },
  "districts_AH42": { 
    "layer" : districtsBoundary,
     "id": "#districtsBoundarylayer"
  },
  "developmentRegions": { 
    "layer" : developmentRegions, 
     "id": "#developmentregionslayer"
  }
};

var AddLayerToSettings = function(layerName){
  var layerData;
  var num = layerVisibleCount();
  if (specialLayers.hasOwnProperty( layerName)) {
    layerData = specialLayers[layerName];
    if (num == 0) {
       map.getLayers().insertAt(1, layerData.layer);
    } else {
      layerOrderingWhenClicked();
    }
    $(layerData.id).show();                 
    $( ".column" ).prepend( $( layerData.id ) );      
  }
};

var layerOrderingWhenClicked = function(){
  var zIndex = 1;
  var i, layerData;
  // selectedLayers scope unknown here...
  for(i=0; i<selectedLayers.length; i++){
    if (specialLayers.hasOwnProperty( selectedLayers[i]) {
      layerData = specialLayers[selectedLayers[i]];
      map.getLayers().insertAt(zIndex, layerData.layer);          
    }
    zIndex++;
  }
};

由于您没有显示其余代码,我不确定您是否正在插入可能已在地图中的图层;请检查。