drone_view 3.0.18 → 3.0.20

package/src/layers/model.ts

@@ -0,0 +1,253 @@
+import {
+  Cesium3DTileset,
+  Cesium3DTileStyle,
+  HeadingPitchRange,
+  ShadowMode,
+  Math as cMath,
+  Transforms,
+  Cartesian3,
+  HeadingPitchRoll,
+  Matrix4,
+  SplitDirection,
+} from "cesium";
+import { Options, ModelData, Point, MapType } from "../app.interface";
+import type CesiumView from "../droneView";
+import { cartesianToPoint } from "../utility";
+/**
+ * Use this class to create a Ortho layer
+ * @param { MapBox } mapObject - The mapbox map object
+ * @param { string } uniqueName - The unique name of the layer
+ * @param { ModelData } data - The data to be used in the layer
+ * @param { Options } options - The options for the layer (see {@link Options})
+ */
+export default class ModelLayer {
+  tilsetLayerLayers: Cesium3DTileset;
+
+  data: ModelData;
+
+  modelLayerId: string;
+
+  type: string;
+
+  uniqueName: string;
+
+  opacity: number;
+
+  mapObject: CesiumView;
+
+  options: Options;
+
+  tileset: Cesium3DTileset;
+
+  mapType: MapType;
+
+  constructor(
+    mapObject: CesiumView,
+    uniqueName: string,
+    data: ModelData,
+    options: Options,
+    mapType: MapType
+
+  ) {
+    this.modelLayerId = `Model-${this.uniqueName}`;
+    this.mapType = mapType;
+    this.opacity = 1;
+    this.data = data;
+    this.mapObject = mapObject;
+    this.uniqueName = uniqueName;
+    this.options = options;
+    this.addLayer(data, true);
+  }
+
+  getSplitDirection() {
+    if (this.mapType && this.mapType === 'default') {
+        return SplitDirection.LEFT;
+    }
+
+    if (this.mapType && this.mapType === 'compare') {
+        return SplitDirection.RIGHT;
+    }
+
+    return SplitDirection.NONE;
+}
+
+  /**
+   * To load 3D data and return tileset for future use (visibility, remove, zoom)
+   * @param url string Url or Path to main tileset.json file
+   * @returns Cesium3DTileset
+   */
+  public async addTilset(
+    url: string,
+    color: string = '#ffffff',
+    shadow: boolean,
+    modelMatrix: Matrix4,
+    setBound: boolean = true
+  ) {
+    const tileset = await new Cesium3DTileset({
+      url,
+      shadows: shadow ? ShadowMode.ENABLED : ShadowMode.DISABLED,
+      maximumScreenSpaceError: 2,
+      skipLevelOfDetail: true,
+      immediatelyLoadDesiredLevelOfDetail: true,
+      dynamicScreenSpaceError: true,
+      splitDirection: this.getSplitDirection(),
+      // modelMatrix: modelMatrix,
+    });
+
+    tileset.readyPromise.then((tileset => {
+
+      const center = cartesianToPoint(tileset.boundingSphere.center);   
+
+      if (+(center.height || 0) < -1000) {
+        tileset.modelMatrix = modelMatrix;
+      }else{
+        this.data.center = center;   
+      }
+      
+      // if(!tileset.asset || !tileset.asset.extras || !tileset.asset.extras.ion || !tileset.asset.extras.ion.georeferenced){
+      //   console.log("pppp");
+      // }    
+
+      if (color) {        
+        tileset.style = new Cesium3DTileStyle({
+          color: {
+            conditions: [["true", `color("${color}", ${this.opacity})`]],
+          },
+        });
+      }
+      this.mapObject.viewer.scene.primitives.add(tileset);
+      this.tileset = tileset;
+      if (setBound) this.mapObject.viewer.zoomTo(tileset);
+      // this.tilsetLayerLayers = tilsetLayer;
+      this.mapObject.viewer.scene.requestRender();
+      return tileset;
+    }))
+
+  }
+
+  setBounds() {
+    const time = this.options.setBoundsInstant ? 0 : undefined;
+    this.mapObject.viewer.flyTo(this.tilsetLayerLayers, {
+      duration: time,
+      offset: new HeadingPitchRange(
+        cMath.toRadians(this.mapObject.viewer.camera.heading),
+        -Math.PI / 2,
+        0
+      ),
+    });
+  }
+
+  /**
+   * Add a raster layer to the map
+   * @param {number} index - The index of the layer
+   * @param {ModelData} data - The data to be used in the layer
+   */
+  async addLayer(layer: ModelData, setBound: boolean) {
+    const color = layer.color || "#ffffff";
+    const isShadow = layer.shadow || true;
+    const { url } = layer;
+    const { center } = layer;
+    const { rotationX } = layer || 0;
+    const { rotationY } = layer || 0;
+    const { rotationZ } = layer || 0;
+
+    const modelMatrix = Transforms.headingPitchRollToFixedFrame(
+      Cartesian3.fromDegrees(+center?.long || 0, +center?.lat || 0, +(center?.height || 0)),
+      new HeadingPitchRoll(
+        cMath.toRadians(rotationX),
+        cMath.toRadians(rotationY),
+        cMath.toRadians(rotationZ)
+      )
+    );
+
+    const tilsetLayer: any = await this.addTilset(
+      url,
+      color,
+      isShadow,
+      modelMatrix,
+      setBound
+    );
+
+  }
+
+  /** Remove layer from map and destroy layer */
+  public remove(): void {
+    this.mapObject.viewer.scene.primitives.remove(this.tileset);
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+  /** Show model */
+  public show(): void{
+    this.tileset.show = true;
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+    /** Hide model */
+    public hide(): void{
+      this.tileset.show = false;
+      this.mapObject.viewer.scene.requestRender();
+    }
+
+  /** @inheritdoc */
+  setOpacity(opacity: number) {    
+    this.opacity = opacity;
+    this.remove();
+    this.addLayer(this.data, false);
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+  setRotation(rotationX: number, rotationY: number, rotationZ: number) {
+
+    if (this.tileset.asset.extras.ion.georeferenced) { 
+      return;
+    }
+
+    if (rotationX) {
+      this.data.rotationX = rotationX;
+    }
+
+    if (rotationY) {
+      this.data.rotationY = rotationY;
+    }
+
+    if (rotationZ) {
+      this.data.rotationZ = rotationZ;
+    }
+
+    const { center } = this.data;
+
+    const modelMatrix = Transforms.headingPitchRollToFixedFrame(
+      Cartesian3.fromDegrees(+center.long, +center.lat, +(center.height || 0)),
+      new HeadingPitchRoll(
+        cMath.toRadians(rotationX || 0),
+        cMath.toRadians(rotationY || 0),
+        cMath.toRadians(rotationZ || 0)
+      )
+    );
+
+    this.tileset.modelMatrix = modelMatrix;
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+  setPosition(position: Point) {
+    if (this.tileset?.asset?.extras?.ion?.georeferenced) {
+      return;
+    }
+    this.data.center = position;
+    const modelMatrix = Transforms.headingPitchRollToFixedFrame(
+      Cartesian3.fromDegrees(
+        +this.data.center.long,
+        +this.data.center.lat,
+        +(this.data.center.height || 0)
+      ),
+      new HeadingPitchRoll(
+        cMath.toRadians(this.data.rotationX || 0),
+        cMath.toRadians(this.data.rotationY || 0),
+        cMath.toRadians(this.data.rotationZ || 0)
+      )
+    );
+
+    this.tileset.modelMatrix = modelMatrix;
+    this.mapObject.viewer.scene.requestRender();
+  }
+}

package/src/layers/note.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 { NoteData, NoteIcon, NoteOptions } from "../app.interface";
+import { addLabel } from "../utility";
+
+/**
+ * Use this class to create a note layer
+ * @param {MapBox} mapObject - The mapbox map object
+ * @param {string} uniqueName - The unique name of the layer
+ * @param {NoteData[]} data - The data to be used in the layer
+ * @param {NoteOptions} options - The options for the layer (see {@link NoteOptions})
+ */
+
+export default class NoteLayer {
+  noteLayerId: string;
+
+  icons: BillboardGraphics[] = [];
+
+  noteSize: 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<NoteData>
+   * @param options NoteOptions
+   */
+  constructor(
+    public mapObject: CesiumView,
+    public uniqueName: string,
+    public data: Array<NoteData>,
+    public options: NoteOptions
+  ) {
+    this.noteLayerId = `note-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 note 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("note" + this.uniqueName)
+    ) {
+      this.mapObject.viewer.dataSources.remove(
+        this.mapObject.viewer.dataSources.getByName(
+          "note" + this.uniqueName
+        )[0],
+        true
+      );
+    }
+    this.layer = new CustomDataSource("note" + this.uniqueName);
+  }
+
+  /** To add layer on map */
+  public add(data: NoteData[]) {
+    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 { NoteData[] } data - load data on map
+   * @returns { void }
+   */
+  public async addToMap(data: NoteData[]): 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 addNotes = (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.noteLayerId,
+                },
+                data: data[i].properties,
+                layerId: this.noteLayerId,
+              };
+              this.layer.entities.add(pin);
+            }
+          }
+        }
+      });
+    };
+
+    addNotes(cartesiansWith3D);
+    const updatedCartesiansWith3D = await this.mapObject.viewer.scene.clampToHeightMostDetailed(cartesians);
+    addNotes(updatedCartesiansWith3D);
+  }
+
+  /**
+   * Loads all specified note 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 { NoteIcon } icon - create bill board from icons
+   * @returns { void }
+   */
+  load(icon: NoteIcon) {
+    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 isMouseOverNote = false;
+    let hoverTimer: NodeJS.Timeout | undefined;
+
+    this.mapObject.addLayerListener('click', this.noteLayerId, (event: any) => {
+      if(this.options.onClick){
+        this.options.onClick(event);
+      }      
+    });
+
+    this.mapObject.addLayerListener(
+      'mousemove',
+      this.noteLayerId,
+      (e: any) => {
+        this.mapObject.viewer.canvas.style.cursor = 'pointer';
+        if (!isMouseOverNote) {
+          const hoverEvent = event
+          isMouseOverNote = true;
+          hoverTimer = setTimeout(() => {
+            if (this.options.onHover) {
+              this.options.onHover(e, hoverEvent);
+            }
+          }, 1000);
+        }
+      }
+    );
+
+    this.mapObject.addLayerListener(
+        'mouseenter',
+        this.noteLayerId,
+        (event: any) => {         
+          this.mapObject.viewer.canvas.style.cursor = 'pointer';
+        }
+    );
+
+    this.mapObject.addLayerListener('mouseout', this.noteLayerId, () => {
+      isMouseOverNote = 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.noteLayerId);
+}
+
+  /** 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/ortho.ts

@@ -0,0 +1,76 @@
+import {
+  ImageryLayer,
+  WebMapServiceImageryProvider,
+  WebMercatorTilingScheme,
+} from "cesium";
+import type { LayerOptions, OrthoData } from "../app.interface";
+import type CesiumView from "../droneView";
+/**
+ * Use this class to create a Ortho layer
+ * @param {CesiumView} mapObject - The CesiumView map object
+ * @param {string} uniqueName - The unique name of the layer
+ * @param {OrthoData} data - The data to be used in the layer
+ * @param {LayerOptions} options - The options for the layer (see {@link LayerOptions})
+ */
+class RasterLayer {
+  imageryLayer: ImageryLayer;
+
+  orthoId: string;
+
+  constructor(
+    public mapObject: CesiumView,
+    public uniqueName: string,
+    public data: OrthoData,
+    public options: LayerOptions
+  ) {
+    this.orthoId = `ortho-layer-${uniqueName}`;
+
+    this.addRaster(data);
+  }
+
+  /**
+   * Add a raster layer to the map
+   * @param {OrthoData} data - The data to be used in the layer
+   */
+  addRaster(layer: OrthoData) {
+    let opacity = 1;
+
+    console.log(layer);
+    
+    const imageryLayer =
+      this.mapObject.viewer.scene.imageryLayers.addImageryProvider(
+        new WebMapServiceImageryProvider({
+          url: layer.url,
+          layers: 'ortho',
+          parameters: {
+            transparent: "true",
+            format: "image/png",
+          },
+          tileWidth: layer.tileSize || 256,
+          tileHeight: layer.tileSize || 256,
+          maximumLevel: layer.maxZoom || 23,
+          minimumLevel: layer.minZoom || 0,
+          credit: layer.credit,
+          tilingScheme: new WebMercatorTilingScheme(),
+        })
+      );
+
+    imageryLayer.alpha = opacity;
+
+    this.imageryLayer = imageryLayer;
+
+    // this.mapObject.viewer.zoomTo(this.imageryLayer)
+  }
+
+  /** Remove layer from map and destroy layer */
+  public remove(): void {
+    this.mapObject.viewer.scene.imageryLayers.remove(this.imageryLayer, true);
+    this.mapObject.viewer.scene.requestRender();
+  }
+
+  setOpacity(opacity: number) {
+    this.imageryLayer.alpha = opacity * 0.01;
+    this.mapObject.viewer.scene.requestRender();
+  }
+}
+export default RasterLayer;