Using fov with Camera settings

322
4
Jump to solution
04-18-2024 02:00 AM
Mark_Wilson
New Contributor II

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

 

Tags (4)
0 Kudos
2 Solutions

Accepted Solutions
AndreasUlmer
Esri Contributor

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?

View solution in original post

AndreasUlmer
Esri Contributor

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.

View solution in original post

0 Kudos
4 Replies
AndreasUlmer
Esri Contributor

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?

Mark_Wilson
New Contributor II

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 ?

0 Kudos
AndreasUlmer
Esri Contributor

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.

0 Kudos
Mark_Wilson
New Contributor II

Thanks yes this work around worked well Andreas!

0 Kudos