drone_view 3.0.18 → 3.0.20

package/src/utility.ts

@@ -0,0 +1,802 @@
+import {
+  BoundingSphere,
+  Cartesian2,
+  Cartesian3,
+  Color,
+  VerticalOrigin,
+  Viewer,
+  CallbackProperty,
+  defined,
+  Entity,
+  HorizontalOrigin,
+  Math as cMath,
+  PolylineDashMaterialProperty,
+  HeightReference,
+  Ellipsoid,
+  LabelStyle,
+  DistanceDisplayCondition,
+  HeadingPitchRoll,
+  Transforms,
+  Quaternion, Matrix3
+} from "cesium";
+// @ts-ignore
+import * as Normalize from "normalize-value";
+import * as Cesium from "cesium";
+import type {
+  DrawingConfig,
+  Point,
+  LabelConfigByCartesian,
+} from "./app.interface";
+
+// Min map scale wrt google map
+export const mapScale = 591657550.5;
+// Map Maximum zoom level
+export const mapMaxZoom = 23;
+// Map min zoom level
+export const mapMinZoom = 0;
+
+/**
+ * To check object exist in cesium viewer
+ * @param obj Cesium object
+ * @returns boolean
+ */
+export const isCesiumObject = (obj: any) => defined(obj);
+
+/**
+ * Convert camera distance to zoom level
+ * @param height number distance between camera position and map earth surface
+ * @returns number zoom level between 0-23
+ */
+export const cameraHeightToZoomLevel = (height: number): number => {
+  for (let i = mapMinZoom; i <= mapMaxZoom; i += 1) {
+    // To check camera distance from earth lies between which zoom levels
+    if (height >= mapScale / 2 ** +(i + 1) && height < mapScale / 2 ** +i) {
+      const afterDecimal = Normalize.default(height, [
+        { value: mapScale / 2 ** +(i + 1), norm: 0 },
+        { value: mapScale / 2 ** +i, norm: 1 },
+      ]);
+      return i + afterDecimal;
+    }
+  }
+
+  throw new Error("Something went wrong");
+};
+
+/**
+ * Covert zoom level to camera distance
+ * @param zoom Zoom level
+ * @returns Distance between camera and earth surface
+ */
+export const zoomLevelToCameraHeight = (zoom: number): number =>
+  Normalize.default(
+    zoom.toString().split(".")[1] ? +zoom.toString().split(".")[1] : 0,
+    [
+      {
+        value: 0,
+        norm: mapScale / 2 ** +(zoom + 1).toString().split(".")[0],
+      },
+      { value: 1, norm: mapScale / 2 ** +zoom.toString().split(".")[0] },
+    ]
+  );
+
+/**
+ * This method allows user to convert position from Latitude,
+ *  Longitude & altitude to Cesium Cartesian3 format
+ * @param position - Json object contains Latitude, Longitude & Altitude
+ * @returns - Cesium Cartesian3 Position
+ */
+export const PointToCartesian = (position: Point): Cartesian3 => {
+  const cartesian = Cartesian3.fromDegrees(
+    +position.long,
+    +position.lat,
+    +(position.height || 0)
+  );
+  return cartesian;
+};
+
+/**
+ * To convert Cartesian3 to Point
+ * @param position Cartesian3 position
+ * @returns Point
+ */
+export const cartesianToPoint = (position: Cartesian3): Point => {
+  const cartographic = Ellipsoid.WGS84.cartesianToCartographic(position);
+  return {
+    long: cMath.toDegrees(cartographic.longitude),
+    lat: cMath.toDegrees(cartographic.latitude),
+    height: cartographic.height,
+  };
+};
+
+/**
+ * This Function is for converting array of Cartesian to lat lng
+ * @param { Cartesian3[] } positions - Array of Cesium Cartesian3 Position
+ * @returns Array of longitude, latitude & height
+ */
+export const cartesianArrayToPointArray = (positions: Cartesian3[]) => {
+  const langLats: any = [];
+  positions.forEach((position) => {
+    const cartographic = Ellipsoid.WGS84.cartesianToCartographic(position);
+    langLats.push([
+      cMath.toDegrees(cartographic.longitude),
+      cMath.toDegrees(cartographic.latitude),
+      cartographic.height,
+    ]);
+  });
+  return langLats;
+};
+
+/**
+ * To
+ * @param { Point[] } positions
+ * @returns { Cartesian3[] }
+ */
+export const pointArrayToCartesianArray = (positions: Array<Array<number>>) => {
+  const cartesians: Cartesian3[] = [];
+  positions.forEach((position) => {
+    cartesians.push(
+      PointToCartesian({
+        lat: +position[1],
+        long: +position[0],
+        height: +(position[2] || 0),
+      })
+    );
+  });
+  return cartesians;
+};
+
+/**
+ * Covert cesium coordinates to geojson feature collection
+ * @param positions Array<Cartesian3>
+ * @param type DrawingConfig['type']
+ * @returns any
+ */
+export const cartesianToGeojson = (
+  positions: Array<Cartesian3>,
+  type: DrawingConfig["type"],
+  properties?: any
+) => {
+  const features: any = [];
+  if (type === "Polygon") {
+    const feature = {
+      type: "Feature",
+      geometry: {
+        type: "Polygon",
+        coordinates: [cartesianArrayToPointArray(positions)],
+      },
+    };
+    features.push(feature);
+  } else if (type === "Point") {
+    positions.forEach((position) => {
+      const feature = {
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [
+            cartesianToPoint(position).long,
+            cartesianToPoint(position).lat,
+            cartesianToPoint(position).height,
+          ],
+        },
+      };
+      features.push(feature);
+    });
+  } else {
+    const feature = {
+      type: "Feature",
+      geometry: {
+        type: "LineString",
+        coordinates: cartesianArrayToPointArray(positions),
+      },
+    };
+    features.push(feature);
+  }
+
+  const geojson = {
+    type: "FeatureCollection",
+    features,
+    properties,
+  };
+
+  return geojson;
+};
+
+// eslint-disable-next-line consistent-return
+export const getEntityById = (viewer: Viewer, windowPosition: Cartesian2) => {
+  let object;
+  if (viewer.scene.pickPositionSupported) {
+    const pickedObject = viewer.scene.pick(windowPosition);
+
+    if (pickedObject?.id instanceof Entity) {
+      object = pickedObject.id;
+    }
+    return object;
+  }
+};
+
+/**
+ * Get global position from mouse screen position
+ * @param viewer Viewer
+ * @param windowPosition Mouse window position object
+ * @returns Object with feature details and position
+ */
+export const screenToWorldPosition = (
+  viewer: Viewer,
+  windowPosition: Cartesian2
+):
+  | {
+      data?: { [key: string]: string };
+      position: Cartesian3;
+      id?: string;
+      layerId?: string;
+    }
+  | any => {
+  const entity = getEntityById(viewer, windowPosition);
+  const position = viewer.scene.pickPosition(windowPosition);
+  if (position) {
+    return {
+      position,
+      data: entity?.data,
+      id: entity ? entity : undefined,
+      layerId: entity?.layerId,
+    };
+  }
+
+  const ray = viewer.scene.camera.getPickRay(windowPosition)!;
+  return { position: viewer.scene.globe.pick(ray, viewer.scene)! };
+};
+
+/**
+ * This function allows user to get distance between two points
+ * @param left - Position first
+ * @param right - Position second
+ * @returns Distance between first and second position in meter
+ */
+export const distance2D = (left: Cartesian2, right: Cartesian2): number => {
+  const distance = Cartesian2.distance(left, right);
+  return distance;
+};
+
+/**
+ * This function allows user to compute sum of distances between the positions
+ * @param position - Array of positions
+ * @returns Sum of distances between the positions in meter
+ */
+export const distance3D = (positions: Array<Cartesian3>): number => {
+  let length = 0;
+  for (let i = 0; i < positions.length - 1; i += 1) {
+    length += Cartesian3.distance(positions[i], positions[i + 1]);
+  }
+  return length;
+};
+
+/**
+ * This function allows user to get mid point between two position
+ * @param left - first position
+ * @param right - second position
+ * @returns Mid Point in Cartesian3 format
+ */
+export const getMidPoint = (
+  left: Cartesian3,
+  right: Cartesian3
+): Cartesian3 => {
+  const midPoint = Cartesian3.add(left, right, new Cartesian3());
+  Cartesian3.multiplyByScalar(midPoint, 0.5, midPoint);
+  return midPoint;
+};
+
+export const getPolygonCenter = (positions: Array<Cartesian3>): Cartesian3 => {
+  const { center } = BoundingSphere.fromPoints(positions);
+  return center;
+};
+
+/**
+ * This function allows user to get area of 3D Polygon
+ * @param polygonEntity : Cesium Polygon entity/geometry
+ * @returns Area in square meter
+ */
+export const calculateArea = (pointData: Array<Point>): number => {
+  let area = 0;
+  const positions: any = [];
+  pointData.forEach((point) => {
+    positions.push(PointToCartesian(point));
+  });
+
+  for (let i = 0; i < positions.length - 2; i += 1) {
+    const vector1 = positions[0];
+    const vector2 = positions[i + 1];
+    const vector3 = positions[i + 2];
+    const vectorC = Cartesian3.subtract(vector2, vector1, new Cartesian3());
+    const vectorD = Cartesian3.subtract(vector3, vector1, new Cartesian3());
+    const areaVector = Cartesian3.cross(vectorC, vectorD, new Cartesian3());
+    area += Cartesian3.magnitude(areaVector) / 2.0;
+  }
+  return area;
+};
+
+export const calculate3DArea = (geoPoints: Point[]): number => {
+  const points: Cartesian3[] = geoPoints.map((p) =>
+    Cartesian3.fromDegrees(Number(p.long), Number(p.lat), Number(p.height) || 0)
+  );
+  console.log('dddddd',points)
+  if (points.length < 3) return 0; // Not enough points to form an area
+
+  let area = 0;
+  const origin = points[0];
+
+  for (let i = 1; i < points.length - 1; i++) {
+    const vec1 = Cartesian3.subtract(points[i], origin, new Cartesian3());
+    const vec2 = Cartesian3.subtract(points[i + 1], origin, new Cartesian3());
+    const cross = Cartesian3.cross(vec1, vec2, new Cartesian3());
+    const triangleArea = Cartesian3.magnitude(cross) / 2.0;
+    area += triangleArea;
+  }
+
+  return area;
+};
+
+export const calculate3DPerimeter = (points: Point[]): number => {
+  const cartesianPoints = points.map(p =>
+    Cartesian3.fromDegrees(Number(p.long), Number(p.lat), Number(p.height) || 0)
+  );
+
+  let length = 0;
+  for (let i = 0; i < cartesianPoints.length; i++) {
+    const current = cartesianPoints[i];
+    const next = cartesianPoints[(i + 1) % cartesianPoints.length]; // loop back to start
+    length += Cartesian3.distance(current, next);
+  }
+
+  return length; // in meters
+};
+
+/**
+ * This method allows user to add a point on map on a position
+ * @param viewer - Cesium Viewer object
+ * @param position - Cesium Cartesian3 position
+ * @param id - Id thats user want to assign point entity
+ * @param id - Id thats user want to assign point entity
+ * @returns - Point type Entity
+ */
+export const addPoint = (
+  viewer: Viewer,
+  position: Cartesian3,
+  id?: string,
+  size?: number,
+  color?: CallbackProperty,
+  noOutline?: boolean
+): Entity => {
+  if (id && viewer.entities.getById(id))
+    viewer.entities.remove(viewer.entities.getById(id)!);
+
+  const svg = `<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="10" cy="10" r="8.5" stroke="red" stroke-width="1.5" fill="whiteSmoke" />
+  </svg>`;
+
+  const point = viewer.entities.add({
+    id,
+    position,
+    // point: {
+    //   pixelSize: size || 10,
+    //   color: color || Color.WHITE,
+    //   heightReference: HeightReference.RELATIVE_TO_GROUND,
+    //   outlineColor: Color.BLACK,
+    //   outlineWidth: noOutline ? 0 : 3,
+    //   // disableDepthTestDistance: 10
+    // },
+    billboard: {
+      image: `data:image/svg+xml;base64,${window.btoa(svg)}`,
+      verticalOrigin: VerticalOrigin.CENTER,
+      eyeOffset: new Cartesian3(0, 0, -1),
+    },
+  });
+  return point;
+};
+
+/**
+ * This method allows user to add a polyline on map using set of user provided position
+ * @param viewer - Cesium Viewer object
+ * @param positions - Array of position in Cesium cartesian3
+ * @param config - Configuration object to control color & width of line
+ * @returns - Cesium Polyline entity
+ */
+export const addPolyLineFilled = (
+  viewer: Viewer,
+  positions: Array<Cartesian3>,
+  config?: DrawingConfig,
+  layerId?: string,
+  properties?: any
+): any => {
+  if (config?.id && viewer.entities.getById(config.id)) {
+    viewer.entities.remove(viewer.entities.getById(config.id)!);
+  }
+
+  return {
+    id: config?.id,
+    polyline: {
+      // classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
+      depthFailMaterial: config?.lineColor
+        ? Color.fromCssColorString(config.lineColor)
+        : Color.fromCssColorString("#FF0000"),
+      positions,
+      width: config?.lineWidth ? config?.lineWidth : 3,
+
+      material: config?.lineColor
+      ? Color.fromCssColorString(config.lineColor).withAlpha(
+          config.opacity ? config.opacity : 1
+        )
+      : Color.fromCssColorString("#FFC72C").withAlpha(
+          config?.opacity ? config.opacity : 1
+        ),
+      clampToGround: properties?.clamp,
+    },
+    layerId,
+    heightReference: HeightReference.CLAMP_TO_GROUND,
+    data: properties,
+  };
+};
+
+/**
+ * Get pyramid cone for camera position
+ * @param position - position in Cesium cartesian3
+ * @param layerId - layer Id
+ * @param url - image url
+ * @returns - Cesium Polyline entity
+ */
+export const getPyramid = (
+  position: Cartesian3,
+  layerId?: string,
+  url?: string,
+  angle?: number,
+  z_angle?: number,
+  flightpitchdegree?: number,
+  flightrolldegree?: number,
+  flightyawdegree?: number,
+  directionVector?: [number, number, number]
+): any => {
+
+  let orientation: Quaternion;
+
+  // Check if direction vector is provided, otherwise calculate from yaw and pitch
+  if (directionVector) {
+    const direction = new Cartesian3(directionVector[0], directionVector[1], directionVector[2]);
+    // Calculate orientation using the direction vector
+    orientation = getOrientationFromDirectionVector(position, direction);
+  } else {
+    // If no direction vector, use yaw, pitch, and roll
+    const heading = cMath.toRadians(angle || 0);
+    const pitch = cMath.toRadians(z_angle || 0);
+    const roll = cMath.toRadians(flightrolldegree || 0);
+    const hpr = new HeadingPitchRoll(heading, pitch, roll);
+    orientation = Transforms.headingPitchRollQuaternion(position, hpr);
+  }
+
+  return {
+    position: position,
+    orientation: orientation,
+    cylinder: {
+      topRadius: 0,
+      bottomRadius: 1.5,
+      length: 1.5,
+      slices: 4,
+      material: Color.WHITE.withAlpha(0.01),
+      outline: true,
+      outlineColor: Color.WHITE,
+      outlineWidth: 5,
+    },
+    layerId,
+    data: { url },
+  };
+};
+
+function getOrientationFromDirectionVector(position: Cartesian3, direction: Cartesian3): Quaternion {
+  // Compute the rotation matrix from the direction vector
+  const up = Cartesian3.UNIT_Z; // Up direction
+  const right = Cartesian3.cross(up, direction, new Cartesian3()); // Right direction (cross product)
+  const finalUp = Cartesian3.cross(direction, right, new Cartesian3()); // Final Up vector (cross product)
+
+  const rotationMatrix = new Matrix3(
+    right.x, right.y, right.z,
+    finalUp.x, finalUp.y, finalUp.z,
+    -direction.x, -direction.y, -direction.z
+  );
+
+  // Convert the rotation matrix to a quaternion for orientation
+  return Quaternion.fromRotationMatrix(rotationMatrix);
+}
+
+/**
+ * Get pyramid cone for camera position
+ * @param position - position in Cesium cartesian3
+ * @param layerId - layer Id
+ * @param url - image url
+ * @returns - Cesium Polyline entity
+ */
+export const getTriangle = (
+  position: Cartesian3,
+  layerId?: string,
+  url?: string,
+  angle?: number,
+  z_angle?: number,
+  flightpitchdegree?: number,
+  flightrolldegree?: number,
+  flightyawdegree?: number
+): any => {
+  const heading = cMath.toRadians(flightyawdegree || 0);
+  const pitch = cMath.toRadians(flightpitchdegree || 0);
+  const roll = cMath.toRadians(flightrolldegree || 0);
+
+  const hpr: any = new HeadingPitchRoll(heading, pitch, roll);
+  const orientation: any = Transforms.headingPitchRollQuaternion(position, hpr);
+
+
+  return {
+    position: Cesium.Matrix4.multiplyByPoint(
+      Cesium.Transforms.eastNorthUpToFixedFrame(position),
+      new Cesium.Cartesian3(0, 1.5, 0),
+      new Cesium.Cartesian3()
+    ),
+    orientation: orientation,
+    cylinder: {
+      topRadius: 0.5,
+      bottomRadius: 0.5,
+      length: 0.001,
+      slices: 3,
+      material: Color.WHITE.withAlpha(0.01),
+      outline: true,
+      outlineColor: Color.WHITE,
+      outlineWidth: 5,
+    },
+    layerId,
+    data: { url },
+  };
+};
+
+/**
+ * This function allows user to add polygon on map
+ * @param viewer - Cesium Viewer object
+ * @param positions - Cesium Polygon Hierarchy
+ * @param config - Configuration Object to control fill color
+ * @returns Cesium Polygon entity
+ */
+export const getPolygonEntity = (
+  positions: any,
+  layerId: string,
+  opacity: number,
+  properties?: any,
+  outline?: boolean,
+  clampToGround?: boolean,
+  near?: number,
+  far?: number
+): any => ({
+  polygon: {
+    hierarchy: positions,
+    // perPositionHeight: true,
+    // heightReference: HeightReference.CLAMP_TO_GROUND,
+    outline: true,
+    fill: true,
+    outlineWidth: 5,
+    outlineColor: properties.color
+      ? Color.fromCssColorString(properties.color).withAlpha(1)
+      : Color.fromCssColorString("#FFC72C").withAlpha(1),
+    material: properties.color
+      ? Color.fromCssColorString(properties.color).withAlpha(opacity || 0.0)
+      : Color.fromCssColorString("#FFC72C").withAlpha(opacity || 0.0),
+
+    clampToGround: !!clampToGround,
+    // distanceDisplayCondition: new DistanceDisplayCondition(near, far),
+  },
+  layerId,
+  data: properties,
+});
+
+/**
+ * this function will add a label on map and return label entity
+ * @param viewer - Cesium viewer object
+ * @param config - LabelConfigByCartesian
+ * @returns - Cesium label entity
+ */
+export const getLabelEntity = (
+  text: string,
+  position: Cartesian3,
+  near?: number,
+  far?: number
+): any => ({
+  position,
+  label: {
+    text,
+    font: `14px Roboto Condensed`,
+    fillColor: Color.BLACK,
+    showBackground: true,
+    backgroundColor: Color.WHITESMOKE,
+    horizontalOrigin: HorizontalOrigin.CENTER,
+    verticalOrigin: VerticalOrigin.CENTER,
+    style: LabelStyle.FILL,
+    // heightReference: HeightReference.CLAMP_TO_GROUND,
+    eyeOffset: new Cartesian3(0, 0, 10),
+    distanceDisplayCondition: new DistanceDisplayCondition(near, far),
+  },
+});
+
+/**
+ * This method allows user to add a dashed polyline on map using set of user provided position
+ * @param viewer - Cesium Viewer object
+ * @param positions - Array of position in Cesium cartesian3
+ * @param config - Configuration object to control color & width of line
+ * @returns - Cesium Polyline entity
+ */
+export const addPolyLine = (
+  viewer: Viewer,
+  positions: Array<Cartesian3>,
+  config?: DrawingConfig,
+  isDashed: boolean = true
+): Entity => {
+  if (config?.id && viewer.entities.getById(config.id)) {
+    viewer.entities.remove(viewer.entities.getById(config.id)!);
+  }
+
+  console.log(config?.clamp);
+  
+  const polyline = viewer.entities.add({
+    id: config?.id,
+    polyline: {
+      // classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
+      depthFailMaterial: isDashed
+        ? new PolylineDashMaterialProperty({
+            color: config?.lineColor
+              ? Color.fromCssColorString(config.lineColor)
+              : Color.fromCssColorString("#FF0000"),
+            dashLength: 10,
+          })
+        : config?.lineColor
+        ? Color.fromCssColorString(config.lineColor)
+        : Color.fromCssColorString("#FF0000"),
+      positions,
+      width: config?.lineWidth ? config?.lineWidth : 3,
+
+      material: isDashed
+        ? new PolylineDashMaterialProperty({
+            color: config?.lineColor
+              ? Color.fromCssColorString(config.lineColor)
+              : Color.fromCssColorString("#FF0000"),
+            dashLength: 10,
+          })
+        : config?.lineColor
+        ? Color.fromCssColorString(config.lineColor)
+        : Color.fromCssColorString("#FF0000"),
+      clampToGround: !!config?.clamp,
+    },
+  });
+
+  (polyline as any).config = config;
+  return polyline;
+};
+
+/**
+ * This function allows user to add polygon on map
+ * @param viewer - Cesium Viewer object
+ * @param positions - Cesium Polygon Hierarchy
+ * @param config - Configuration Object to control fill color
+ * @returns Cesium Polygon entity
+ */
+export const addPolygon = (
+  viewer: Viewer,
+  positions: any,
+  config?: DrawingConfig
+): Entity => {
+  if (config?.id && viewer.entities.getById(config?.id)) {
+    viewer.entities.remove(viewer.entities.getById(config?.id)!);
+  }
+
+  const polygon = viewer.entities.add({
+    id: config?.id,
+    polygon: {
+      hierarchy: positions,
+      perPositionHeight: !config?.clamp,
+      heightReference: config?.clamp
+        ? HeightReference.RELATIVE_TO_GROUND
+        : HeightReference.NONE,
+      outline: false,
+      fill: true,
+      outlineWidth: 15,
+      outlineColor: config?.strokeColor
+        ? Color.fromCssColorString(config.strokeColor)
+        : Color.BLACK,
+      material: config?.fillColor
+        ? Color.fromCssColorString(config.fillColor).withAlpha(
+            config.opacity ? config.opacity : 0.5
+          )
+        : Color.fromCssColorString("#FFC72C").withAlpha(
+            config?.opacity ? config.opacity : 0.5
+          ),
+    },
+  });
+
+  (polygon as any).config = config;
+
+  return polygon;
+};
+
+/**
+ * this function will add a label on map and return label entity
+ * @param viewer - Cesium viewer object
+ * @param config - LabelConfigByCartesian
+ * @returns - Cesium label entity
+ */
+export const addLabel = (
+  viewer: Viewer,
+  config: LabelConfigByCartesian
+): Entity => {
+  if (config.id && viewer.entities.getById(config.id)) {
+    viewer.entities.remove(viewer.entities.getById(config.id)!);
+  }
+  const label = viewer.entities.add({
+    id: config.id,
+    position: config.position,
+    billboard: {
+      sizeInMeters: true,
+    },
+    label: {
+      show: true,
+      text: config.text,
+      font: `${config.size ? config.size : 12}px Roboto Condensed`,
+      fillColor: config.fillColor
+        ? Color.fromCssColorString(config.fillColor)
+        : Color.WHITE,
+      showBackground: config.isBackground !== false,
+      backgroundColor: config.backgroundColor
+        ? Color.fromCssColorString(config.backgroundColor).withAlpha(
+            config.opacity ? config.opacity : 0.5
+          )
+        : Color.BLACK,
+      backgroundPadding: new Cartesian2(7, 7),
+      horizontalOrigin: HorizontalOrigin.CENTER,
+      verticalOrigin: VerticalOrigin.BOTTOM,
+      outlineWidth: 10,
+      outlineColor: Color.BLACK,
+      style: LabelStyle.FILL,
+      disableDepthTestDistance: Number.POSITIVE_INFINITY,
+    },
+  });
+  return label;
+};
+
+/**
+ * This function allows user to get direction from one point to another point
+ * @param start - Start cartesian position
+ * @param end - End Cartesian position
+ * @returns - return cartesian of direction
+ */
+export function getDirBetweenTwoCartesians(
+  start: Cartesian3,
+  end: Cartesian3
+): Cartesian3 | undefined {
+  const res = Cartesian3.subtract(end, start, new Cartesian3());
+  Cartesian3.normalize(res, res);
+  return res;
+}
+
+/**
+ * This Function allows user to get position after every half meter
+ * @param start - First cartesian
+ * @param end - Second Cartesian
+ * @returns - Array of cartesian after every 0.5 meter
+ */
+export const getPositionsByFixDistance = (
+  start: Cartesian3,
+  end: Cartesian3
+): Array<Cartesian3> => {
+  const dir = getDirBetweenTwoCartesians(start, end)!;
+  const dist = Cartesian3.distance(start, end);
+  const interval = dist / 200;
+  const result: any = [];
+
+  for (let i = 0; dist - i >= interval; i += interval) {
+    const res = new Cartesian3();
+    Cartesian3.multiplyByScalar(dir, i, res);
+    Cartesian3.add(start, res, res);
+    result.push(res);
+  }
+  result.push(end);
+  return result;
+};