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
Next revision 		Previous revision
Last revision Both sides next revision
dev:viewer:sdk:examples_js:addviewwithoptions [2020/07/13 12:16]
pieter 		dev:viewer:sdk:examples_js:addviewwithoptions [2023/10/02 18:43]
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.7.0/javascript/orbitgt_3dm_sdk.js"></script> +    let exampleUrl = "https://cdn.3dmapping.cloud/stable/javascript_examples/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:: 2023/10/04 12:42