我正在开发一个web应用程序，我必须根据他们的要求显示我的管理不同的场景。
目前，我所取得的成就是我能够创建有时间限制的网络场景，但现在我想保存所有这些场景，如场景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>我想你只是忘了定义buttonA和buttonB变量。像这样，在将它们绑定到click事件之前，应该足够了，
const buttonA = document.getElementById("scenarioA");
const buttonB = document.getElementById("scenarioB");