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:addoverlayobjects_point_default [2020/06/15 11:51]
pieter 		dev:viewer:sdk:examples_js:addoverlayobjects_point_default [2023/10/04 12:43] (current)
pieter
Line 1: Line 1:
-====== Example addOverlayObjects - Point Default ======+====== Example: Adding a point Overlay Object ====== 
 + 
 +This example demonstrates adding multiple Point ''Overlay Objects'' to the viewer. 
 + 
 +After the workspace opens, green points rendered using the default symbol (a filled circle) are added  using ''addOverlayObjects''.
  
 <html> <html>
-    <script src="https://cdn.3dmapping.cloud/20.5.0/javascript/orbitgt_3dm_sdk.js"></script> +<script> 
-    <div id="m3dviewer"/>+    let exampleUrl = "https://cdn.3dmapping.cloud/examples_stable/example13.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); +
-        }+
  
-        function addPoint(list,position) { +    let toggleShowSource = () => { 
-            var object = new MapObject(); +        let element = document.getElementById("showsource"); 
-            object.spatialPoint = position; +        element.style.display = element.style.display == 'none' ? 'block' : 'none'; 
-            list.add(object); +    }
-        }+
  
-        /** +    fetch(exampleUrl) 
-         * Called when a workspace was opened. +        .then(response => response.text()) 
-         */ +        .then(text => {
-        function handleWorkspaceOpened() {+
  
-            var list = new AList(MapObject.TYPE);+            try { 
 +                // add example in iframe 
 +                let frame = document.createElement("iframe"); 
 +                frame.style.border = 'none'; 
 +                frame.style.overflow = 'auto'; 
 +                frame.width = 950; 
 +                frame.height = 420; 
 +                frame.srcdoc = text; 
 +                document.getElementById("example").appendChild(frame);
  
-            addPoint(list,Coordinate.fromXY("25830",582709.916,4796940.915)); +                // add 'showsource' section 
-            addPoint(list,Coordinate.fromXY("25830",582713.485,4796942.736)); +                let pre = document.createElement("pre"); 
-            addPoint(list,Coordinate.fromXY("25830",582725.142,4796948.689)); +                pre.classList.add("code"); 
-            addPoint(list,Coordinate.fromXY("25830",582725.692,4796948.162)); +                pre.classList.add("html4strict"); 
-            addPoint(list,Coordinate.fromXY("25830",582725.715,4796948.183)); +                pre.textContent = text; 
-            addPoint(list,Coordinate.fromXY("25830",582727.332,4796946.414)); +                document.getElementById("showsource").style.display = 'none'; 
-            addPoint(list,Coordinate.fromXY("25830",582727.295,4796946.38)); +                document.getElementById("showsource").style.fontSize = '12px'; 
-            addPoint(list,Coordinate.fromXY("25830",582736.346,4796936.486)); +                document.getElementById("showsource").appendChild(pre);
-            addPoint(list,Coordinate.fromXY("25830",582736.381,4796936.518)); +
-            addPoint(list,Coordinate.fromXY("25830",582737.864,4796934.912)); +
-            addPoint(list,Coordinate.fromXY("25830",582737.821,4796934.871)); +
-            addPoint(list,Coordinate.fromXY("25830",582738.141,4796934.536)); +
-            addPoint(list,Coordinate.fromXY("25830",582737.852,4796934.096)); +
-            addPoint(list,Coordinate.fromXY("25830",582737.897,4796934.066)); +
-            addPoint(list,Coordinate.fromXY("25830",582736.688,4796932.244)); +
-            addPoint(list,Coordinate.fromXY("25830",582736.65,4796932.27)); +
-            addPoint(list,Coordinate.fromXY("25830",582719.338,4796922.803)); +
-            addPoint(list,Coordinate.fromXY("25830",582714.473,4796931.779)); +
-            addPoint(list,Coordinate.fromXY("25830",582709.607,4796940.757)); +
-            addPoint(list,Coordinate.fromXY("25830",582709.916,4796940.915));+
  
-            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/06/15 11:51