LayerList 小部件中的单层可见切换ArcGIS JavaScript 4.X

如何解决LayerList 小部件中的单层可见切换ArcGIS JavaScript 4.X

是否可以使用 ArcGIS JavaScript 4.X 在地图上只显示一个图层？

我正在寻找与 4.x 中的 (Single layer visible in LayerList widget (ArcGIS JavaScript)) 完全相同的功能，我能够让它工作一点，但它有一些问题

切换时需要在眼睛图标上单击两次，例如：单击第 1 层，然后单击第 2 层，这只是取消选中第 1 层，我正在寻找单选按钮功能
当前切换适用于图层和子图层，我正在寻找仅用于顶层的切换，子图层应该仅用作复选框。

你能在下面检查我的小提琴吗？

https://jsfiddle.net/skesani/3jacqf0p/2/

    <html>

  <head>
    <Meta charset="utf-8" />
    <Meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <!--
     ArcGIS API for JavaScript,https://js.arcgis.com
     For more information about the widgets-layerlist sample,read the original sample description at developers.arcgis.com.
     https://developers.arcgis.com/javascript/latest/sample-code/widgets-layerlist/index.html
     -->
    <title>LayerList widget | Sample | ArcGIS API for JavaScript 4.19</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />


    <style>
      html,body,#viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }

      .esri-icon-non-visible::before {
        content: "\e612";
      }

      .esri-icon-visible::before {
        content: "\e613";
      }

    </style>

    <script src="https://js.arcgis.com/4.19/"></script>

    <script>
      require([
        "esri/views/MapView","esri/widgets/LayerList","esri/WebMap",'esri/widgets/Expand','esri/widgets/Basemapgallery','esri/layers/GroupLayer','esri/layers/FeatureLayer','esri/core/watchUtils'
      ],function(MapView,LayerList,WebMap,Expand,Basemapgallery,GroupLayer,FeatureLayer,watchUtils) {
        var scene = new WebMap({
          portalItem: {
            id: "2ce3aa115bb044a9af0e73929268975e",visibilityMode: 'exclusive'
          }
        });

        var view = new MapView({
          container: "viewDiv",map: scene,visibilityMode: 'exclusive'
        });
        const basemapgallery = new Basemapgallery({
          view: view,container: document.createElement('div')
        });
        const bgExpand = new Expand({
          view: view,content: basemapgallery,visibilityMode: 'exclusive'
        });
        var layerList = new LayerList({
          listItemCreatedFunction: (event) => {
            let itemView = event.item; // layer-view of selection
            itemView.watch("visible",(event) => {
              layerList.operationalItems.forEach((layerView) => {
                console.log(layerView.title);
                if (layerView.layer.id !== itemView.layer.id) {
                  layerView.visible = false;
                }
              });
            });
          },view: view,});
        const layerListExpand = new Expand({
          view: view,content: layerList,visibilityMode: 'exclusive'
        });
        /* view.when(function () {

             var visibleLayer = view.map.layers.flatten(function(item){
                 return item.layers || item.sublayers;
             });

             if (visibleLayer.items && visibleLayer.items.length > 0) {
                 visibleLayer.items.forEach((item) => {
                     item.visible = item.title === "County";
                 })
             }

             var hideLayer = view.map.layers.flatten(function(item){
                 return item.layers || item.sublayers;
             }).find(function(layer){
                 return layer.title === "County";
             });

             hideLayer.listMode = "hide";

             var layerList = new LayerList({
                 view: view
             });

             const layerListExpand = new Expand({
                 view: view,content: layerList
             });

             // Event listener that fires each time an action is triggered

             layerList.on("trigger-action",function(event) {
                 // The layer visible in the view at the time of the trigger.
                 var visibleLayer =  view.map.layers.flatten(function(item){
                     return item.layers || item.sublayers;
                 }).find(function(layer){
                     return layer.visible === true;
                 });

                 // Capture the action id.
                 var id = event.action.id;
                 console.log(visibleLayer);
             });

             view.ui.add(layerList,"top-right");
         });*/
        scene.when(() => {
            // primaryCare feature layer
            let array = [];
            const visibleLayer = view.map.layers.flatten((item) => {
              return item.layers || item.sublayers;
            });
            if (visibleLayer.items && visibleLayer.items.length > 0) {
              for (const item of visibleLayer.items) {
                array.push(new FeatureLayer({
                  url: item.url,visible: true
                }))
                item.visible = item.title === 'Microsoft Building Footprints - Tiles';
              }
            }
            const hideLayer = view.map.layers.flatten((item) => {
              return item.layers || item.sublayers;
            }).find((layer) => {
              return layer.title === 'Microsoft Building Footprints - Tiles';
            });
            if (hideLayer) {
              hideLayer.listMode = 'hide';
            }

            const myGroupLayer = new GroupLayer({
              title: 'ALL',layers: array,visibilityMode: 'exclusive'
            });
            //  scene.add(myGroupLayer);
            view.ui.add(layerListExpand,'top-right');
            view.ui.add(bgExpand,'top-right');
          })
          .catch((error) => {
            // This function will execute if the promise is rejected
            console.log('error: ',error);
          });

        watchUtils.whenTrue(view,'toggle',(event) => {
          console.log(event);
        });

        // Hide the loading indicator when the view stops updating
        watchUtils.whenFalse(view,(event) => {
          console.log('false',event);
        });

        view.when(function() {

          layerList.on('trigger-action',(event) => {
            alert(event);
            // The layer visible in the view at the time of the trigger.
            const visibleLayer = mapView.map.layers.flatten((item) => {
              return item.layers || item.sublayers;
            }).find((layer) => {
              return layer.visible === true;
            });
            console.log(visibleLayer);
          });
        });


        function defineActions(event) {

          // The event object contains properties of the
          // layer in the LayerList widget.

          var item = event.item;

          // Return the following actions for the GroupLayer.



          // An array of objects defining actions to place in the LayerList.
          // By making this array two-dimensional,you can separate similar
          // actions into separate groups with a breaking line.

          return [
            [{
              title: "Remove Layer",className: "esri-icon-description",id: "delete"
            }]
          ];

        }

      });

    </script>
  </head>

  <body class="calcite">
    <div id="viewDiv"></div>
  </body>

</html>

解决方法

如果有人需要有关此主题的答案，您可能想查看下一次交流-
single-layer-visible-in-layerlist

我已经在那里提出了我的答案 jsfiddle