npm - drone_view - Versions diffs - 3.0.12 → 3.0.14 - Mend

drone_view 3.0.12 → 3.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "drone_view",
-  "version": "3.0.12",
+  "version": "3.0.14",
   "main": "dist/droneView.js",
   "license": "MIT",
   "scripts": {

package/public/crane.png DELETED Viewed

Binary file

package/public/icon.png DELETED Viewed

Binary file

package/public/icons8.png DELETED Viewed

Binary file

package/public/index.html DELETED Viewed

@@ -1,562 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script
-      src="https://kit.fontawesome.com/6d6937278c.js"
-      crossorigin="anonymous"
-    ></script>
-    <script src="https://cdn.plot.ly/plotly-2.20.0.min.js"></script>
-    <link rel="stylesheet" href="../dist/Widgets/widgets.css" />
-    <title>Document</title>
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-      .drawBox {
-        position: fixed;
-        top: 0;
-        left: 0;
-        z-index: 10000;
-      }
-      .drawContainer {
-        border: 1.5px solid white;
-        background-color: rgba(245, 245, 245, 0.473);
-        margin: 15px;
-      }
-      .drawContainer:hover {
-        border: 1.5px solid rgb(5, 5, 5);
-        background-color: rgba(146, 146, 146, 0.473);
-        cursor: pointer;
-      }
-      .drawIcon {
-        font-size: 20px;
-        color: rgb(0, 0, 0);
-        margin: 10px;
-        display: block;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="cesiumContainer" class="fullSize"></div>
-    <div class="drawBox">
-      <div id="pointer" class="drawContainer pointer">
-        <i class="fa-solid fa-arrow-pointer drawIcon"></i>
-      </div>
-      <div id="location" class="drawContainer polygon">
-        <i class="fa-solid fa-map-marker drawIcon"></i>
-      </div>
-      <div id="polygon" class="drawContainer polygon">
-        <i class="fa-solid fa-draw-polygon drawIcon"></i>
-      </div>
-      <div id="lineString" class="drawContainer lineString">
-        <i class="fa-solid fa-chart-line drawIcon"></i>
-      </div>
-      <div id="measurement" class="drawContainer lineString">
-        Measurement
-      </div>
-      <div id="layers" class="drawContainer layers">
-        Load Drawings
-      </div>
-      <a class="btn btn-light btn-sm" href="javascript://" id="deficiency" data-toggle = "tooltip" title = "Create Deficiency">
-        <span class="fa-solid fa-triangle-exclamation" style="color: #FFD43B;"></span>
-      </a>
-      <div id="cross" class="drawContainer lineString">Height Graph</div>
-      <div id="position" class="drawContainer lineString">Position Change</div>
-      <div id="visibility" class="drawContainer lineString">Visibility</div>
-      <div id="opacity" class="drawContainer lineString">Opacity</div>
-      <div class="">
-        <div id="rotate" class="drawContainer rotate">
-          Rotate
-        </div>
-        <div id="position" class="drawContainer">
-          Position
-          <div>
-            <button class="height height-plus"> UP </button>
-            <button class="height height-minus"> Down </button>
-          </div>
-        </div>
-        <div>
-          <button id="toggleglobe"> toggle Globe </button>
-        </div>
-      </div>
-        <div id="origin" class="drawContainer position">
-          Origin
-          <div>
-            <button class="origin lat-plus"> North </button>
-            <button class="origin lat-minus"> South </button>
-            <button class="origin lng-minus"> West </button>
-            <button class="origin lng-plus"> East </button>
-          </div>
-        </div>
-        <div id="save" class="drawContainer">
-          <div>
-            <button id="save-site-model"> Save </button>
-          </div>
-        </div>
-      </div>
-      <div id="getCenter" class="drawContainer lineString">Get Center</div>
-      <div id="setCenter" class="drawContainer lineString">set Center</div>
-      <div id="startCompare" class="drawContainer lineString">
-        Start Compare
-      </div>
-      <div id="stopCompare" class="drawContainer lineString">Stop Compare</div>
-    </div>
-    <div
-      id="plot"
-      style="
-        width: 600px;
-        height: 300px;
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        z-index: 100000;
-      "
-    ></div>
-    <script src="../dist/droneView.js"></script>
-    <script>
-      const CesiumView = DroneView.default;
-      const center = [-75.80011188888888, 48.60825886111112];
-      let viewer = new CesiumView({
-        center: center,
-        mapElementId: "cesiumContainer",
-        token:
-          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NzI5N2M3ZS1mNDBkLTQ1NTktYjU5MC1mMDlhNzY0Y2Q0YmEiLCJpZCI6MTE1MTUxLCJpYXQiOjE3MTQ2NjIzOTF9.Z7m91kd9g-eMfj0ST4MOE_ETlBbUM6LK5TTEDxGq7Es",
-      });
-      viewer.init();
-      let polygon = [
-        {
-          points: [
-            [6.16305874919769, 48.60817695763424, 0],
-            [6.163108478013089, 48.60819720521929, 0],
-            [6.163111072002854, 48.60819977147443, 0],
-            [6.163057488073359, 48.60818639169656, 0]
-          ],
-          properties: { id: "as1", color: "#00ff00", label: "testing2", clamp: false },
-        },
-        {
-          points: [
-            [6.162857491593727, 48.6080934029662, 5.912426975326382],
-            [6.162908397175465, 48.6081146398778, 5.934964504171266],
-            [6.16290843788737, 48.60811455477322, 3.272762631421164],
-            [6.1628706023275495, 48.6080989685312, 2.813801646136673],
-            [6.162842533195286, 48.608087438688024, 3.882614197318671]
-          ],
-          properties: { id: "as1", color: "#00ff00", label: "testing1", clamp: false },
-        },
-        {
-          points: [
-            [6.162967581670718, 48.608230997978, 6.868057683919937],
-            [6.163035923706803, 48.608248874262195, 6.845579863241482],
-            [6.1630578292255, 48.60821904904267, 6.745910666207763],
-            [6.163004594883557, 48.60819004647759, 6.73241478412424],
-            [6.1629555793978605, 48.60819920247807, 6.799143351030009]
-          ],
-          properties: { id: "as1", color: "#00ff00", label: "testing3", clamp: false },
-        },
-      ];
-      let projectCenter;
-      const line = [
-        {
-          points: [
-            [-68.18948335495492, 49.227354888313435, 7.005152851493904],
-            [-68.18933666835923, 49.22736699237485, 6.839571495786576],
-            [-68.18932111915565, 49.227312893969795, 6.692243150896516],
-            [-68.1894216553971, 49.22727894709573, 6.726892532674433],
-          ],
-          properties: { id: "as" },
-        },
-      ];
-      const annotation = [
-        {
-          point:
-          [6.162727802826702, 48.608254317491706, 6.700286152434376],
-          properties: { icon: "red_1.gltf" },
-        },
-        {
-          point: [
-            6.162808587642154, 48.6081948417796, 6.89108411291631,
-          ],
-          properties: { icon: "s2" },
-        },
-      ];
-      const points = [
-        // {
-        //   point: [-68.18920471492368, 49.227350449848245, 6.67595448919169],
-        //   properties: { icon: "red_1.gltf" },
-        // },
-        // {
-        //   point: [
-        //     -68.18933844169058, 49.22747609005213, -1.00014559372759030554,
-        //   ],
-        //   properties: { icon: "red_1.gltf" },
-        // },
-        {
-          point: [-68.18920471492368, 49.227350449848245, 6.67595448919169],
-          properties: { icon: "location", name: "Crack", color: "#aa0000" },
-        },
-        {
-          point: [
-            -68.18933844169058, 49.22747609005213, -1.00014559372759030554,
-          ],
-          properties: { icon: "location", name: "Delamination", color: "#0000bb" },
-        },
-        // {
-        //   point: [-68.1891187585888, 49.22730352580637, -0.0005596126514712139],
-        //   properties: { icon: "location" },
-        // },
-        // {
-        //   point: [-68.18904403029545, 49.22724369592092, -0.000565366476219466],
-        //   properties: { icon: "location" },
-        // },
-        // {
-        //   point: [-68.18907135191886, 49.22720973501134, -0.000572014595979508],
-        //   properties: { icon: "crane" },
-        // },
-      ];
-      let option = {
-        setBounds: true,
-        onClick: function (e) {
-          console.log(e);
-        },
-        onHover: function (e, jj) {
-          console.log(e);
-        },
-        clearHover: function (e) {
-          console.log("unhovered")
-          console.log(e);
-        },
-        icons: [
-          {
-            name: "location",
-            src: "location.png",
-            options: { pixelRatio: 2 },
-          },
-          {
-          name: "s1",
-          src: "/service/3d/white_exclamation/s1.png",
-          options: { pixelRatio: 6, deficiency: true },
-          },
-          {
-            name: "s2",
-            src: "/service/3d/white_exclamation/s2.png",
-            options: { pixelRatio: 6, deficiency: true },
-          },
-          {
-            name: "s3",
-            src: "/service/3d/white_exclamation/s3.png",
-            options: { pixelRatio: 6, deficiency: true },
-          },
-          {
-            name: "s4",
-            src: "/service/3d/white_exclamation/s4.png",
-            options: { pixelRatio: 6, deficiency: true },
-          }
-        ],
-      };
-      let model = {
-        url: "tile/tileset.json",
-        center: {
-          lat: 48.6083015,
-          long: 6.1629131500000005,
-          height: 25,
-        },
-        rotationX: 0,
-        rotationY: 0,
-        rotationZ: 0,
-      };
-      let model2 = {
-        url: "15038/tileset.json",
-        center: {
-          lat: 49.22747609005213,
-          long: -68.18933844169058,
-          height: 5,
-        },
-        rotationX: 0,
-        rotationY: 0,
-        rotationZ: 0,
-      };
-      let droneImagedata = {
-        jsonUrl: "tile2.json",
-      };
-      let orthoData = {
-        url: "https://dev.droneviewpro.com/uploads/ortho_images/attachment/57/tiles/{z}/{x}/{y}.png",
-      };
-      viewer.addLayer("model", "model-layer", model, {});
-      setTimeout(() => {
-        // viewer.addLayer("editPoint", "marker-layer", points[0], {onDragEnd : (e)=>{
-        //   console.log(e);
-        // }});
-        viewer.addLayer("annotation", "marker-layer", points, option);
-        // viewer.startCompare().then(() => {
-        //   viewer.addLayer("model", "model-layer", model, {}, "all");
-        // });
-      }, 1000);
-      document.getElementById("deficiency").addEventListener("click", () => {
-        drawingType = "Deficiency";
-        viewer.enableDrawing({ type: "Point" });
-      })
-      document.getElementById("startCompare").addEventListener("click", () => {
-        viewer.startCompare().then(() => {
-          viewer.addLayer("model", "model-layer", model, {}, "compare");
-          viewer.addLayer("model", "model-layer", model2, {}, "default");
-        });
-      });
-      document.getElementById("stopCompare").addEventListener("click", () => {
-        viewer.stopCompare();
-      });
-      // viewer.addLayer("droneImage", "droneImage-layer", droneImagedata, {
-      //   onClick: function (e) {
-      //     console.log(e);
-      //   },
-      // });
-      // viewer.addLayer("polygon", "polygon-layer", [polygon[1]], {
-      //   onClick: function (e) {},
-      //   setBounds: false,
-      //   isNoListener : true
-      // });
-      // viewer.addLayer("editPolygon", "polygon-edit-layer", polygon[0], {});
-      // viewer.addLayer("ortho", "ortho-layer", orthoData, {});
-      //   setTimeout(() => {
-      // viewer.addLayer("line", "line-layer", line, {
-      //   onClick: function (e) {
-      //     console.log(e);
-      //     cust2(e.features[0].properties.id);
-      //   },
-      // });
-      let id1;
-      const cust = (id) => {
-        id1 = id;
-        let tempPolygon = [];
-        let editPolygon;
-        polygon.forEach((p, i) => {
-          if (p.properties.id === id) {
-            editPolygon = p;
-          } else {
-            tempPolygon.push(p);
-          }
-        });
-        viewer.addLayer("polygon", "polygon-layer", tempPolygon, {
-          onClick: function (e) {},
-          setBounds: false,
-          isNoListener: true,
-        });
-        viewer.addLayer("editPolygon", "polygon-edit-layer", editPolygon, {
-          onPinchEnd: function (e) {
-            console.log(e)
-          }
-        });
-      };
-      // 4 polgon loaded
-      // 4 remove
-      // 1 - edit add
-      // 3 polygon add
-      // 1 edit
-      // 4 polygon layer
-      // viewer.addLayer("editPolygon", "polygon-layer", polygon[0], {
-      //   onClick: function (e) {
-      //     console.log(e);
-      //   },
-      // });
-      //   }, 2000);
-      let isVisible = false;
-      document.getElementById("visibility").addEventListener("click", () => {
-        console.log(isVisible);
-        if (!isVisible) {
-          //viewer.hideLayer("model", "model-layer");
-          viewer.hideLayer("droneImage", "droneImage-layer");
-        } else {
-          viewer.showLayer("droneImage", "droneImage-layer");
-          //viewer.showLayer("model", "model-layer");
-        }
-        isVisible = !isVisible;
-      });
-      document.getElementById("getCenter").addEventListener("click", () => {
-        projectCenter = viewer.getCenter();
-      });
-      document.getElementById("setCenter").addEventListener("click", () => {
-        viewer.setCenter(
-          projectCenter.latitude,
-          projectCenter.longitude,
-          projectCenter.height,
-          projectCenter.angle
-        );
-      });
-document.getElementById("toggleglobe").addEventListener("click",()=>{
-  viewer.toggleGlobe()
-})
-      document.getElementById("pointer").addEventListener("click", () => {
-        viewer.disableDrawing();
-        if (id1) {
-          console.log(id1);
-          const res = viewer.getLayerData("editPolygon", "polygon-edit-layer");
-          polygon.map((p, i) => {
-            if (p.properties.id === id1) {
-              p.points = res.points;
-            }
-          });
-          viewer.removeLayer("editPolygon", "polygon-edit-layer");
-          viewer.addLayer("polygon", "polygon-layer", polygon, {
-            onClick: (e) => {},
-            setBounds: false,
-          });
-        }
-        if (id2) {
-          const res = viewer.getLayerData("editLine", "polyLine-edit-layer");
-          console.log(res);
-          line.map((p, i) => {
-            if (p.properties.id === id2) {
-              p.points = res.points;
-            }
-          });
-          viewer.removeLayer("editLine", "polyLine-edit-layer");
-          viewer.addLayer("line", "line-layer", line, {
-            onClick: (e) => {
-              cust2(e.features[0].properties.id);
-            },
-            setBounds: false,
-          });
-        }
-        viewer.removeLayer("editPoint", "marker-layer");
-        viewer.toggleBaseMap();
-      });
-      document.getElementById("polygon").addEventListener("click", () => {
-        viewer.enableDrawing({ type: "Polygon", clamp: false });
-      });
-      document.getElementById("lineString").addEventListener("click", () => {
-        viewer.enableDrawing({ type: "LineString", clamp: false, measurement: true });
-      });
-      document.getElementById("measurement").addEventListener("click", () => {
-        viewer.enableDrawing({ type: "LineString", clamp: false, measurement: false });
-      });
-      document.getElementById("cross").addEventListener("click", () => {
-        viewer.enableDrawing({ type: "Cross-Section", clamp: true });
-      });
-      document.getElementById("location").addEventListener("click", () => {
-        viewer.enableDrawing({ type: "Point" });
-      });
-      document.getElementById("opacity").addEventListener("click", () => {
-        viewer.setLayerOpacity("model", "model-layer", 0.5);
-      });
-      document.getElementById("layers").addEventListener("click", () => {
-        // Load Polygon
-        viewer.addLayer("polygon", "polygon-layer", polygon, {
-          onClick: (e) => {
-            cust(e.features[0].properties.id);
-            viewer.removeLayer("polygon", "polygon-layer");
-          },
-          setBounds : false
-        });
-        // Load Height Graph
-        // viewer.addLayer("line", "line-layer", line, {
-        //   onClick: function (e) {
-        //     console.log(e);
-        //   },
-        // });
-        // Load Tag
-        viewer.addLayer("marker3d", "marker-layer", points, {
-          onClick: function (e) {
-            debugger;
-            console.log("Printed")
-          },
-          onHover: function (e, eventObject) {
-            console.log("properties", e)
-            console.log("eventObject", eventObject)
-            console.log("Hovered on 3d")
-          },
-          clearHover: function (e) {
-            console.log("unhovered")
-            console.log(e);
-          }
-        });
-      });
-      let rotationX = 0;
-      document.getElementById("rotate").addEventListener("click", () => {
-        rotationX += 30;
-        viewer.setLayerRotation("model", "model-layer", { rotationX });
-      });
-      //   viewer.enableDrawing({ type: "LineString", clamp: true });
-      let height = 0;
-      document.getElementById("position").addEventListener("click", () => {
-        height += 10;
-        console.log("h");
-        viewer.setLayerPosition("model", "model-layer", {
-          lat: 45.56,
-          long: 55.45,
-          height: height,
-        });
-      });
-      viewer.onDraw((d) => {
-        console.log(d);
-        var trace1 = {
-          x: [],
-          y: [],
-          type: "scatter",
-        };
-        const fets = d.object.features[0].geometry.coordinates;
-        fets.forEach((element, i) => {
-          trace1.y.push(element[2]);
-          trace1.x.push(i * 0.5);
-        });
-        Plotly.newPlot("plot", [trace1], {
-          margin: { t: 5, b: 5, pad: 5 },
-        });
-      });
-    </script>
-  </body>
-</html>