Added drawing example

IT-Enthusiast-Nepal · Jun 3, 2023 · 3a0e2d1 · 3a0e2d1
1 parent 0fdc58a
commit 3a0e2d1
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 0 deletions.
diff --git a/drawingControl/drawingControl.html b/drawingControl/drawingControl.html
@@ -0,0 +1,49 @@
+<html>
+
+<head>
+    <title>OpenGlobus - Earth planet</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="//www.openglobus.org/og.css" type="text/css" />
+    <script src="//www.openglobus.org/og.umd.js"></script>
+    <style>
+    </style>
+</head>
+
+<body>
+<div id="layerName"></div>
+<div id="earth" style="width:100%;height:100%"></div>
+<script type="module">
+    'use strict';
+
+    let osm = new og.layer.XYZ("osm", {
+        isBaseLayer: true,
+        url: "http://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        visibility: true,
+        attribution: 'Data @ OpenStreetMap contributors, ODbL',
+        maxNativeZoom: 19,
+        defaultTextures: [{ color: "#AAD3DF" }, { color: "#F2EFE9" }],
+        isSRGB: false,
+        shininess: 18,
+        specular: [0.00063, 0.00055, 0.00032],
+        ambient: [0.2, 0.2, 0.3],
+        diffuse: [0.9, 0.9, 0.7],
+    });
+
+    var globus = new og.Globe({
+        target: "earth",
+        name: "Earth",
+        maxAltitude: 15000000,
+        terrain: new og.terrain.GlobusTerrain("19", {
+            maxZoom: 14
+        }),
+        layers: [osm]
+    });
+
+    globus.planet.viewExtent(new og.Extent(new og.LonLat(158.31010, 54.45445), new og.LonLat(158.55687, 54.56659)));
+
+    globus.planet.addControl(new og.control.DrawingSwitcher());
+
+</script>
+</body>
+
+</html>
diff --git a/drawingControl/drawingControl.js b/drawingControl/drawingControl.js
@@ -0,0 +1,34 @@
+import { Globe } from "../../src/og/Globe.js";
+import { XYZ } from "../../src/og/layer/XYZ.js";
+import { Extent } from "../../src/og/Extent.js";
+import { LonLat } from "../../src/og/LonLat.js";
+import { GlobusTerrain } from "../../src/og/terrain/GlobusTerrain.js";
+import { DrawingSwitcher } from "../../src/og/control/DrawingSwitcher.js";
+
+let osm = new XYZ("osm", {
+    isBaseLayer: true,
+    url: "http://tile.openstreetmap.org/{z}/{x}/{y}.png",
+    visibility: true,
+    attribution: 'Data @ OpenStreetMap contributors, ODbL',
+    maxNativeZoom: 19,
+    defaultTextures: [{ color: "#AAD3DF" }, { color: "#F2EFE9" }],
+    isSRGB: false,
+    shininess: 18,
+    specular: [0.00063, 0.00055, 0.00032],
+    ambient: [0.2, 0.2, 0.3],
+    diffuse: [0.9, 0.9, 0.7],
+});
+
+var globus = new Globe({
+    target: "earth",
+    name: "Earth",
+    maxAltitude: 15000000,
+    terrain: new GlobusTerrain("19", {
+        maxZoom: 14
+    }),
+    layers: [osm]
+});
+
+globus.planet.viewExtent(new Extent(new LonLat(158.31010, 54.45445), new LonLat(158.55687, 54.56659)));
+
+globus.planet.addControl(new DrawingSwitcher());