Knowledge Base
Recent Changes

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
dev:developer:examples:addviewwithoptions [2020/05/12 17:59]
jeroen removed 		— (current)
Line 1: Line 1:
-====== Example addViewWithOptions ===== 
  
-The preset longitude/latitude coordinate point to a location of the demo publication “San Sebastian”. \\ 
-Open this demo publication via the token you find on https://3dmapping.cloud/try-it-now/ 
- 
-<html> 
- <head> 
- <script src="https://cdn.3dmapping.cloud/20.2.0/javascript/orbitgt_3dm_sdk.js"></script> 
- </head> 
- 
- <span style="display: flex; flex-direction: row;"> 
-        <span id="m3dviewer"> 
-        </span> 
-        <span style="padding-left: 10px; display: flex; flex-direction: column; width: 200px; align-content: flex-start;"> 
-            <label for="lon">Longitude</label> 
-            <input id="lon" type="number" value="-1.98083224"/> 
-            <label for="lat">Latitude</label> 
-            <input id="lat" type="number" value="43.32598276"/> 
-            <label for="rendermode">Render Mode</label> 
-            <select id="rendermode" value="photo_spherical"> 
-                <option value="3d">3D</option> 
-                <option value="photo_spherical">Spherical</option> 
-            </select> 
-            <label for="clear">Close other views?</label> 
-            <input id="clear" type="checkbox" checked="false" /> 
-            <label for="pan">Pan</label> 
-            <input id="pan" type="number" value="0"/> 
-            <label for="tilt">Tilt</label> 
-            <input id="tilt" type="number" value="0"/> 
-            <label for="fov">FOV</label> 
-            <input id="fov" type="number" value="90"/> 
-            <label for="fov-driving-direction">Driving direction?</label> 
-            <input id="fov-driving-direction" type="checkbox" checked="false" /> 
-            <label for="focus-button">Action</label> 
-            <input id="focus-button" type="button" value="Add View" /> 
-        </span> 
- </span> 
- 
-    <script type="text/javascript"> 
- 
-        /** 
-         * Example:  
-         *  - Add new view with setting (pan, tilt and fov) 
-         */  
- 
-        var viewer; 
- 
-        var AMap = orbitgt.mapping3d.sdk.viewer.AMap; 
-        var Constants = orbitgt.mapping3d.sdk.viewer.Constants; 
-        var SDKViewer = orbitgt.mapping3d.sdk.viewer.SDKViewer; 
-        var Coordinate = orbitgt.mapping3d.sdk.viewer.Coordinate; 
- 
-        function handleFocus(event) { 
-            let lon = parseFloat(document.getElementById("lon").value); 
-            let lat = parseFloat(document.getElementById("lat").value); 
-            let position = Coordinate.fromXY("4326",lon,lat); 
-            let renderMode = document.getElementById("rendermode").value; 
-            let clear = document.getElementById("clear").checked; 
-            let pan = parseFloat(document.getElementById("pan").value); 
-            let tilt = parseFloat(document.getElementById("tilt").value); 
-            let fovValue = parseFloat(document.getElementById("fov").value); 
-            let fovDrive = document.getElementById("fov-driving-direction").checked; 
-            let fov = fovDrive ? "driving_direction" : fovValue; 
-            if (isNaN(fov)) fov = undefined; 
-            let options = new AMap(); 
-            options.set(Constants.STARTUP_PAN, pan); 
-            options.set(Constants.STARTUP_TILT, tilt); 
-            options.set("fov", fov); 
- 
-            viewer.addViewWithOptions(position,renderMode,clear,options).then( 
-                (result)=>console.log("View added: ", result), 
-                (error)=>console.error("View add failed: ", error) 
-            ); 
-        } 
- 
-        /** 
-         * Called when something changes to the viewer state.  
-         */ 
-         function handleAppStateChanged(state) { 
-            // Save state somewhere... 
-            window.localStorage.setItem("m3dviewer_state",state); 
-        } 
- 
-        /** 
-         * Called when the viewer component is ready for interaction. 
-         */ 
-        function handleReady() { 
-            viewer.onAppStateChanged.add(handleAppStateChanged); 
-            document.getElementById("focus-button").addEventListener("click",this.handleFocus); 
-        } 
- 
-        /** 
-         * Called when the page is full loaded. 
-         */ 
-        function handleDOMReady() { 
-            var options = new AMap(); 
-            options.set(Constants.STARTUP_APP_STATE,window.localStorage.getItem("m3dviewer_state")); 
-            // Create viewer 
-            var appElement = document.getElementById("m3dviewer"); 
-            viewer = new SDKViewer("example application",appElement,options); 
-            viewer.setSize(1000,500); 
-            viewer.isReady.then(handleReady); 
-        } 
- 
-        // Wait for page to load 
-        document.addEventListener("DOMContentLoaded", handleDOMReady); 
- 
-   </script> 
-</html>