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
dev:viewer:sdk:examples_js:setfocusposition [2020/07/13 13:45]
pieter 		dev:viewer:sdk:examples_js:setfocusposition [2023/10/04 12:42]
pieter
Line 1: Line 1:
-====== Example setFocusPosition ======+====== Example: Using setFocusPosition ====== 
 + 
 +This example demonstrates focusing all Views on a specific position using ''setFocusPosition''.
  
 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/examples_stable/example05.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" /> 
 + 
 +<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.1/highlight.min.js" 
 +    integrity="sha512-Ypjm0o7jOxAd4hpdoppSEN0TQOC19UtPAqD+4s5AlXmUvbmmS/YMxYqAqarQYyxTnB6/rqip9qcxlNB/3U9Wdg==" 
 +    crossorigin="anonymous"></script>
  
- <span style="display: flex; flex-direction: row;"> +<span id="example"></span> 
-        <span id="m3dviewer"> +<br /> 
-        </span> +<br /> 
-        <span style="padding-left: 10px; display: flex; flex-direction: column; width: 200px; align-content: flex-start;"> +<input type="button" value="Show Source" onclick="toggleShowSource()"></input> 
-            <label for="lon">Longitude</label> +<span id="showsource"></span>
-            <input id="lon" type="number" value="-1.98083224"/> +
-            <label for="lat">Latitude</label> +
-            <input id="lat" type="number" value="43.32598276"/> +
-            <label for="sub">Action</label> +
-            <input id="focus-button" type="button" value="Focus Viewer" /> +
-        </span> +
- </span>+
  
-    <script type="text/javascript">+<script>
  
-        /** +    let toggleShowSource = () => { 
-         * Example: Focus Viewer +        let element = document.getElementById("showsource"); 
-         */ +        element.style.display = element.style.display == 'none' ? 'block' : 'none'; 
 +    }
  
-        var viewer;+    fetch(exampleUrl) 
 +        .then(response => response.text()) 
 +        .then(text => {
  
-        var AMap = orbitgt.mapping3d.sdk.viewer.AMap; +            try { 
-        var Constants = orbitgt.mapping3d.sdk.viewer.Constants; +                // add example in iframe 
-        var SDKViewer = orbitgt.mapping3d.sdk.viewer.SDKViewer; +                let frame = document.createElement("iframe"); 
-        var Coordinate = orbitgt.mapping3d.sdk.viewer.Coordinate;+                frame.style.border = 'none'; 
 +                frame.style.overflow = 'auto'; 
 +                frame.width = 950; 
 +                frame.height = 420; 
 +                frame.srcdoc = text; 
 +                document.getElementById("example").appendChild(frame);
  
-        function handleFocus(event) { +                // add 'showsource' section 
-            let lon = parseFloat(document.getElementById("lon").value); +                let pre = document.createElement("pre"); 
-            let lat = parseFloat(document.getElementById("lat").value); +                pre.classList.add("code"); 
-            let focus = Coordinate.fromXY("4326",lon,lat); +                pre.classList.add("html4strict"); 
-            viewer.setFocusPosition(focus); +                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