Select to view content in your preferred language

Camera FOV Serialisation

694
3
10-18-2020 04:29 PM
JethroLeevers
Regular Contributor

The toJSON method on the ersi/Camera Object does not serialise the fov property of the camera.

I know I can just access the value from the object directly but I did experct the toJSON return to contain this value. Also the correspoding functionality in fromJSON.

Is this an oversight or by design?

0 Kudos
3 Replies
RalucaNicola1
Esri Contributor

Hi Jethro, thanks for your feedback, that's a good point, I'm currently discussing with my colleagues about adding the property to the `toJSON` method. Initially there was no platform support for this property, so we didn't serialize it. 

How do you use the serialization in your application? do you want to save webscenes to the ArcGIS platform with different fields of view?

0 Kudos
JethroLeevers
Regular Contributor

Yes, i currently serialise the viewpoint and use it in a similar way to the bookmarks in 2D.

It would be nice if the fov animated with the goTo function aswell.

0 Kudos
Mark_Wilson
Emerging Contributor

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>
Tags (3)
0 Kudos