drone_view 3.0.18 → 3.0.20

package/src/layers/marker.ts

@@ -0,0 +1,333 @@
+import {
+  Cartesian2,
+  Color,
+  CustomDataSource,
+  BillboardGraphics,
+  Math as cMath,
+  HeadingPitchRange,
+  Cartesian3,
+  HeightReference,
+  VerticalOrigin,
+} from "cesium";
+
+import type CesiumView from "../droneView";
+
+import { MarkerData, MarkerIcon, MarkerOptions } from "../app.interface";
+import { addLabel } from "../utility";
+
+/**
+ * Use this class to create a marker layer
+ * @param {MapBox} mapObject - The mapbox map object
+ * @param {string} uniqueName - The unique name of the layer
+ * @param {MarkerData[]} data - The data to be used in the layer
+ * @param {MarkerOptions} options - The options for the layer (see {@link MarkerOptions})
+ */
+
+export default class MarkerLayer {
+  markerLayerId: string;
+
+  icons: BillboardGraphics[] = [];
+
+  markerSize: number = 12.5;
+
+  allowSVGs: boolean = false;
+
+  opacity: number;
+
+  layer: CustomDataSource;
+
+  /**
+   * @param mapObject CesiumView map object
+   * @param uniqueName string unique name for the layer
+   * @param data Array<MarkerData>
+   * @param options MarkerOptions
+   */
+  constructor(
+    public mapObject: CesiumView,
+    public uniqueName: string,
+    public data: Array<MarkerData>,
+    public options: MarkerOptions
+  ) {
+    this.markerLayerId = `marker-layer-${this.uniqueName}`;
+
+    this.opacity = 1;
+
+    this.allowSVGs = true;
+    const agent = navigator.userAgent.toLowerCase();
+    if (
+      (typeof this.options.allowSVGs !== "undefined" &&
+        !this.options.allowSVGs) ||
+      (agent.indexOf("chrome") === -1 &&
+        (agent.indexOf("edg") !== -1 ||
+          agent.indexOf("edge") !== -1 ||
+          agent.indexOf("msie") !== -1 ||
+          agent.indexOf("trident") > -1 ||
+          agent.indexOf("firefox") > -1 ||
+          agent.indexOf("safari") > -1))
+    ) {
+      this.allowSVGs = false;
+    }
+
+    // load icons before adding marker on map
+    this.loadIcons().then(() => {
+      this.buildLayer();
+      this.add(this.data).then(() => {
+        if (this.options.setBounds === undefined || this.options.setBounds) {
+          this.setBounds();
+        }
+        this.addListeners();
+      });
+    });
+  }
+
+  /** To initialize layer */
+  public buildLayer(): void {
+    if (
+      this.mapObject.viewer.dataSources.getByName("marker" + this.uniqueName)
+    ) {
+      this.mapObject.viewer.dataSources.remove(
+        this.mapObject.viewer.dataSources.getByName(
+          "marker" + this.uniqueName
+        )[0],
+        true
+      );
+    }
+    this.layer = new CustomDataSource("marker" + this.uniqueName);
+  }
+
+  /** To add layer on map */
+  public add(data: MarkerData[]) {
+    const self = this;
+
+    return new Promise<void>((resolve) => {
+      self.addToMap(data).then(() => {
+        this.mapObject.viewer.dataSources.add(this.layer);
+
+        this.mapObject.viewer.scene.requestRender();
+        resolve();
+      });
+    });
+  }
+
+  /**
+   *
+   * @param { MarkerData[] } data - load data on map
+   * @returns { void }
+   */
+  public async addToMap(data: MarkerData[]): Promise<void> {
+    const cartesians: any = [];
+    const cartesiansWith3D: any = [];
+
+    data.forEach((point: any) => {
+      if (point.point[2])
+      {
+        cartesiansWith3D.push(Cartesian3.fromDegrees(point.point[0], point.point[1], point.point[2]));
+      }
+      else{
+        cartesians.push(Cartesian3.fromDegrees(point.point[0], point.point[1]));
+      }
+    });
+
+    const addMarkers = (positions: Cartesian3[]): void => {
+      positions.forEach((position: Cartesian3, i: number) => {
+        const iconIndex = Object.keys(this.options.icons).findIndex(
+          (icon) =>
+            icon === data[i].properties.icon ||
+            (this.options.icons[+icon] &&
+              this.options.icons[+icon].name === data[i].properties.icon)
+        );
+
+        if (iconIndex >= 0) {
+          const selected_icon_src = this.options.icons[+iconIndex].src
+          for (const hash of this.icons) {
+            const billBoardSource = (hash.image as any)._value;
+            if (billBoardSource === selected_icon_src){
+              const pin = {
+                position,
+                billboard: hash,
+                label : {
+                  text: (data[i].properties.label || ''),
+                  font : '16px sans-serif',
+                  eyeOffset : Cartesian3.ZERO,
+                  showBackground: true,
+                  pixelOffset : new Cartesian2(0,-20),
+                  data: data[i].properties,
+                  layerId: this.markerLayerId,
+                },
+                data: data[i].properties,
+                layerId: this.markerLayerId,
+              };
+              this.layer.entities.add(pin);
+            }
+          }
+        }
+      });
+    };
+
+    addMarkers(cartesiansWith3D);
+    const updatedCartesiansWith3D = await this.mapObject.viewer.scene.clampToHeightMostDetailed(cartesians);
+    addMarkers(updatedCartesiansWith3D);
+  }
+
+  /**
+   * Loads all specified marker icons and adds them to the map. Icons must be loaded before they can be used.
+   */
+  private loadIcons() {
+    const self = this;
+    return new Promise<void>((resolve) => {
+      const loadCommands: any = [];
+      const { icons } = self.options;
+
+      Object.keys(icons).forEach((iconID: any) => {
+        if (iconID !== "contains") {
+          console.log(icons[iconID]);
+          loadCommands.push(self.load(icons[iconID]));
+        }
+      });
+      Promise.all(loadCommands)
+        .then(() => {
+          resolve();
+        })
+        .catch(() => {
+          const loadingElement = document.getElementById("main-loading");
+          if (loadingElement) {
+            loadingElement.style.display = "none";
+          }
+        });
+    });
+  }
+
+  /**
+   *
+   * @param { MarkerIcon } icon - create bill board from icons
+   * @returns { void }
+   */
+  load(icon: MarkerIcon) {
+    const self = this;
+    return new Promise<void>((resolve) => {
+      let url = icon.src;
+      if (
+        this.options.allowSVGs &&
+        (typeof icon.options.allowSVG === "undefined" || icon.options.allowSVG)
+      ) {
+        url = url.replace(".png", ".svg");
+      }
+      const { pixelRatio } = icon.options;
+      console.log(url);
+
+      const image: any = new Image();
+      const visibility = icon?.options?.deficiency === true ? 0 : Number.POSITIVE_INFINITY
+      image.onload = function () {
+        self.icons.push(
+          new BillboardGraphics({
+            image: url,
+            color: Color.WHITE.withAlpha(self.opacity || 1),
+            disableDepthTestDistance: visibility,
+            verticalOrigin: VerticalOrigin.BASELINE,
+            pixelOffset : new Cartesian2(0,-30),
+            width: this.width / +(pixelRatio || 4),
+            height: this.height / +(pixelRatio || 4),
+            rotation: cMath.toRadians(self.options.rotate || 0),
+          })
+        );
+        resolve();
+      };
+      image.src = url;
+    });
+  }
+
+  /** Set bounds after adding a layer */
+  public setBounds(): void {
+    const time = this.options.setBoundsInstant ? 0 : undefined;
+    this.mapObject.viewer.flyTo(this.layer.entities, {
+      duration: time,
+      offset: new HeadingPitchRange(
+        cMath.toRadians(this.mapObject.viewer.camera.heading),
+        -Math.PI / 2,
+        0
+      ),
+    });
+  }
+
+  public addListeners() {
+    var isMouseOverMarker = false;
+    let hoverTimer: NodeJS.Timeout | undefined;
+
+    this.mapObject.addLayerListener('click', this.markerLayerId, (event: any) => {
+      if(this.options.onClick){
+        this.options.onClick(event);
+      }      
+    });
+
+    this.mapObject.addLayerListener(
+      'mousemove',
+      this.markerLayerId,
+      (e: any) => {
+        this.mapObject.viewer.canvas.style.cursor = 'pointer';
+        if (!isMouseOverMarker) {
+          const hoverEvent = event
+          isMouseOverMarker = true;
+          hoverTimer = setTimeout(() => {
+            if (this.options.onHover) {
+              this.options.onHover(e, hoverEvent);
+            }
+          }, 1000);
+        }
+      }
+    );
+
+    this.mapObject.addLayerListener(
+        'mouseenter',
+        this.markerLayerId,
+        (event: any) => {         
+          this.mapObject.viewer.canvas.style.cursor = 'pointer';
+        }
+    );
+
+    this.mapObject.addLayerListener('mouseout', this.markerLayerId, () => {
+      isMouseOverMarker = false;
+      clearTimeout(hoverTimer);
+      this.mapObject.viewer.canvas.style.cursor = '';
+      if (this.options.clearHover) {
+        this.options.clearHover(event);
+      }
+    });
+}
+
+/** Removes all listeners added by this layer */
+public removeListeners() {
+    this.mapObject.removeLayerListeners(this.markerLayerId);
+}
+
+  /** Remove layer from map and destroy layer */
+  public remove(): void {
+    this.mapObject.viewer.dataSources.remove(this.layer, true);
+    this.removeListeners();
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+  /** enables visibility of the layer */
+  public show(): void {
+    this.layer.show = true;
+  }
+
+  /** Disables visibility of the layer */
+  public hide(): void {
+    this.layer.show = false;
+  }
+
+  /**
+   * Sets opacity of the layer
+   * @param opacity number between 0-1
+   */
+  public setOpacity(opacity: number): void {
+    this.opacity = opacity;
+    this.icons = [];
+    this.loadIcons().then(() => {
+      this.opacity = opacity;
+      this.remove();
+      this.buildLayer();
+      this.add(this.data);
+    });
+  }
+}

package/src/layers/marker3d.ts

@@ -0,0 +1,326 @@
+import {
+  Cartesian2,
+  Color,
+  CustomDataSource,
+  BillboardGraphics,
+  Math as cMath,
+  HeadingPitchRange,
+  Cartesian3,
+  HeightReference,
+  VerticalOrigin,
+  Entity,
+  ScreenSpaceEventHandler,
+  ScreenSpaceEventType,
+} from "cesium";
+
+import type CesiumView from "../droneView";
+
+import { MarkerData, MarkerIcon, MarkerOptions } from "../app.interface";
+
+/**
+ * Use this class to create a marker layer
+ * @param {MapBox} mapObject - The mapbox map object
+ * @param {string} uniqueName - The unique name of the layer
+ * @param {MarkerData[]} data - The data to be used in the layer
+ * @param {MarkerOptions} options - The options for the layer (see {@link MarkerOptions})
+ */
+export default class Marker3DLayer {
+  markerLayerId: string;
+
+  icons: Entity[] = [];
+
+  markerSize: number = 12.5;
+
+  allowSVGs: boolean = false;
+
+  opacity: number;
+
+  layer: CustomDataSource;
+  handler: ScreenSpaceEventHandler;
+  hoverTimeout: NodeJS.Timeout | undefined;
+  isMouseOverMarker: boolean = false
+
+  /**
+   * @param mapObject CesiumView map object
+   * @param uniqueName string unique name for the layer
+   * @param data Array<MarkerData>
+   * @param options MarkerOptions
+   */
+  constructor(
+    public mapObject: CesiumView,
+    public uniqueName: string,
+    public data: Array<MarkerData>,
+    public options: MarkerOptions
+  ) {
+    this.markerLayerId = `marker-layer-${this.uniqueName}`;
+
+    this.opacity = 1;
+
+    // this.allowSVGs = true;
+    // const agent = navigator.userAgent.toLowerCase();
+    // if (
+    //   (typeof this.options.allowSVGs !== "undefined" &&
+    //     !this.options.allowSVGs) ||
+    //   (agent.indexOf("chrome") === -1 &&
+    //     (agent.indexOf("edg") !== -1 ||
+    //       agent.indexOf("edge") !== -1 ||
+    //       agent.indexOf("msie") !== -1 ||
+    //       agent.indexOf("trident") > -1 ||
+    //       agent.indexOf("firefox") > -1 ||
+    //       agent.indexOf("safari") > -1))
+    // ) {
+    //   this.allowSVGs = false;
+    // }
+
+    // load icons before adding marker on map
+    // this.loadIcons().then(() => {
+      this.buildLayer();
+      this.add(this.data).then(() => {
+        if (this.options.setBounds === undefined || this.options.setBounds) {
+          this.setBounds();
+        }
+        this.addListeners();
+      });
+    // });
+  }
+
+  /** To initialize layer */
+  public buildLayer(): void {
+    if (
+      this.mapObject.viewer.dataSources.getByName("marker" + this.uniqueName)
+    ) {
+      this.mapObject.viewer.dataSources.remove(
+        this.mapObject.viewer.dataSources.getByName(
+          "marker" + this.uniqueName
+        )[0],
+        true
+      );
+    }
+    this.layer = new CustomDataSource("marker" + this.uniqueName);
+  }
+
+  /** To add layer on map */
+  public add(data: MarkerData[]) {
+    const self = this;
+
+    return new Promise<void>((resolve) => {
+      self.addToMap(data).then(() => {
+        this.mapObject.viewer.dataSources.add(this.layer);
+
+        this.mapObject.viewer.scene.requestRender();
+        resolve();
+      });
+    });
+  }
+
+  /**
+   *
+   * @param { MarkerData[] } data - load data on map
+   * @returns { void }
+   */
+
+  public addToMap(data: MarkerData[]) {
+    return new Promise<void>((resolve) => {
+      const cartesians: any = [];
+      const cartesiansWithOutHeight: any = [];
+      const positionWithOutHeight: any = [];
+
+      console.log("data", data)
+      data.forEach((point) => {
+        const height = point.point[2] + 0.5;
+
+        if (point.point[2] == 0 || point.point[2] == null) {
+          const position = Cartesian3.fromDegrees(point.point[0], point.point[1]);
+          cartesiansWithOutHeight.push({ position,  properties: point});
+          positionWithOutHeight.push(position)
+        } else {
+          const position = Cartesian3.fromDegrees(point.point[0], point.point[1], height || 0);
+          cartesians.push({
+            position,
+            properties: point,
+          });
+        }
+      });
+      console.log("cartesians", cartesians)
+      console.log("cartesiansWithOutHeight", cartesiansWithOutHeight)
+      console.log("positionWithOutHeight", positionWithOutHeight)
+
+      cartesians.forEach((position: any = [], i: number) => {
+        // const iconIndex = Object.keys(this.options.icons).findIndex(
+        //   (icon) =>
+        //     icon === data[i].properties.icon ||
+        //     (this.options.icons[+icon] &&
+        //       this.options.icons[+icon].name === data[i].properties.icon)
+        // );
+        // if (iconIndex >= 0) {
+        //   const pin = {
+        //     position,
+        //     billboard: this.icons[iconIndex],
+        //     data: data[i].properties,
+        //     layerId: this.markerLayerId,
+        //   };
+        //   this.layer.entities.add(pin);
+        var markerProperty = position.properties.properties
+        this.layer.entities.add({
+            // name: 'Model 1',
+            position: position.position,
+            model: {uri : markerProperty.icon, scale: markerProperty.scale},
+            properties: position.properties
+        });
+
+          // Clone the model entity with different positions
+        //   var modelEntity1 = viewer.entities.add(this.icons[iconIndex].clone());
+        //   modelEntity1.position = position;
+        // }
+        //   });
+        resolve();
+      })
+
+      this.mapObject.viewer.scene
+        .clampToHeightMostDetailed(positionWithOutHeight)
+        .then((pos) => {
+        cartesiansWithOutHeight.forEach((position: any = [], i: number) => {
+          // const iconIndex = Object.keys(this.options.icons).findIndex(
+          //   (icon) =>
+          //     icon === data[i].properties.icon ||
+          //     (this.options.icons[+icon] &&
+          //       this.options.icons[+icon].name === data[i].properties.icon)
+          // );
+          // if (iconIndex >= 0) {
+          //   const pin = {
+          //     position,
+          //     billboard: this.icons[iconIndex],
+          //     data: data[i].properties,
+          //     layerId: this.markerLayerId,
+          //   };
+          //   this.layer.entities.add(pin);
+
+          var markerWithoutHeightProperty = position.properties.properties
+          this.layer.entities.add({
+              // name: 'Model 1',
+              position: position.position,
+              model: {uri : markerWithoutHeightProperty.icon, scale: markerWithoutHeightProperty.scale},
+              properties: position.properties
+          });
+
+          // Clone the model entity with different positions
+          //   var modelEntity1 = viewer.entities.add(this.icons[iconIndex].clone());
+          //   modelEntity1.position = position;
+          // }
+          //   });
+          resolve();
+        });
+      })
+    });
+  }
+
+
+  /** Set bounds after adding a layer */
+  public setBounds(): void {
+    const time = this.options.setBoundsInstant ? 0 : undefined;
+    this.mapObject.viewer.flyTo(this.layer.entities, {
+      duration: time,
+      offset: new HeadingPitchRange(
+        cMath.toRadians(this.mapObject.viewer.camera.heading),
+        -Math.PI / 2,
+        0
+      ),
+    });
+  }
+
+  public addListeners() {
+    this.handler = new ScreenSpaceEventHandler(this.mapObject.viewer.canvas);
+
+    // Change the event type to LEFT_CLICK
+    this.handler.setInputAction(
+      this.iconClickHandler.bind(this),
+      ScreenSpaceEventType.LEFT_CLICK
+    );
+
+    // Add MOUSE_MOVE event for on-hover functionality
+    this.handler.setInputAction(
+      this.iconHoverHandler.bind(this),
+      ScreenSpaceEventType.MOUSE_MOVE
+    );
+  }
+
+  iconHoverHandler(event: any) {
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout);
+    }
+    const pickedObject = this.mapObject.viewer.scene.pick(event.endPosition);
+
+    if (pickedObject && pickedObject.id) {
+      if (!this.isMouseOverMarker) {
+        this.hoverTimeout = setTimeout(() => {
+          this.isMouseOverMarker = true;
+          const hoveredMarkerProperties = pickedObject.id.properties?.properties?._value;
+          if (this.options.onHover) {
+            this.options.onHover(hoveredMarkerProperties, event);
+          }
+        }, 1000);
+      }
+    } else {
+      if (this.isMouseOverMarker){
+        clearTimeout(this.hoverTimeout);
+        if (this.options.clearHover) {
+          this.options.clearHover(event);
+        }
+        this.isMouseOverMarker = false;
+      }
+    }
+  }
+
+  iconClickHandler(event: any) {
+    const pickedObject = this.mapObject.viewer.scene.pick(event.position);
+
+    if (pickedObject && pickedObject.id) {
+      const selectedMarker = pickedObject.id.properties?.properties?._value
+
+      if (this.options.onClick) {
+        this.options.onClick(selectedMarker);
+      }
+    }
+  }
+  /** Removes all listeners added by this layer */
+  public removeListeners() {
+    this.handler.removeInputAction(ScreenSpaceEventType.LEFT_DOWN);
+    this.handler.removeInputAction(ScreenSpaceEventType.LEFT_UP);
+    this.handler.removeInputAction(ScreenSpaceEventType.MOUSE_MOVE);
+    this.handler.removeInputAction(ScreenSpaceEventType.PINCH_END);
+    this.handler.removeInputAction(ScreenSpaceEventType.PINCH_START);
+    this.handler.removeInputAction(ScreenSpaceEventType.PINCH_MOVE);
+  }
+
+  /** Remove layer from map and destroy layer */
+  public remove(): void {
+    this.mapObject.viewer.dataSources.remove(this.layer, true);
+    this.removeListeners();
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+  /** enables visibility of the layer */
+  public show(): void {
+    this.layer.show = true;
+  }
+
+  /** Disables visibility of the layer */
+  public hide(): void {
+    this.layer.show = false;
+  }
+
+  /**
+   * Sets opacity of the layer
+   * @param opacity number between 0-1
+   */
+  public setOpacity(opacity: number): void {
+    this.opacity = opacity;
+    this.icons = [];
+    // this.loadIcons().then(() => {
+      this.opacity = opacity;
+      this.remove();
+      this.buildLayer();
+      this.add(this.data);
+    // });
+  }
+}