Using fov with Camera settings

Mark_Wilson — Thu, 18 Apr 2024 09:00:30 GMT

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 visualisation outputs with the HFoVs at 90 and 53.5. The outputs will be used to create viewpoint photomontages.

I have tried with the following script for Viewpoint 2. I can adjust tilt and position but not fov. I understand that goTo does not work with the fov setting but does work with heading and tilt.

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" />  <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>

Re: Using fov with Camera settings

AndreasUlmer — Fri, 19 Apr 2024 14:31:11 GMT

Suggested workaround: apply new fov before view.goTo()

(ℹ Camera needs to be cloned to apply modifications: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-SceneView.html#camera)

document.getElementById("gotoVP2_53.5deg").addEventListener("click", () => { const cameraCloned = view.camera.clone(); cameraCloned.fov = 53.3; view.camera = cameraCloned; view.goTo( ...

this will instantly (without animation) change camera fov to the new desired setting
then the camera will transition smoothly to the new viewpoint

Unfortunately there is no way atm to smoothly transition between fovs. This is something we consider to improve in a future release.

Is this workaround acceptable for you?

Re: Using fov with Camera settings

Mark_Wilson — Mon, 22 Apr 2024 08:09:33 GMT

Many thanks for looking at this Andreas and your useful advice. I'll have a go at implementing your suggestion.

Do you know when the use of the fov function with goTo will be available please ?

Re: Using fov with Camera settings

AndreasUlmer — Mon, 22 Apr 2024 13:52:45 GMT

Many thanks for looking at this Andreas and your useful advice. I'll have a go at implementing your suggestion.

Great! Let us know if this works for you.

Do you know when the use of the fov function with goTo will be available please ?

Added issue to our roadmap, but can't give a concrete date when this will be tackled I'm afraid.

Re: Using fov with Camera settings

Mark_Wilson — Mon, 22 Apr 2024 13:57:39 GMT

Thanks yes this work around worked well Andreas!

topic Re: Using fov with Camera settings in ArcGIS JavaScript Maps SDK Questions

Using fov with Camera settings

Re: Using fov with Camera settings

Re: Using fov with Camera settings

Re: Using fov with Camera settings

Re: Using fov with Camera settings