用于javacsript的arches api Highlight SceneLayer

如何解决用于javacsript的arches api Highlight SceneLayer

我正在为此：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=highlight-scenelayer
我要做的就是通过我自己的Web场景图层进行更改 id：6f62d44db62248f79520fa5f33757b19
，我想在面板侧显示我的comment属性层但是我失败了~~~~
<!DOCTYPE html>
<html>
  <head>
    <Meta charset="utf-8" />
    <Meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Highlight SceneLayer | Sample | ArcGIS API for JavaScript 4.17
    </title>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.17/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.17/"></script>
    <script>
      require([
        "esri/WebScene","esri/views/SceneView","esri/tasks/support/Query","esri/widgets/Legend"
      ],function (WebScene,SceneView,Query,Legend) {
        // Load webscene from portal item
        var webscene = new WebScene({
          portalItem: {
            // autocasts as new PortalItem()
            id: "6f62d44db62248f79520fa5f33757b19"
          }
        });

        // Create a view and set the highlight options
        var view = new SceneView({
          container: "viewDiv",map: webscene,qualityProfile: "high",environment: {
            lighting: {
              directShadowsEnabled: false,ambientOcclusionEnabled: true
            }
          },highlightOptions: {
            color: [0,255,255],fillOpacity: 0.6
          }
        });

        // This variable will store the highlight handle that is used to remove the highlight
        var highlight = null;

        view.when(function () {
          // Get layer from webScene
          var officeSceneLayer = webscene.allLayers.filter(function (elem) {
            return elem.title === "Comment";
          }).items[0];
          // define the attributes which are used in the query
          officeSceneLayer.outFields = ["OBJECTID","Comment"];

          // Get DOM element where list items will be placed
          var container = document.getElementById("roomsList");

          // Highlight is set on the layerView,so we need to detect when the layerView is ready
          view.whenLayerView(officeSceneLayer).then(function (officeLayerView) {
            // Wait for the layer view to finish updating
            officeLayerView.watch("updating",function (val) {
              if (!val) {
                // Query the features available for drawing and get all the attributes
                var query = new Query();
                officeLayerView.queryFeatures(query).then(function (result) {
                  // Empty the list DOM element
                  container.innerHTML = "";
                  // For each returned feature that is of type office create a list item and append it to the container
                  result.features.forEach(function (feature) {
                    var attributes = feature.attributes;
                    // We only want to add features of type Office to the list
                    if (attributes.Comment === "TYPE") {
                      // Create list element
                      var li = document.createElement("li");
                      li.setAttribute("class","panel-result");
                      //li.innerHTML = attributes.OBJECTID;
                      li.addEventListener("click",function (event) {
                        var target = event.target;
                        var objectId = feature.attributes.OBJECTID;
                        // Create an extent query on the layer view that will return the 3D extent of the feature
                        var queryExtent = new Query({
                          objectIds: [objectId]
                        });
                        officeLayerView
                          .queryExtent(queryExtent)
                          .then(function (result) {
                            // Zoom to the extent of the feature
                            // Use the expand method to prevent zooming in too close to the feature
                            if (result.extent) {
                              view
                                .goTo(result.extent.expand(7),{
                                  speedFactor: 0.5
                                })
                                .catch(function (error) {
                                  if (error.name != "AbortError") {
                                    console.error(error);
                                  }
                                });
                            }
                          });
                        // Remove the prevIoUs highlights
                        if (highlight) {
                          highlight.remove();
                        }
                        // Highlight the feature passing the objectId to the method
                        highlight = officeLayerView.highlight([objectId]);
                      });
                      container.appendChild(li);
                    }
                  });
                });
              }
            });
          });
        });

        // Add a legend to the sample
        var legend = new Legend({
          view: view
        });
        view.ui.empty("top-left");
        view.ui.add(legend,"bottom-left");
      });
    </script>
    <style>
      html,body,#viewDiv {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }

      .panel-side {
        width: 200px;
        position: absolute;
        top: 14px;
        right: 14px;
        bottom: 28px;
        color: #323232;
        background-color: rgb(255,255);
        Box-shadow: 0 1px 2px rgba(0,0.3);
        overflow: auto;
        z-index: 60;
        font-size: 12px;
        text-align: center;
      }

      .panel-side h2 {
        padding: 0 20px;
        margin: 20px 0;
        font-size: 14px;
        font-weight: 600;
      }

      .panel-side ul {
        list-style: none;
        margin: 0;
        padding: 0;
        font-weight: 100;
      }

      .panel-side li {
        list-style: none;
        padding: 3px 10px;
      }

      .panel-result {
        cursor: pointer;
        margin: 2px 0;
      }

      .panel-result:hover,.panel-result:focus,.panel-result.selected {
        background-color: rgba(200,200,0.6);
      }
    </style>
  </head>

  <body>
    <div id="li"></div>
    <div class="panel-side esri-widget">
      <h2>Office rooms</h2>
      <ul id="roomsList">
        <li>Loading&hellip;</li>
      </ul>
    </div>
    <div id="viewDiv"></div>
  </body>
</html>