2017-04-17 108 views
0

是否可以在此ESRI tutorial LayerList小部件中的地图上显示单个图层?在LayerList小部件中可见的单层(ArcGIS JavaScript)

每次点击一个图层时,前一个图层应该停用。所以你在地图上总是只有一层。

米歇尔

enter image description here

+0

需要重写layerlist插件...让我检查代码.. –

+0

执行层来自单个地图服务或多个的呢?如果你可以提供代码,我可以帮助 – Ashraf

+0

您好@Ashraf我想使用上面提到的ESRI教程中的代码。该地图基于ArcGIS Online网络地图标识。 – Michelle

回答

1

我设法写代码你。检查它,让我知道:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
<title>Layer List Dijit</title> 
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css"> 
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css"> 
<script language="javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<style> 
html, body, .container, #map { 
height:100%; 
width:100%; 
margin:0; 
padding:0; 
margin:0; 
font-family: "Open Sans"; 
} 
#map { 
padding:0; 
} 
#layerListPane{ 
width:25%; 
} 
.esriLayer{ 
    background-color: #fff; 
} 
.esriLayerList .esriList{ 
    border-top:none; 
} 
.esriLayerList .esriTitle { 
    background-color: #fff; 
    border-bottom:none; 
} 
.esriLayerList .esriList ul{ 
    background-color: #fff; 
} 

</style> 
<script>var dojoConfig = { parseOnLoad: true };var busy=false;</script> 
<script src="https://js.arcgis.com/3.20/"></script> 
<script> 
require([ 
"esri/arcgis/utils", 
"esri/dijit/LayerList", 
"dijit/layout/BorderContainer", 
"dijit/layout/ContentPane", 
"dojo/domReady!" 
], function(
arcgisUtils, 
LayerList 
) { 
//Create a map based on an ArcGIS Online web map id 
arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response){ 
    var myWidget = new LayerList({ 
     map: response.map, 
     layers: arcgisUtils.getLayerList(response) 
    },"layerList"); 

    myWidget.on("toggle",function(evt){ 
     if(busy) return; 

     selectedLayerSubIndex = evt.subLayerIndex; 
     if(selectedLayerSubIndex) return; 

     selectedLayerIndex = evt.layerIndex; 
     visibility = evt.visible; 

     elm = $("#layerListPane input[type=checkbox][data-layer-index="+selectedLayerIndex+"]:not([data-sublayer-index])"); 


     otherCheckedElems = $("#layerListPane input[type=checkbox][data-layer-index!="+selectedLayerIndex+"]:not([data-sublayer-index]):checked"); 
     if(visibility){ 
      busy=true; 
      otherCheckedElems.each(function() { 
       $(this).click(); 
      }); 
      busy=false; 
     } 
     else{ 
      checkedLength = otherCheckedElems.length 
      if(checkedLength==0) setTimeout("elm.click();", 100); 
     } 
    }) 

    myWidget.startup(); 
}); 

}); 
</script> 
</head> 
<body class="claro"> 
<div class="container" data-dojo-type="dijit/layout/BorderContainer" 
data-dojo-props="design:'headline',gutters:false"> 
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'"> 
    <div id="layerList"></div> 
</div> 
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div> 
</div> 
</body> 
</html> 
+0

可爱的。刚开始学习代码,对我非常有用。是否有可能在地图上始终有一层(如问题中提到的那样)?此时,您可以取消激活图层,并且在地图上没有任何图层;这种行为可以防止吗? – Michelle

+0

最初,您会在图层服务中获取图层作为其可见性。那么你想重写呢?你可以例如只切换第一层。如果这是你的问题,请让我知道,所以我更新代码。 而且肯定可以保留至少一层。将在确认您的问题后再更新答案。 – Ashraf

+0

嗨@Ashraf我不想覆盖地图服务的初始可见性。从列表中选择图层时,此时您也可以取消选择该图层,并保留地图上的任何图层。我想阻止这种行为,所以你总是有一层。 – Michelle