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

Question

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

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

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

你能在下面查看我的 fiddle 吗？

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, 'toggle', (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>

Answer 1

如果有人需要关于这个话题的答案，您可能想查看下一个交换-

我已经在其中提出了我的答案 jsfiddle

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

Single layer visible (toggle) in LayerList widget (ArcGIS JavaScript 4.X)

javascript

arcgis

layer

arcgis-js-api