Knowledge Base
Recent Changes

Differences

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

Link to this comparison view

Next revision 		Previous revision
dev:viewer:sdk:examples_js:addviewwithoptions [2020/03/30 13:40]
nathalie created 		dev:viewer:sdk:examples_js:addviewwithoptions [2023/10/04 12:42] (current)
pieter
Line 1: Line 1:
-====== Example addViewWithOptions =====+====== Example: Using addView ===== 
 + 
 +This example demonstrates adding one individual view.
  
 The preset longitude/latitude coordinate point to a location of the demo publication “San Sebastian”. \\ The preset longitude/latitude coordinate point to a location of the demo publication “San Sebastian”. \\
Line 5: Line 7:
  
 <html> <html>
- <head> +<script> 
- <script src="https://cdn.3dmapping.cloud/20.2.0/javascript/orbitgt_3dm_sdk.js"></script> +    let exampleUrl = "https://cdn.3dmapping.cloud/examples_stable/example06.html"; 
- </head>+</script> 
 + 
 +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/styles/default.min.css" 
 +    integrity="sha512-kZqGbhf9JTB4bVJ0G8HCkqmaPcRgo88F0dneK30yku5Y/dep7CZfCnNml2Je/sY4lBoqoksXz4PtVXS4GHSUzQ==" 
 +    crossorigin="anonymous" />
  
- <span style="display: flex; flex-direction: row;"> +<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js" 
-        <span id="m3dviewer"> +    integrity="sha512-Ypjm0o7jOxAd4hpdoppSEN0TQOC19UtPAqD+4s5AlXmUvbmmS/YMxYqAqarQYyxTnB6/rqip9qcxlNB/3U9Wdg==" 
-        </span> +    crossorigin="anonymous"></script>
-        <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">+<span id="example"></span> 
 +<br /> 
 +<br /> 
 +<input type="button" value="Show Source" onclick="toggleShowSource()"></input> 
 +<span id="showsource"></span>
  
-        /** +<script>
-         * Example:  +
-         *  - Add new view with setting (pan, tilt and fov) +
-         */ +
  
-        var viewer;+    let toggleShowSource = () => { 
 +        let element = document.getElementById("showsource"); 
 +        element.style.display = element.style.display == 'none' ? 'block' : 'none'; 
 +    }
  
-        var AMap = orbitgt.mapping3d.sdk.viewer.AMap; +    fetch(exampleUrl) 
-        var Constants = orbitgt.mapping3d.sdk.viewer.Constants; +        .then(response => response.text()) 
-        var SDKViewer = orbitgt.mapping3d.sdk.viewer.SDKViewer; +        .then(text => {
-        var Coordinate = orbitgt.mapping3d.sdk.viewer.Coordinate;+
  
-        function handleFocus(event) { +            try { 
-            let lon = parseFloat(document.getElementById("lon").value); +                // add example in iframe 
-            let lat = parseFloat(document.getElementById("lat").value); +                let frame = document.createElement("iframe"); 
-            let position = Coordinate.fromXY("4326",lon,lat); +                frame.style.border = 'none'; 
-            let renderMode = document.getElementById("rendermode").value; +                frame.style.overflow = 'auto'; 
-            let clear = document.getElementById("clear").checked; +                frame.width = 950; 
-            let pan = parseFloat(document.getElementById("pan").value); +                frame.height = 420; 
-            let tilt = parseFloat(document.getElementById("tilt").value); +                frame.srcdoc = text; 
-            let fovValue = parseFloat(document.getElementById("fov").value); +                document.getElementById("example").appendChild(frame);
-            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( +                // add 'showsource' section 
-                (result)=>console.log("View added: ", result), +                let pre = document.createElement("pre"); 
-                (error)=>console.error("View add failed: ", error) +                pre.classList.add("code"); 
-            ); +                pre.classList.add("html4strict"); 
-        }+                pre.textContent = text; 
 +                document.getElementById("showsource").style.display = 'none'; 
 +                document.getElementById("showsource").style.fontSize = '12px'; 
 +                document.getElementById("showsource").appendChild(pre);
  
-        /** +                // highlight 
-         * Called when something changes to the viewer state.  +                hljs.highlightBlock(pre);
-         */ +
-         function handleAppStateChanged(state) { +
-            // Save state somewhere... +
-            window.localStorage.setItem("m3dviewer_state",state); +
-        }+
  
-        /** +            } catch (error) { console.error(error); }
-         * 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 +</script>
-        document.addEventListener("DOMContentLoaded", handleDOMReady);+
  
-   </script> 
 </html> </html>
 
Last modified:: 2020/03/30 13:40