LayerList 小部件中可见的单层 (ArcGIS JavaScript)

Question

在此 ESRI tutorial LayerList 小部件中，是否可以在地图上显示单个图层？

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

米歇尔

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

Answer 2

更新了 API 版本 4 的答案。可以使用 2 个功能在创建小部件时添加功能。

listItemCreatedFunction函数-

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#listItemCreatedFunction

根据 api:

Specifies a function that accesses each ListItem. Each list item can be modified according to its modifiable properties. Actions can be added to list items using the actionsSections property of the ListItem.

和操作项属性-

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#operationalItems

根据 api:

A collection of ListItems representing operational layers.

var LayerListWidget = new LayerList({
      listItemCreatedFunction: (event) => {
        var itemView = event.item; // layer-view of selection
        itemView.watch("visible", (event) => {
          LayerListWidget.operationalItems.forEach((layerView) => {
            if (layerView.layer.id != itemView.layer.id) {
              layerView.visible = false;
            }
          });
        });
      },
      view: view,
    });

LayerList 小部件中可见的单层 (ArcGIS JavaScript)

Single layer visible in LayerList widget (ArcGIS JavaScript)

widget

layer-list

arcgis-js-api

esri-maps