drone_view 3.0.20 → 3.0.21

package/src/layers/marker.ts

@@ -1,333 +0,0 @@
-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

@@ -1,326 +0,0 @@
-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);
-    // });
-  }
-}