JavaScript API 中基于场景的 Web 场景答案

【问题标题】：Scenario based Web Scene in JavaScript APIJavaScript API 中基于场景的 Web 场景
【发布时间】：2021-12-09 17:38:19
【问题描述】：

我正在开发一个网络应用程序，我必须根据他们的要求向我的管理层展示不同的场景。

目前，我实现的是能够创建有时间限制的网络场景，但现在我想保存所有这些场景，例如场景 A、场景 B 等，它们将描绘一天中的不同时间。另外，我想看看任何特定的土地或财产对太阳运动有什么影响。但是在我的代码中，我可以创建如下场景，但是当我尝试创建第二个场景时，它给了我错误。

有什么建议吗？？

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.21/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.21/"></script>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #selection {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        display: flex;
        justify-content: center;
      }

      .esri-button {
        max-width: 300px;
        margin-left: 5px;
      }

      .esri-button--secondary {
        background-color: white;
      }
    </style>

    <script>
      require([
        "esri/WebScene",
        "esri/views/SceneView",
        "esri/widgets/ShadowCast"
      ], function (WebScene, SceneView, ShadowCast) {
        const view = new SceneView({
          container: "viewDiv",

          map: new WebScene({
            portalItem: {
              id: "f2220db76c6448b4be8083d19ef4cf8d"
            }
          }),

          qualityProfile: "high",
          environment: {
            lighting: {
              directShadowsEnabled: false
            }
          }
        });

        const widget = new ShadowCast({ view });
        view.ui.add(widget, "top-right");
        widget.viewModel.date = new Date("May 1, 2021");

        let scenarioA = null;
        let scenarioB = null;

        view.when(() => {
          view.map.allLayers.forEach((layer) => {
            if (layer.title === "Development Scenario A") {
              scenarioA = layer;
            }
            if (layer.title === "Development Scenario B") {
              scenarioB = layer;
            }
          });
        });


        buttonA.addEventListener("click", (event) => {
          toggleScenarios("A");
        });

        buttonB.addEventListener("click", (event) => {
          toggleScenarios("B");
        });

        function toggleScenarios(active) {
          scenarioA.visible = active === "B" ? false : true;
          scenarioB.visible = active === "B" ? true : false;
          if (active === "B") {
            buttonA.classList.add("esri-button--secondary");
            buttonB.classList.remove("esri-button--secondary");
          }
          if (active === "A") {
            buttonA.classList.remove("esri-button--secondary");
            buttonB.classList.add("esri-button--secondary");
          }
        }
      });
    </script>
  </head>

  <body>
    <div id="viewDiv">
      <div id="selection">
        <button id="scenarioA" class="esri-button">Scenario A</button>
        <button id="scenarioB" class="esri-button esri-button--secondary">
          Scenario B
        </button>
      </div>
    </div>
  </body>
</html>

【问题讨论】：

标签： javascript arcgis arcgis-js-api arcgis-server

【解决方案1】：

我想你只是忘了定义 buttonA 和 buttonB 变量。在将它们绑定到click 事件之前，这样的东西就足够了，

const buttonA = document.getElementById("scenarioA");
const buttonB = document.getElementById("scenarioB");

【讨论】：