레이어 목록 위젯에서 보이는 단일 레이어 (ArcGIS JavaScript)

ESRI tutorial 레이어 목록 위젯에서지도에 단일 레이어를 표시 할 수 있습니까?레이어 목록 위젯에서 보이는 단일 레이어 (ArcGIS JavaScript)

레이어를 클릭 할 때마다 이전 레이어가 비활성화되어야합니다. 따라서지도에는 항상 하나의 레이어 만 있습니다.

미셸

출처

2017-04-17 Michelle

레이어 목록 위젯을 재정의해야합니다. 코드를 확인하겠습니다. –

레이어가 단일 맵 서비스 또는 다중 맵 서비스에서 제공 되나요? 내가 도울 수있는 코드를 제공 할 수 있다면 – Ashraf

안녕하세요 @Ashraf 위에서 언급 한 ESRI 튜토리얼의 코드를 사용하고 싶습니다. 이 맵은 ArcGIS Online 웹 맵 ID를 기반으로합니다. – Michelle

나는 당신을 위해 코드를 작성할 수 있었다. 확인하고 알려주세요 :

<!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>

출처

2017-04-23 18:43:09 Ashraf

멋진. 코드 작성을 배우기 시작 했으므로 매우 유용합니다. 질문에 언급 된 것처럼지도에 항상 하나의 레이어가있을 수 있습니까? 이 시점에서 레이어를 비활성화하고지도에 아무 것도 표시하지 않을 수 있습니다. 이 행동을 막을 수 있습니까? – Michelle

처음에는 레이어를지도 서비스의 가시성으로 가져옵니다. 그럼 그걸 무시하고 싶니? 예를 들어 첫 번째 레이어 만 전환 할 수 있습니다. 이것이 귀하의 질문 인 경우 알려 주시면 코드를 업데이트합니다. 그리고 적어도 하나의 레이어를 유지할 수 있습니다. 귀하의 질문을 확인한 후에 대답을 업데이트 할 것입니다. – Ashraf

안녕하세요 @Ashraf지도 서비스에서 초기 가시성을 무시하고 싶지 않습니다. 목록에서 레이어를 선택하는 동안이 시점에서 선택을 취소하고지도에 레이어가없는 상태로 유지할 수 있습니다. 당신이 항상 하나의 레이어를 가질 수 있도록이 동작을 방지하고 싶습니다. – Michelle

레이어 목록 위젯에서 보이는 단일 레이어 (ArcGIS JavaScript)

답변

관련 문제