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:addoverlayobjects [2020/03/30 13:40]
nathalie created 		dev:viewer:sdk:examples_js:addoverlayobjects [2023/10/04 12:43] (current)
pieter
Line 1: Line 1:
-====== Example addOverlayObjects ======+====== Example: Adding an Area Overlay Object ======
  
 +This example demonstrates adding one Area ''Overlay Object'' the viewer.
 +
 +
 +After the workspace opens, a red building footprint is added using ''addOverlayObjects''.
  
 <html> <html>
-    <script src="https://cdn.3dmapping.cloud/19.6.0/javascript/orbitgt_3dm_sdk.js"></script> +<script> 
-    <div id="m3dviewer"/>+    let exampleUrl = "https://cdn.3dmapping.cloud/examples_stable/example12.html"; 
 +</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 type="text/javascript">+<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>
  
-        var viewer;+<span id="example"></span> 
 +<br /> 
 +<br /> 
 +<input type="button" value="Show Source" onclick="toggleShowSource()"></input> 
 +<span id="showsource"></span>
  
-        var AMap = orbitgt.mapping3d.sdk.viewer.AMap; +<script>
-        var AList = orbitgt.mapping3d.sdk.viewer.AList; +
-        var Constants = orbitgt.mapping3d.sdk.viewer.Constants; +
-        var SDKViewer = orbitgt.mapping3d.sdk.viewer.SDKViewer; +
-        var CoordinatePath = orbitgt.mapping3d.sdk.viewer.CoordinatePath;    +
-        var CoordinatePart = orbitgt.mapping3d.sdk.viewer.CoordinatePart; +
-        var Coordinate = orbitgt.mapping3d.sdk.viewer.Coordinate; +
-        var MapObject = orbitgt.mapping3d.sdk.viewer.MapObject; +
-        var Color = orbitgt.mapping3d.sdk.viewer.Color; +
-         +
-        /** +
-         * Called when the viewer component is ready for interaction. +
-         */ +
-        function handleReady() { +
-            viewer.onWorkspaceOpened.add(handleWorkspaceOpened); +
-        }+
  
-        /** +    let toggleShowSource = () => { 
-         * Called when a workspace was opened. +        let element = document.getElementById("showsource"); 
-         */ +        element.style.display = element.style.display == 'none' ? 'block' : 'none'; 
-        function handleWorkspaceOpened() {+    }
  
-            var part = new CoordinatePart(); +    fetch(exampleUrl) 
-            part.crs = "25830"; +        .then(response => response.text()) 
-            part.points.add(Coordinate.fromXY(null,582709.916,4796940.915)); +        .then(text => {
-            part.points.add(Coordinate.fromXY(null,582713.485,4796942.736)); +
-            part.points.add(Coordinate.fromXY(null,582725.142,4796948.689)); +
-            part.points.add(Coordinate.fromXY(null,582725.692,4796948.162)); +
-            part.points.add(Coordinate.fromXY(null,582725.715,4796948.183)); +
-            part.points.add(Coordinate.fromXY(null,582727.332,4796946.414)); +
-            part.points.add(Coordinate.fromXY(null,582727.295,4796946.38)); +
-            part.points.add(Coordinate.fromXY(null,582736.346,4796936.486)); +
-            part.points.add(Coordinate.fromXY(null,582736.381,4796936.518)); +
-            part.points.add(Coordinate.fromXY(null,582737.864,4796934.912)); +
-            part.points.add(Coordinate.fromXY(null,582737.821,4796934.871)); +
-            part.points.add(Coordinate.fromXY(null,582738.141,4796934.536)); +
-            part.points.add(Coordinate.fromXY(null,582737.852,4796934.096)); +
-            part.points.add(Coordinate.fromXY(null,582737.897,4796934.066)); +
-            part.points.add(Coordinate.fromXY(null,582736.688,4796932.244)); +
-            part.points.add(Coordinate.fromXY(null,582736.65,4796932.27)); +
-            part.points.add(Coordinate.fromXY(null,582719.338,4796922.803)); +
-            part.points.add(Coordinate.fromXY(null,582714.473,4796931.779)); +
-            part.points.add(Coordinate.fromXY(null,582709.607,4796940.757)); +
-            part.points.add(Coordinate.fromXY(null,582709.916,4796940.915)); +
-            var path = new CoordinatePath(); +
-            path.crs = "25830"; +
-            path.parts.add(part);+
  
-            var object = new MapObject(); +            try { 
-            object.spatialArea = path; +                // add example in iframe 
-            object.color = Color.fromRGB(255,0,0); +                let frame = document.createElement("iframe"); 
-            object.fillColor = Color.fromRGBA(200,0,0,100);+                frame.style.border = 'none'; 
 +                frame.style.overflow = 'auto'; 
 +                frame.width = 950; 
 +                frame.height = 420; 
 +                frame.srcdoc = text; 
 +                document.getElementById("example").appendChild(frame);
  
-            var list = new AList(MapObject.TYPE); +                // add 'showsource' section 
-            list.add(object);+                let pre = document.createElement("pre"); 
 +                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);
  
-            console.log("Adding ", list);+                // highlight 
 +                hljs.highlightBlock(pre);
  
-            viewer.addOverlayObjects(list); +            } catch (error) { console.error(error); }
-        }+
  
-        /** +        });
-         * Called when the page is full loaded. +
-         */ +
-        function handleDOMReady() { +
-            // Create viewer startup options +
-            var loginOptions = new AMap(); +
-            loginOptions.set(Constants.LOGIN_MODE, Constants.LOGINMODE_GUEST_CLOUD); +
-            loginOptions.set(Constants.LOGIN_PUBLICATION_PUBLIC_ID, "R4hyyTRFUQPbnBlzZf7Q"); +
-            var options = new AMap(); +
-            options.set(Constants.STARTUP_AUTO_LOGIN,loginOptions); +
-            // 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