leiting-bim 2.1.36 → 2.1.39

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

@@ -0,0 +1,352 @@
+import { IMeasure, MeasurementOptions, MeasurementRecord } from '../types';
+import { HtmlOverlayLabelPool } from '../../HtmlOverlayLabelPool';
+
+export default class PolylineDistanceMeasure implements IMeasure {
+  private Cesium: any;
+  private viewer: any;
+  private handler: any = null;
+  private entity: any = null;
+  private labelEntity: any = null;
+  private positions: any[] = [];
+  private tempPoints: any[] = [];
+  private segmentLabels: any[] = [];
+  private hoverPos: any = null;
+  private previewLabel: any = null;
+  private previewEntity: any = null;
+  private htmlLabelPool: any = null;
+  private totalLabelId: string | null = null;
+  private segmentLabelIds: string[] = [];
+  private previewLabelId: string | null = 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-polyline-total', {
+        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.htmlLabelPool.registerTheme('measure-polyline-seg', {
+        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 pos = viewer.scene.pickPosition(movement.position);
+      if (!pos) return;
+      this.positions.push(pos);
+      const point = viewer.entities.add({
+        position: pos,
+        point: {
+          pixelSize: 8,
+          color: options.pointColor || options.color || Cesium.Color.YELLOW,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        },
+      });
+      this.tempPoints.push(point);
+      if (!this.entity) {
+        this.entity = viewer.entities.add({
+          polyline: {
+            positions: this.positions.slice(),
+            width: options.width || 3,
+            material: options.lineColor || options.color || Cesium.Color.YELLOW,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
+              color: (options.dashLineColor || options.lineColor || options.color || Cesium.Color.RED).withAlpha?.(0.9) || Cesium.Color.RED,
+              dashLength: 12,
+              dashPattern: 255,
+            }),
+          },
+        });
+      } else {
+        this.entity.polyline.positions = this.positions.slice();
+      }
+      if (this.positions.length >= 2) {
+        const p1 = this.positions[this.positions.length - 2];
+        const p2 = this.positions[this.positions.length - 1];
+        const c1 = Cesium.Cartographic.fromCartesian(p1);
+        const c2 = Cesium.Cartographic.fromCartesian(p2);
+        const geodesic = new Cesium.EllipsoidGeodesic(c1, c2);
+        const d = geodesic.surfaceDistance;
+        const mid = new Cesium.Cartesian3(
+          (p1.x + p2.x) / 2,
+          (p1.y + p2.y) / 2,
+          (p1.z + p2.z) / 2,
+        );
+        const mc = Cesium.Cartographic.fromCartesian(mid);
+        const id = `measure_polyline_seg_${this.segmentLabelIds.length}_${Date.now()}`;
+        this.segmentLabelIds.push(id);
+        this.htmlLabelPool.add(
+          { text: `${d.toFixed(2)} m` },
+          {
+            id,
+            lon: Cesium.Math.toDegrees(mc.longitude),
+            lat: Cesium.Math.toDegrees(mc.latitude),
+            height: mc.height || 0,
+            theme: 'measure-polyline-seg',
+            show: true,
+          },
+        );
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.handler.setInputAction(() => {
+      if (this.positions.length < 2) {
+        this.stop();
+        return;
+      }
+      this.stop();
+      if (this.previewLabelId) {
+        this.htmlLabelPool.removeByIds([this.previewLabelId]);
+        this.previewLabelId = null;
+      }
+      if (this.hoverPos) {
+        this.hoverPos = null;
+      }
+      if (this.previewEntity) {
+        this.viewer.entities.remove(this.previewEntity);
+        this.previewEntity = null;
+      }
+      if (this.positions.length >= 2 && this.tempPoints.length >= 2) {
+        const lastPoint = this.tempPoints[this.tempPoints.length - 1];
+        this.viewer.entities.remove(lastPoint);
+        this.tempPoints.pop();
+      }
+      if (this.segmentLabelIds.length >= 1) {
+        const lastId = this.segmentLabelIds[this.segmentLabelIds.length - 1];
+        if (lastId) {
+          this.htmlLabelPool.removeByIds([lastId]);
+          this.segmentLabelIds.pop();
+        }
+      }
+      if (this.positions.length >= 2) {
+        this.positions.pop();
+      }
+      let total = 0;
+      for (let i = 1; i < this.positions.length; i++) {
+        const p1 = this.positions[i - 1];
+        const p2 = this.positions[i];
+        const c1 = Cesium.Cartographic.fromCartesian(p1);
+        const c2 = Cesium.Cartographic.fromCartesian(p2);
+        const geodesic = new Cesium.EllipsoidGeodesic(c1, c2);
+        const d = geodesic.surfaceDistance;
+        total += d;
+      }
+      const last = this.positions[this.positions.length - 1];
+      if (this.entity && this.entity.polyline) {
+        this.entity.polyline.positions = this.positions;
+      }
+      const lc = Cesium.Cartographic.fromCartesian(last);
+      const id = this.totalLabelId || `measure_polyline_total_${Date.now()}`;
+      this.totalLabelId = id;
+      this.htmlLabelPool.add(
+        { text: `${total.toFixed(2)} m` },
+        {
+          id,
+          lon: Cesium.Math.toDegrees(lc.longitude),
+          lat: Cesium.Math.toDegrees(lc.latitude),
+          height: lc.height || 0,
+          theme: 'measure-polyline-total',
+          show: true,
+        },
+      );
+      this.labelEntity = this.totalLabelId;
+      const result = {
+        entity: this.entity,
+        label: this.labelEntity,
+        segmentLabels: this.segmentLabelIds,
+        positions: this.positions,
+        distance: total,
+        clear: () => this.clear(),
+      };
+      options.onComplete?.(result);
+    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+    this.handler.setInputAction((movement: any) => {
+      if (this.positions.length === 0) return;
+      const pos = viewer.scene.pickPosition(movement.endPosition);
+      if (!pos) return;
+      this.hoverPos = pos;
+      const p1 = this.positions[this.positions.length - 1];
+      const c1 = Cesium.Cartographic.fromCartesian(p1);
+      const c2 = Cesium.Cartographic.fromCartesian(pos);
+      const geodesic = new Cesium.EllipsoidGeodesic(c1, c2);
+      const d = geodesic.surfaceDistance;
+      const mid = new Cesium.Cartesian3(
+        (p1.x + pos.x) / 2,
+        (p1.y + pos.y) / 2,
+        (p1.z + pos.z) / 2,
+      );
+      const mc = Cesium.Cartographic.fromCartesian(mid);
+      const id = this.previewLabelId || 'measure_polyline_preview';
+      this.previewLabelId = id;
+      this.htmlLabelPool.add(
+        { text: `${d.toFixed(2)} m` },
+        {
+          id,
+          lon: Cesium.Math.toDegrees(mc.longitude),
+          lat: Cesium.Math.toDegrees(mc.latitude),
+          height: mc.height || 0,
+          theme: 'measure-polyline-seg',
+          show: true,
+        },
+      );
+
+      if (!this.previewEntity) {
+        this.previewEntity = viewer.entities.add({
+          polyline: {
+            positions: [p1, pos],
+            width: options.width || 3,
+            material: options.lineColor || options.color || Cesium.Color.YELLOW,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
+              color: (options.dashLineColor || options.lineColor || options.color || Cesium.Color.RED).withAlpha?.(0.9) || Cesium.Color.RED,
+              dashLength: 12,
+              dashPattern: 255,
+            }),
+          },
+        });
+      } else {
+        this.previewEntity.polyline.positions = [p1, pos];
+      }
+
+      
+    }, 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.totalLabelId && this.htmlLabelPool) {
+      this.htmlLabelPool.removeByIds([this.totalLabelId]);
+      this.totalLabelId = null;
+    }
+    if (this.previewEntity) {
+      this.viewer.entities.remove(this.previewEntity);
+      this.previewEntity = null;
+    }
+    if (this.previewLabelId && this.htmlLabelPool) {
+      this.htmlLabelPool.removeByIds([this.previewLabelId]);
+      this.previewLabelId = null;
+    }
+    this.hoverPos = null;
+    if (this.segmentLabelIds.length && this.htmlLabelPool) {
+      this.htmlLabelPool.removeByIds(this.segmentLabelIds.slice());
+    }
+    this.segmentLabelIds = [];
+    this.tempPoints.forEach((p) => this.viewer.entities.remove(p));
+    this.tempPoints = [];
+    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.YELLOW;
+    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-polyline-total', {
+        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.htmlLabelPool.registerTheme('measure-polyline-seg', {
+        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 } },
+      });
+    }
+    for (const pos of posList) {
+      const point = viewer.entities.add({ position: pos, point: { pixelSize: 8, color: opts.pointColor || opts.color || Cesium.Color.YELLOW, disableDepthTestDistance: Number.POSITIVE_INFINITY } });
+      this.tempPoints.push(point);
+    }
+    this.entity = viewer.entities.add({ polyline: { positions: posList, width, material: lineColor, depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }) } });
+    let total = 0;
+    for (let i = 1; i < posList.length; i++) {
+      const c1 = Cesium.Cartographic.fromCartesian(posList[i - 1]);
+      const c2 = Cesium.Cartographic.fromCartesian(posList[i]);
+      const geodesic = new Cesium.EllipsoidGeodesic(c1, c2);
+      total += geodesic.surfaceDistance;
+      const p1 = posList[i - 1];
+      const p2 = posList[i];
+      const mid = new Cesium.Cartesian3((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, (p1.z + p2.z) / 2);
+      const mc = Cesium.Cartographic.fromCartesian(mid);
+      const sid = record.id + `_seg_${i - 1}`;
+      this.segmentLabelIds.push(sid);
+      this.htmlLabelPool.add({ text: `${geodesic.surfaceDistance.toFixed(2)} m` }, {
+        id: sid,
+        lon: Cesium.Math.toDegrees(mc.longitude),
+        lat: Cesium.Math.toDegrees(mc.latitude),
+        height: mc.height || 0,
+        theme: 'measure-polyline-seg',
+        show: true,
+        style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' },
+      });
+    }
+    const last = posList[posList.length - 1];
+    const lc = Cesium.Cartographic.fromCartesian(last);
+    const id = record.id + '_total';
+    this.totalLabelId = id;
+    this.htmlLabelPool.add({ text: `${total.toFixed(2)} m` }, {
+      id,
+      lon: Cesium.Math.toDegrees(lc.longitude),
+      lat: Cesium.Math.toDegrees(lc.latitude),
+      height: lc.height || 0,
+      theme: 'measure-polyline-total',
+      show: true,
+      style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' },
+    });
+  }
+}