Hi I am interested in being able to adjust the fov of the camera when moving between viewpoints for a landscape and visual assessment project which requires specific visualisations with the HFoVs often 90 and 53.5. I have tried with the following script for Viewpoint 2. I can adjust tilt and position but not fov. I have read through the above thread but not sure how to implement the changes I need to the following script. Many thanks in advance.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<!--
ArcGIS Maps SDK for JavaScript, https://js.arcgis.com
-->
<title>SceneView - goTo() | Sample | ArcGIS Maps SDK for JavaScript 4.29</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.29/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.29/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
position: absolute;
bottom: 17px;
width: 100%;
padding: 20px 0;
z-index: 1;
text-align: center;
}
button {
background: white;
padding: 7px;
border: 1px solid #005e95;
font-size: 0.9em;
margin: 5px;
color: #005e95;
}
button:hover {
background: #005e95;
color: white;
cursor: pointer;
}
</style>
<script>
require([ "esri/config","esri/Map", "esri/views/SceneView","esri/WebScene","esri/widgets/Legend"
], function(esriConfig, Map, SceneView, WebScene,Legend) {
esriConfig.apiKey = "***APIKey****";
/**const map = new Map({
basemap: "dark-gray-vector"
});
**/
/*********************************************************************
* Create a new WebScene referencing a WebScene ID from ArcGIS Online
* or an on-premise portal.
*********************************************************************/
const scene = new WebScene({
portalItem: {
// autocasts as new PortalItem()
id: "***ID Here***"
}
});
/*********************************************************************
* Reference the WebScene in a SceneView instance.
*********************************************************************/
const view = new SceneView({
map: scene,
container: "viewDiv"
});
view.ui
/*****************************************************************
*
* Add event listeners to go to a target point using animation options
*
*****************************************************************/
// The target point is a new camera obtained by shifting the current camera to the new VP not resolved this issue as fov not updating
function shiftCamera(position) {
const camera = view.camera.clone();
camera.position.tilt.fov;
return camera;
}
function catchAbortError(error) {
if (error.name != "AbortError") {
console.error(error);
}
}
// Define your own function for the easing option
function customEasing(t) {
return 1 - Math.abs(Math.sin(-1.7 + t * 4.5 * Math.PI)) * Math.pow(0.5, t * 10);
}
document.getElementById("defaultVP1").addEventListener("click", () => {
view
.goTo(
{
position: {
x: -3.484,
y: 51.563,
z: 130,
spatialReference: {
wkid: 4326
}
},
heading: 260,
tilt: 90,
fov: 90
},
{
speedFactor: 0.6,
easing: "linear"
}
)
.catch(catchAbortError);
});
document.getElementById("gotoVP2_90deg").addEventListener("click", () => {
view
.goTo(
{
position: {
x: -3.489667,
y: 51.557520,
z: 88.5,
spatialReference: {
wkid: 4326
}
},
heading: 280,
tilt: 92,
fov:90
},
{
speedFactor: 0.6,
easing: "linear"
}
)
.catch(catchAbortError);
});
document.getElementById("gotoVP2_53.5deg").addEventListener("click", () => {
view
.goTo(
{
position: {
x: -3.489667,
y: 51.557520,
z: 88.5,
spatialReference: {
wkid: 4326
}
},
heading: 280,
tilt: 92,
fov: 53.5
},
{
speedFactor: 0.6,
easing: "linear"
}
)
.catch(catchAbortError);
});
});
</script>
</head>
<body>
<div id="optionsDiv">
<button id="defaultVP1">Default to VP1</button>
<button id="gotoVP2_90deg">Go to VP2 (90deg)</button>
<button id="gotoVP2_53.5deg">Go to VP2 (53.5deg)</button>
</div>
<div id="viewDiv"></div>
</body>
</html>
