leiting-bim 2.1.36 → 2.1.39

package/plugins/plugins/cesium-core/src/components/measurement/handlers/VerticalMeasure.ts

@@ -0,0 +1,360 @@
+import { IMeasure, MeasurementOptions, MeasurementRecord } from '../types';
+import { HtmlOverlayLabelPool } from '../../HtmlOverlayLabelPool';
+
+export default class VerticalMeasure implements IMeasure {
+  private Cesium: any;
+  private viewer: any;
+  private handler: any = null;
+  private entity: any = null;
+  private labelEntity: any = null;
+  private positions: any[] = [];
+  private htmlLabelPool: any = null;
+  private htmlLabelId: string | null = null;
+  private previewLabelId: string | null = null;
+  private baseCarto: any = null;
+  private baseUp: any = null;
+  private tempPoints: any[] = [];
+  private previewPointEntity: any = null;
+  private previewEntity: any = null;
+
+  constructor(Cesium: any, viewer: any) {
+    this.Cesium = Cesium;
+    this.viewer = viewer;
+  }
+
+  start(options: MeasurementOptions) {
+    this.clear();
+    const Cesium = this.Cesium;
+    const viewer = this.viewer;
+    if (!this.htmlLabelPool) {
+      const containerId = options.overlayContainerId || 'html-label-container';
+      this.htmlLabelPool = new HtmlOverlayLabelPool(Cesium, viewer, containerId);
+      this.htmlLabelPool.registerTheme('measure-vertical', {
+        createElement: (el: HTMLDivElement, ctx: any) => {
+          el.innerHTML = String(ctx?.data?.text || '');
+          el.style.background = 'rgba(0,0,0,0.6)';
+          el.style.color = '#fff';
+          el.style.font = '14px sans-serif';
+          el.style.padding = '4px 6px';
+          el.style.borderRadius = '4px';
+          el.style.whiteSpace = 'pre';
+        },
+        options: { offset: { x: 0, y: -10 } },
+      });
+    }
+    this.handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
+    this.handler.setInputAction((movement: any) => {
+      const ray0 = viewer.camera.getPickRay(movement.position);
+      let cart = ray0 ? viewer.scene.globe.pick(ray0, viewer.scene) : null;
+      if (!cart) cart = viewer.camera.pickEllipsoid(movement.position, Cesium.Ellipsoid.WGS84);
+      if (!cart) cart = viewer.scene.pickPosition(movement.position);
+      if (!cart) return;
+      if (this.positions.length === 0) {
+        const c0 = Cesium.Cartographic.fromCartesian(cart);
+        this.baseCarto = new Cesium.Cartographic(c0.longitude, c0.latitude, 0);
+        const base = Cesium.Ellipsoid.WGS84.cartographicToCartesian(this.baseCarto);
+        this.baseUp = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormalCartographic(this.baseCarto);
+        this.positions.push(base);
+        const basePoint = viewer.entities.add({
+          position: base,
+          point: {
+            pixelSize: 8,
+            color: options.pointColor || options.color || Cesium.Color.YELLOW,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          },
+        });
+        this.tempPoints.push(basePoint);
+        const solidColor = options.lineColor || options.color || Cesium.Color.CYAN;
+        const dashColor =
+          (
+            options.dashLineColor ||
+            options.lineColor ||
+            options.color ||
+            Cesium.Color.RED
+          ).withAlpha?.(0.9) || Cesium.Color.RED;
+        this.previewEntity = viewer.entities.add({
+          polyline: {
+            positions: [base, base],
+            width: options.width || 3,
+            material: solidColor,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
+              color: dashColor,
+              dashLength: 12,
+              dashPattern: 255,
+            }),
+          },
+        });
+      } else {
+        if (!this.baseCarto || !this.baseUp) return;
+        const base = this.positions[0];
+        const ray = viewer.camera.getPickRay(movement.position);
+        if (!ray) return;
+        const O = ray.origin;
+        const D = Cesium.Cartesian3.normalize(ray.direction, new Cesium.Cartesian3());
+        const B = base;
+        const U = this.baseUp;
+        const w0 = Cesium.Cartesian3.subtract(O, B, new Cesium.Cartesian3());
+        const a = Cesium.Cartesian3.dot(D, D);
+        const b = -Cesium.Cartesian3.dot(D, U);
+        const c = Cesium.Cartesian3.dot(U, U);
+        const d = -Cesium.Cartesian3.dot(D, w0);
+        const e = Cesium.Cartesian3.dot(U, w0);
+        const den = a * c - b * b;
+        if (Math.abs(den) < 1e-6) return;
+        const s = (a * e - b * d) / den;
+        const second = Cesium.Cartesian3.add(
+          B,
+          Cesium.Cartesian3.multiplyByScalar(U, s, new Cesium.Cartesian3()),
+          new Cesium.Cartesian3(),
+        );
+        this.positions[1] = second;
+        this.stop();
+        if (this.previewEntity) {
+          this.viewer.entities.remove(this.previewEntity);
+          this.previewEntity = null;
+        }
+        if (this.previewPointEntity) {
+          this.viewer.entities.remove(this.previewPointEntity);
+          this.previewPointEntity = null;
+        }
+        const solidColor2 = options.lineColor || options.color || Cesium.Color.CYAN;
+        const dashColor2 = (
+          options.dashLineColor || options.lineColor || options.color || Cesium.Color.RED
+        ).withAlpha?.(0.9) || Cesium.Color.RED;
+        this.entity = viewer.entities.add({
+          polyline: {
+            positions: [base, second],
+            width: options.width || 3,
+            material: solidColor2,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
+              color: dashColor2,
+              dashLength: 12,
+              dashPattern: 255,
+            }),
+          },
+        });
+        const secondPoint = viewer.entities.add({
+          position: second,
+          point: {
+            pixelSize: 8,
+            color: options.pointColor || options.color || Cesium.Color.YELLOW,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          },
+        });
+        this.tempPoints.push(secondPoint);
+        const c1 = this.baseCarto;
+        const c2 = Cesium.Cartographic.fromCartesian(second);
+        const vertical = Math.abs((c2.height || 0) - (c1.height || 0));
+        const mid = new Cesium.Cartesian3(
+          (this.positions[0].x + this.positions[1].x) / 2,
+          (this.positions[0].y + this.positions[1].y) / 2,
+          (this.positions[0].z + this.positions[1].z) / 2,
+        );
+        const mc = Cesium.Cartographic.fromCartesian(mid);
+        if (this.previewLabelId && this.htmlLabelPool) {
+          this.htmlLabelPool.removeByIds([this.previewLabelId]);
+          this.previewLabelId = null;
+        }
+        const id = this.htmlLabelId || `measure_vertical_${Date.now()}`;
+        this.htmlLabelId = id;
+        this.htmlLabelPool.add(
+          { text: `${vertical.toFixed(2)} m` },
+          {
+            id,
+            lon: Cesium.Math.toDegrees(mc.longitude),
+            lat: Cesium.Math.toDegrees(mc.latitude),
+            height: mc.height || 0,
+            theme: 'measure-vertical',
+            show: true,
+            style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' },
+          },
+        );
+        const result = {
+          entity: this.entity,
+          label: this.labelEntity,
+          positions: this.positions,
+          vertical,
+          clear: () => this.clear(),
+        };
+        options.onComplete?.(result);
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.handler.setInputAction((movement: any) => {
+      if (this.positions.length < 1) return;
+      if (!this.baseCarto || !this.baseUp) {
+        const c0 = Cesium.Cartographic.fromCartesian(this.positions[0]);
+        this.baseCarto = new Cesium.Cartographic(c0.longitude, c0.latitude, c0.height || 0);
+        this.baseUp = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormalCartographic(this.baseCarto);
+      }
+      const base = this.positions[0];
+      const ray = viewer.camera.getPickRay(movement.endPosition);
+      if (!ray) return;
+      const O = ray.origin;
+      const D = Cesium.Cartesian3.normalize(ray.direction, new Cesium.Cartesian3());
+      const B = base;
+      const U = this.baseUp;
+      const w0 = Cesium.Cartesian3.subtract(O, B, new Cesium.Cartesian3());
+      const a = Cesium.Cartesian3.dot(D, D);
+      const b = -Cesium.Cartesian3.dot(D, U);
+      const c = Cesium.Cartesian3.dot(U, U);
+      const d = -Cesium.Cartesian3.dot(D, w0);
+      const e = Cesium.Cartesian3.dot(U, w0);
+      const den = a * c - b * b;
+      if (Math.abs(den) < 1e-6) return;
+      const s = (a * e - b * d) / den;
+      const second = Cesium.Cartesian3.add(
+        B,
+        Cesium.Cartesian3.multiplyByScalar(U, s, new Cesium.Cartesian3()),
+        new Cesium.Cartesian3(),
+      );
+      this.positions[1] = second;
+      if (!this.previewEntity) {
+        const solidColor = options.lineColor || options.color || Cesium.Color.CYAN;
+        const dashColor =
+          (
+            options.dashLineColor ||
+            options.lineColor ||
+            options.color ||
+            Cesium.Color.RED
+          ).withAlpha?.(0.9) || Cesium.Color.RED;
+        this.previewEntity = viewer.entities.add({
+          polyline: {
+            positions: [B, second],
+            width: options.width || 3,
+            material: solidColor,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
+              color: dashColor,
+              dashLength: 12,
+              dashPattern: 255,
+            }),
+          },
+        });
+      } else {
+        this.previewEntity.polyline.positions = [B, second];
+      }
+      if (!this.previewPointEntity) {
+        this.previewPointEntity = viewer.entities.add({
+          position: second,
+          point: {
+            pixelSize: 8,
+            color: options.pointColor || options.color || Cesium.Color.YELLOW,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          },
+        });
+      } else {
+        this.previewPointEntity.position = second;
+      }
+      const c1 = this.baseCarto;
+      const c2 = Cesium.Cartographic.fromCartesian(second);
+      const vertical = Math.abs((c2.height || 0) - (c1.height || 0));
+      const mid = new Cesium.Cartesian3(
+        (this.positions[0].x + second.x) / 2,
+        (this.positions[0].y + second.y) / 2,
+        (this.positions[0].z + second.z) / 2,
+      );
+      const mc = Cesium.Cartographic.fromCartesian(mid);
+      const pid = this.previewLabelId || 'measure_vertical_preview';
+      this.previewLabelId = pid;
+      this.htmlLabelPool.add(
+        { text: `${vertical.toFixed(2)} m` },
+        {
+          id: pid,
+          lon: Cesium.Math.toDegrees(mc.longitude),
+          lat: Cesium.Math.toDegrees(mc.latitude),
+          height: mc.height || 0,
+          theme: 'measure-vertical',
+          show: true,
+          style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' },
+        },
+      );
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  }
+
+  stop() {
+    if (this.handler) {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+
+  clear() {
+    this.stop();
+    if (this.entity) {
+      this.viewer.entities.remove(this.entity);
+      this.entity = null;
+    }
+    if (this.labelEntity) {
+      this.viewer.entities.remove(this.labelEntity);
+      this.labelEntity = null;
+    }
+    this.tempPoints.forEach((p) => this.viewer.entities.remove(p));
+    this.tempPoints = [];
+    if (this.previewPointEntity) {
+      this.viewer.entities.remove(this.previewPointEntity);
+      this.previewPointEntity = null;
+    }
+    if (this.previewEntity) {
+      this.viewer.entities.remove(this.previewEntity);
+      this.previewEntity = null;
+    }
+    if (this.htmlLabelPool && this.htmlLabelId) {
+      this.htmlLabelPool.removeByIds([this.htmlLabelId]);
+      this.htmlLabelId = null;
+    }
+    if (this.previewLabelId && this.htmlLabelPool) {
+      this.htmlLabelPool.removeByIds([this.previewLabelId]);
+      this.previewLabelId = null;
+    }
+    this.positions = [];
+  }
+
+  rehydrate(record: MeasurementRecord, htmlLabelPool?: HtmlOverlayLabelPool) {
+    const Cesium = this.Cesium;
+    const viewer = this.viewer;
+    const opts = (record.options || {}) as MeasurementOptions;
+    const lineColor = opts.lineColor || opts.color || Cesium.Color.CYAN;
+    const dashColor = (opts.dashLineColor || opts.lineColor || opts.color || Cesium.Color.RED).withAlpha?.(0.9) || Cesium.Color.RED;
+    const width = opts.width || 3;
+    const posList = (record.positions || []).map((p) => new Cesium.Cartesian3(p[0], p[1], p[2]));
+    if (posList.length < 2) return;
+    if (!this.htmlLabelPool) {
+      const containerId = opts.overlayContainerId || 'html-label-container';
+      this.htmlLabelPool = htmlLabelPool || new HtmlOverlayLabelPool(Cesium, viewer, containerId);
+      this.htmlLabelPool.registerTheme('measure-vertical', {
+        createElement: (el: HTMLDivElement, ctx: any) => {
+          el.innerHTML = String(ctx?.data?.text || '');
+          el.style.background = 'rgba(0,0,0,0.6)';
+          el.style.color = '#fff';
+          el.style.font = '14px sans-serif';
+          el.style.padding = '4px 6px';
+          el.style.borderRadius = '4px';
+          el.style.whiteSpace = 'pre';
+        },
+        options: { offset: { x: 0, y: -10 } },
+      });
+    }
+    const base = posList[0];
+    const second = posList[1];
+    const basePoint = viewer.entities.add({ position: base, point: { pixelSize: 8, color: opts.pointColor || opts.color || Cesium.Color.YELLOW, disableDepthTestDistance: Number.POSITIVE_INFINITY } });
+    const secondPoint = viewer.entities.add({ position: second, point: { pixelSize: 8, color: opts.pointColor || opts.color || Cesium.Color.YELLOW, disableDepthTestDistance: Number.POSITIVE_INFINITY } });
+    this.tempPoints.push(basePoint);
+    this.tempPoints.push(secondPoint);
+    this.entity = viewer.entities.add({ polyline: { positions: [base, second], width, material: lineColor, depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }) } });
+    const c1 = Cesium.Cartographic.fromCartesian(base);
+    const c2 = Cesium.Cartographic.fromCartesian(second);
+    const vertical = Math.abs((c2.height || 0) - (c1.height || 0));
+    const mid = new Cesium.Cartesian3((base.x + second.x) / 2, (base.y + second.y) / 2, (base.z + second.z) / 2);
+    const mc = Cesium.Cartographic.fromCartesian(mid);
+    const id = record.id + '_label';
+    this.htmlLabelId = id;
+    this.htmlLabelPool.add({ text: `${vertical.toFixed(2)} m` }, {
+      id,
+      lon: Cesium.Math.toDegrees(mc.longitude),
+      lat: Cesium.Math.toDegrees(mc.latitude),
+      height: mc.height || 0,
+      theme: 'measure-vertical',
+      show: true,
+      style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' },
+    });
+  }
+}

