This sample demonstrates how to create ViewshedAnalysis with Viewsheds and how to add them to a scene programmatically and interactively.
// Create the viewshed shape programmatically
const viewshed = new Viewshed({
observer: {
spatialReference: {
latestWkid: 3857,
wkid: 102100
},
x: -9754426,
y: 5143111,
z: 330
},
farDistance: 900, // In meters
tilt: 80, // Tilt of 0 looks down, tilt of 90 looks parallel to the ground, tilt of 180 looks up to the sky
heading: 60, // Counted clockwise from North
horizontalFieldOfView: 85,
verticalFieldOfView: 45
});
// Initialize viewshed analysis with the created viewshed shape and add it to the view.
const viewshedAnalysis = new ViewshedAnalysis({
viewsheds: [viewshed]
});
view.analyses.add(viewshedAnalysis);
The sample also shows how to create a custom UI element to interactively add new viewsheds or edit existing ones. For this, it uses the createViewsheds method on the analysis view. Here's a simplified version of how to set up such a custom component:
// Add interactivity to the custom UI component's buttons.
const createButton = document.getElementById("createButton");
const cancelButton = document.getElementById("cancelButton");
// Controller which allows to cancel an ongoing viewshed creation operation.
let abortController = null;
createButton.addEventListener("click", () => {
view.whenAnalysisView(viewshedAnalysis).then((viewshedAnalysisView) => {
// Create a new abort controller for the new operation.
abortController = new AbortController();
// Pass the controller as an argument to the interactive creation method.
viewshedAnalysisView.createViewsheds(abortController);
});
});
cancelButton.addEventListener("click", () => {
// Pressing the Cancel button stops the viewshed creation process.
abortController.abort();
});
Note that when placing viewsheds interactively, the viewshed is created with a 2-meter vertical offset from the scene. This behavior is subject to change in a future release.