leiting-bim 2.1.48 → 2.1.52

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

@@ -1,427 +0,0 @@
-import { IMeasure, MeasurementOptions, MeasurementRecord } from '../types';
-import { HtmlOverlayLabelPool } from '../../HtmlOverlayLabelPool';
-
-export default class HorizontalMeasure implements IMeasure {
-  private Cesium: any;
-  private viewer: any;
-  private handler: any = null;
-  private positions: any[] = [];
-  private tempPoints: any[] = [];
-  private segmentEntities: any[] = [];
-  private segmentLabelIds: string[] = [];
-  private previewEntity: any = null;
-  private previewGroundEntity: any = null;
-  private hoverPos: any = null;
-  private htmlLabelPool: any = null;
-  private totalLabelId: string | null = null;
-  private previewLabelId: string | null = null;
-  private labelEntity: any = null;
-  private firstHeight: number | null = null;
-  private groundLineEntities: any[] = [];
-  private previewPos: any = null;
-  private previewGroundPos: 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-horizontal-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-horizontal-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;
-      const carto = Cesium.Cartographic.fromCartesian(pos);
-      const lng = Cesium.Math.toDegrees(carto.longitude);
-      const lat = Cesium.Math.toDegrees(carto.latitude);
-      if (this.positions.length === 0) {
-        this.firstHeight = carto.height || 0;
-      }
-      const clampedPos = Cesium.Cartesian3.fromDegrees(lng, lat, this.firstHeight || 0);
-      this.positions.push(clampedPos);
-      const point = viewer.entities.add({
-        position: clampedPos,
-        point: {
-          pixelSize: 8,
-          color: options.pointColor || options.color || Cesium.Color.YELLOW,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY,
-        },
-      });
-      this.tempPoints.push(point);
-      const terrainHeight =
-        viewer.scene.globe.getHeight(new Cesium.Cartographic(carto.longitude, carto.latitude, 0)) || 0;
-      const groundPos = Cesium.Cartesian3.fromDegrees(lng, lat, terrainHeight);
-      const groundDashColor =
-        (options.dashLineColor || options.lineColor || options.color || Cesium.Color.RED).withAlpha?.(0.9) ||
-        Cesium.Color.RED;
-      const groundLine = viewer.entities.add({
-        polyline: {
-          positions: [groundPos, clampedPos],
-          width: options.width || 3,
-          material: new Cesium.PolylineDashMaterialProperty({
-            color: groundDashColor,
-            dashLength: 12,
-            dashPattern: 255,
-          }),
-        },
-      });
-      this.groundLineEntities.push(groundLine);
-      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 entity = viewer.entities.add({
-          polyline: {
-            positions: [p1, p2],
-            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,
-            }),
-          },
-        });
-        this.segmentEntities.push(entity);
-        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_horizontal_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 || (this.firstHeight || 0),
-            theme: 'measure-horizontal-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.previewGroundEntity) {
-        this.viewer.entities.remove(this.previewGroundEntity);
-        this.previewGroundEntity = null;
-      }
-      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);
-        total += geodesic.surfaceDistance;
-      }
-      const last = this.positions[this.positions.length - 1];
-      const lc = Cesium.Cartographic.fromCartesian(last);
-      const id = this.totalLabelId || `measure_horizontal_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 || (this.firstHeight || 0),
-          theme: 'measure-horizontal-total',
-          show: true,
-        },
-      );
-      this.labelEntity = this.totalLabelId;
-      const result = {
-        entity: this.segmentEntities,
-        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 carto = Cesium.Cartographic.fromCartesian(pos);
-      const lng = Cesium.Math.toDegrees(carto.longitude);
-      const lat = Cesium.Math.toDegrees(carto.latitude);
-      const clampedPos = Cesium.Cartesian3.fromDegrees(lng, lat, this.firstHeight || 0);
-      this.previewPos = clampedPos;
-      const terrainHeight =
-        viewer.scene.globe.getHeight(new Cesium.Cartographic(carto.longitude, carto.latitude, 0)) || 0;
-      const groundPos = Cesium.Cartesian3.fromDegrees(lng, lat, terrainHeight);
-      this.previewGroundPos = groundPos;
-      const p1 = this.positions[this.positions.length - 1];
-      const c1 = Cesium.Cartographic.fromCartesian(p1);
-      const c2 = Cesium.Cartographic.fromCartesian(clampedPos);
-      const geodesic = new Cesium.EllipsoidGeodesic(c1, c2);
-      const d = geodesic.surfaceDistance;
-      const mid = new Cesium.Cartesian3(
-        (p1.x + clampedPos.x) / 2,
-        (p1.y + clampedPos.y) / 2,
-        (p1.z + clampedPos.z) / 2,
-      );
-      const mc = Cesium.Cartographic.fromCartesian(mid);
-      const id = this.previewLabelId || 'measure_horizontal_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 || (this.firstHeight || 0),
-          theme: 'measure-horizontal-seg',
-          show: true,
-        },
-      );
-      const groundDashColor =
-        (options.dashLineColor || options.lineColor || options.color || Cesium.Color.RED).withAlpha?.(0.9) ||
-        Cesium.Color.RED;
-      if (!this.previewGroundEntity) {
-        this.previewGroundEntity = viewer.entities.add({
-          polyline: {
-            positions: new Cesium.CallbackProperty(() => {
-              if (!this.previewPos || !this.previewGroundPos) return [];
-              return [this.previewGroundPos, this.previewPos];
-            }, false),
-            width: options.width || 3,
-            material: new Cesium.PolylineDashMaterialProperty({
-              color: groundDashColor,
-              dashLength: 12,
-              dashPattern: 255,
-            }),
-          },
-        });
-      }
-      if (!this.previewEntity) {
-        this.previewEntity = viewer.entities.add({
-          polyline: {
-            positions: new Cesium.CallbackProperty(() => {
-              if (!this.previewPos || !this.positions.length) return [];
-              const last = this.positions[this.positions.length - 1];
-              return [last, this.previewPos];
-            }, false),
-            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,
-            }),
-          },
-        });
-      }
-    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
-  }
-
-  stop() {
-    if (this.handler) {
-      this.handler.destroy();
-      this.handler = null;
-    }
-  }
-
-  clear() {
-    this.stop();
-    this.segmentEntities.forEach((e) => this.viewer.entities.remove(e));
-    this.segmentEntities = [];
-    this.groundLineEntities.forEach((e) => this.viewer.entities.remove(e));
-    this.groundLineEntities = [];
-    this.tempPoints.forEach((p) => this.viewer.entities.remove(p));
-    this.tempPoints = [];
-    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.previewGroundEntity) {
-      this.viewer.entities.remove(this.previewGroundEntity);
-      this.previewGroundEntity = null;
-    }
-    if (this.previewLabelId && this.htmlLabelPool) {
-      this.htmlLabelPool.removeByIds([this.previewLabelId]);
-      this.previewLabelId = null;
-    }
-    if (this.segmentLabelIds.length && this.htmlLabelPool) {
-      this.htmlLabelPool.removeByIds(this.segmentLabelIds.slice());
-    }
-    this.segmentLabelIds = [];
-    this.positions = [];
-    this.hoverPos = null;
-    this.labelEntity = null;
-    this.firstHeight = null;
-    this.previewPos = null;
-    this.previewGroundPos = null;
-  }
-
-  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) return;
-    if (!this.htmlLabelPool) {
-      const containerId = opts.overlayContainerId || 'html-label-container';
-      this.htmlLabelPool = htmlLabelPool || new HtmlOverlayLabelPool(Cesium, viewer, containerId);
-      this.htmlLabelPool.registerTheme('measure-horizontal-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-horizontal-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);
-      const carto = Cesium.Cartographic.fromCartesian(pos);
-      const lng = Cesium.Math.toDegrees(carto.longitude);
-      const lat = Cesium.Math.toDegrees(carto.latitude);
-      const terrainHeight = viewer.scene.globe.getHeight(new Cesium.Cartographic(carto.longitude, carto.latitude, 0)) || 0;
-      const groundPos = Cesium.Cartesian3.fromDegrees(lng, lat, terrainHeight);
-      const groundLine = viewer.entities.add({
-        polyline: {
-          positions: [groundPos, pos],
-          width,
-          material: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }),
-        },
-      });
-      this.groundLineEntities.push(groundLine);
-    }
-    for (let i = 1; i < posList.length; i++) {
-      const p1 = posList[i - 1];
-      const p2 = posList[i];
-      const seg = viewer.entities.add({
-        polyline: {
-          positions: [p1, p2],
-          width,
-          material: lineColor,
-          depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }),
-        },
-      });
-      this.segmentEntities.push(seg);
-      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 sid = record.id + `_seg_${i - 1}`;
-      this.segmentLabelIds.push(sid);
-      this.htmlLabelPool.add({ text: `${d.toFixed(2)} m` }, {
-        id: sid,
-        lon: Cesium.Math.toDegrees(mc.longitude),
-        lat: Cesium.Math.toDegrees(mc.latitude),
-        height: mc.height || 0,
-        theme: 'measure-horizontal-seg',
-        show: true,
-        style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' },
-      });
-    }
-    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 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-horizontal-total',
-      show: true,
-      style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' },
-    });
-  }
-}