package/plugins/plugins/cesium-core/src/components/measurement/index.ts

@@ -0,0 +1,13 @@
+export { MeasurementTool } from './MeasurementTool';
+export { default as HorizontalMeasure } from './handlers/HorizontalMeasure';
+export { default as VerticalMeasure } from './handlers/VerticalMeasure';
+export { default as TriangleMeasure } from './handlers/TriangleMeasure';
+export { default as SpaceMeasure } from './handlers/SpaceMeasure';
+export { default as AreaMeasure } from './handlers/AreaMeasure';
+export { default as CircleMeasure } from './handlers/CircleMeasure';
+export { default as PolylineDistanceMeasure } from './handlers/PolylineDistanceMeasure';
+export { default as TerrainHeightMeasure } from './handlers/TerrainHeightMeasure';
+export { default as CoordinateMeasure } from './handlers/CoordinateMeasure';
+export { default as RectangleMeasure } from './handlers/RectangleMeasure';
+export { default as RegularPolygonMeasure } from './handlers/RegularPolygonMeasure';
+export * from './types';

package/plugins/plugins/cesium-core/src/components/measurement/types.ts

@@ -0,0 +1,57 @@
+export type MeasurementType =
+  | 'horizontal'
+  | 'vertical'
+  | 'triangle'
+  | 'space'
+  | 'area'
+  | 'circle'
+  | 'polyline'
+  | 'terrainHeight'
+  | 'coordinate'
+  | 'rectangle'
+  | 'regularPolygon';
+
+export interface MeasurementOptions {
+  color?: any;
+  lineColor?: any;
+  dashLineColor?: any;
+  pointColor?: any;
+  width?: number;
+  step?: number;
+  sides?: number;
+  labelText?: {
+    radius?: string;
+    area?: string;
+    circumference?: string;
+    lng?: string;
+    lat?: string;
+    height?: string;
+    width?: string;
+    heightLabel?: string;
+    sides?: string;
+    side?: string;
+    angle?: string;
+  };
+  overlayContainerId?: string;
+  angleMarkerRatio?: number;
+  onComplete?: (result: any) => void;
+}
+
+export interface IMeasure {
+  start(options: MeasurementOptions): void;
+  stop(): void;
+  clear(): void;
+  rehydrate?(record: MeasurementRecord, htmlLabelPool?: any): void;
+}
+
+export interface MeasurementRecord {
+  id: string;
+  type: MeasurementType;
+  options?: MeasurementOptions;
+  positions?: Array<[number, number, number]>;
+  data?: any;
+}
+
+export interface MeasurementsConfig {
+  measurements: MeasurementRecord[];
+}