leiting-bim 2.1.36 → 2.1.39

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

@@ -0,0 +1,561 @@
+import { IMeasure, MeasurementOptions, MeasurementRecord } from '../types';
+import { HtmlOverlayLabelPool } from '../../HtmlOverlayLabelPool';
+
+export default class TriangleMeasure implements IMeasure {
+  private Cesium: any;
+  private viewer: any;
+  private handler: any = null;
+  private positions: any[] = [];
+  private htmlLabelPool: any = null;
+  private htmlLabelId: string | null = null;
+  private segmentEntities: any[] = [];
+  private angleMarkerEntities: any[] = [];
+  private pointEntities: any[] = [];
+  private segmentLabelIds: string[] = [];
+  private angleLabelIds: string[] = [];
+  private previewLabelId: string | null = null;
+  private previewSegmentEntities: any[] = [];
+  private previewAngleMarkerEntities: any[] = [];
+  private previewPointEntity: any = null;
+  private previewLow: any = null;
+  private previewHigh: any = null;
+  private previewThird: any = null;
+  private previewMarkerP1: any = null;
+  private previewMarkerP2: any = null;
+  private previewMarkerCorner: 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-triangle', {
+        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-triangle-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.htmlLabelPool.registerTheme('measure-triangle-angle', {
+        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 p = viewer.entities.add({
+        position: pos,
+        point: {
+          pixelSize: 8,
+          color: options.pointColor || options.color || Cesium.Color.YELLOW,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        },
+      });
+      this.pointEntities.push(p);
+      if (this.positions.length === 2) {
+        this.stop();
+        this.previewSegmentEntities.forEach((e) => viewer.entities.remove(e));
+        this.previewSegmentEntities = [];
+        this.previewAngleMarkerEntities.forEach((e) => viewer.entities.remove(e));
+        this.previewAngleMarkerEntities = [];
+        if (this.previewPointEntity) {
+          viewer.entities.remove(this.previewPointEntity);
+          this.previewPointEntity = null;
+        }
+        const c1 = Cesium.Cartographic.fromCartesian(this.positions[0]);
+        const c2 = Cesium.Cartographic.fromCartesian(this.positions[1]);
+        const h1 = c1.height || 0;
+        const h2 = c2.height || 0;
+        const low = h1 <= h2 ? this.positions[0] : this.positions[1];
+        const high = h1 > h2 ? this.positions[0] : this.positions[1];
+        const cl = Cesium.Cartographic.fromCartesian(low);
+        const ch = Cesium.Cartographic.fromCartesian(high);
+        const maxH = Math.max(h1, h2);
+        const third = Cesium.Cartesian3.fromDegrees(
+          Cesium.Math.toDegrees(cl.longitude),
+          Cesium.Math.toDegrees(cl.latitude),
+          maxH,
+        );
+        const solidColor = options.lineColor || options.color || Cesium.Color.YELLOW;
+        const dashColor = (options.dashLineColor || options.lineColor || options.color || Cesium.Color.RED).withAlpha?.(0.9) || Cesium.Color.RED;
+        const vertical = viewer.entities.add({
+          polyline: {
+            positions: [low, third],
+            width: options.width || 3,
+            material: solidColor,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }),
+          },
+        });
+        const horizontal = viewer.entities.add({
+          polyline: {
+            positions: [third, high],
+            width: options.width || 3,
+            material: solidColor,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }),
+          },
+        });
+        const hypotenuse = viewer.entities.add({
+          polyline: {
+            positions: [low, high],
+            width: options.width || 3,
+            material: solidColor,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }),
+          },
+        });
+        this.segmentEntities.push(vertical, horizontal, hypotenuse);
+        const lenV = Cesium.Cartesian3.distance(low, third);
+        const lenH = Cesium.Cartesian3.distance(third, high);
+        const lenHyp = Cesium.Cartesian3.distance(low, high);
+        const midV = new Cesium.Cartesian3((low.x + third.x) / 2, (low.y + third.y) / 2, (low.z + third.z) / 2);
+        const midH = new Cesium.Cartesian3((third.x + high.x) / 2, (third.y + high.y) / 2, (third.z + high.z) / 2);
+        const midHyp = new Cesium.Cartesian3((low.x + high.x) / 2, (low.y + high.y) / 2, (low.z + high.z) / 2);
+        const mV = Cesium.Cartographic.fromCartesian(midV);
+        const mH = Cesium.Cartographic.fromCartesian(midH);
+        const mHyp = Cesium.Cartographic.fromCartesian(midHyp);
+        const idV = 'measure_triangle_seg_v';
+        const idH = 'measure_triangle_seg_h';
+        const idHyp = 'measure_triangle_seg_hyp';
+        this.segmentLabelIds = [idV, idH, idHyp];
+        this.htmlLabelPool.add({ text: `${lenV.toFixed(2)} m` }, { id: idV, lon: Cesium.Math.toDegrees(mV.longitude), lat: Cesium.Math.toDegrees(mV.latitude), height: mV.height || 0, theme: 'measure-triangle-seg', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+        this.htmlLabelPool.add({ text: `${lenH.toFixed(2)} m` }, { id: idH, lon: Cesium.Math.toDegrees(mH.longitude), lat: Cesium.Math.toDegrees(mH.latitude), height: mH.height || 0, theme: 'measure-triangle-seg', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+        this.htmlLabelPool.add({ text: `${lenHyp.toFixed(2)} m` }, { id: idHyp, lon: Cesium.Math.toDegrees(mHyp.longitude), lat: Cesium.Math.toDegrees(mHyp.latitude), height: mHyp.height || 0, theme: 'measure-triangle-seg', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+        const vLowToHigh = Cesium.Cartesian3.subtract(high, low, new Cesium.Cartesian3());
+        const vLowToThird = Cesium.Cartesian3.subtract(third, low, new Cesium.Cartesian3());
+        const vHighToThird = Cesium.Cartesian3.subtract(third, high, new Cesium.Cartesian3());
+        const vHighToLow = Cesium.Cartesian3.subtract(low, high, new Cesium.Cartesian3());
+        const dotA = Cesium.Cartesian3.dot(vLowToHigh, vLowToThird);
+        const magA = Math.sqrt(Cesium.Cartesian3.dot(vLowToHigh, vLowToHigh)) * Math.sqrt(Cesium.Cartesian3.dot(vLowToThird, vLowToThird));
+        const dotB = Cesium.Cartesian3.dot(vHighToThird, vHighToLow);
+        const magB = Math.sqrt(Cesium.Cartesian3.dot(vHighToThird, vHighToThird)) * Math.sqrt(Cesium.Cartesian3.dot(vHighToLow, vHighToLow));
+        const angleA = Math.acos(Math.min(Math.max(dotA / (magA || 1), -1), 1));
+        const angleB = Math.acos(Math.min(Math.max(dotB / (magB || 1), -1), 1));
+        const cLow = Cesium.Cartographic.fromCartesian(low);
+        const cHigh = Cesium.Cartographic.fromCartesian(high);
+        const idAngA = 'measure_triangle_angle_a';
+        const idAngB = 'measure_triangle_angle_b';
+        this.angleLabelIds = [idAngA, idAngB];
+        this.htmlLabelPool.add({ text: `${(angleA * 180 / Math.PI).toFixed(2)}°` }, { id: idAngA, lon: Cesium.Math.toDegrees(cLow.longitude), lat: Cesium.Math.toDegrees(cLow.latitude), height: cLow.height || 0, theme: 'measure-triangle-angle', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+        this.htmlLabelPool.add({ text: `${(angleB * 180 / Math.PI).toFixed(2)}°` }, { id: idAngB, lon: Cesium.Math.toDegrees(cHigh.longitude), lat: Cesium.Math.toDegrees(cHigh.latitude), height: cHigh.height || 0, theme: 'measure-triangle-angle', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+        const ratio = Math.max(0.01, Math.min(0.5, options.angleMarkerRatio ?? 0.2));
+        const markerLen = Math.min(lenV, lenH) * ratio;
+        if (lenV > 0.001 && lenH > 0.001) {
+          const dirV = Cesium.Cartesian3.normalize(
+            Cesium.Cartesian3.subtract(low, third, new Cesium.Cartesian3()),
+            new Cesium.Cartesian3(),
+          );
+          const dirH = Cesium.Cartesian3.normalize(
+            Cesium.Cartesian3.subtract(high, third, new Cesium.Cartesian3()),
+            new Cesium.Cartesian3(),
+          );
+          const pOffV = new Cesium.Cartesian3(
+            third.x + dirV.x * markerLen,
+            third.y + dirV.y * markerLen,
+            third.z + dirV.z * markerLen,
+          );
+          const pOffH = new Cesium.Cartesian3(
+            third.x + dirH.x * markerLen,
+            third.y + dirH.y * markerLen,
+            third.z + dirH.z * markerLen,
+          );
+          const pCorner = new Cesium.Cartesian3(
+            third.x + dirV.x * markerLen + dirH.x * markerLen,
+            third.y + dirV.y * markerLen + dirH.y * markerLen,
+            third.z + dirV.z * markerLen + dirH.z * markerLen,
+          );
+          const rightMarkerSeg1 = viewer.entities.add({
+            polyline: {
+              positions: [pOffV, pCorner],
+              width: options.width || 3,
+              material: solidColor,
+              depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }),
+            },
+          });
+          const rightMarkerSeg2 = viewer.entities.add({
+            polyline: {
+              positions: [pOffH, pCorner],
+              width: options.width || 3,
+              material: solidColor,
+              depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }),
+            },
+          });
+          this.angleMarkerEntities.push(rightMarkerSeg1, rightMarkerSeg2);
+        }
+        if (this.previewLabelId && this.htmlLabelPool) {
+          this.htmlLabelPool.removeByIds([this.previewLabelId]);
+          this.previewLabelId = null;
+        }
+        const result = {
+          entity: this.segmentEntities,
+          positions: [low, high, third],
+          lengths: { vertical: lenV, horizontal: lenH, hypotenuse: lenHyp },
+          angles: { acuteA: angleA, acuteB: angleB },
+          clear: () => this.clear(),
+        };
+        options.onComplete?.(result);
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.handler.setInputAction((movement: any) => {
+      if (this.positions.length !== 1) return;
+      const pos = viewer.scene.pickPosition(movement.endPosition);
+      if (!pos) return;
+      const c1 = Cesium.Cartographic.fromCartesian(this.positions[0]);
+      const c2 = Cesium.Cartographic.fromCartesian(pos);
+      const h1 = c1.height || 0;
+      const h2 = c2.height || 0;
+      const low = h1 <= h2 ? this.positions[0] : pos;
+      const high = h1 > h2 ? this.positions[0] : pos;
+      const cl = Cesium.Cartographic.fromCartesian(low);
+      const maxH = Math.max(h1, h2);
+      const third = Cesium.Cartesian3.fromDegrees(
+        this.Cesium.Math.toDegrees(cl.longitude),
+        this.Cesium.Math.toDegrees(cl.latitude),
+        maxH,
+      );
+      this.previewLow = low;
+      this.previewHigh = high;
+      this.previewThird = third;
+      const solidColor = options.lineColor || options.color || Cesium.Color.YELLOW;
+      const dashColor = (options.dashLineColor || options.lineColor || options.color || Cesium.Color.RED).withAlpha?.(0.9) || Cesium.Color.RED;
+      if (!this.previewPointEntity) {
+        this.previewPointEntity = viewer.entities.add({
+          position: pos,
+          point: {
+            pixelSize: 8,
+            color: options.pointColor || options.color || Cesium.Color.YELLOW,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          },
+        });
+      } else {
+        this.previewPointEntity.position = pos;
+      }
+      if (!this.previewSegmentEntities.length) {
+        const pv = viewer.entities.add({
+          polyline: {
+            positions: new Cesium.CallbackProperty(() => {
+              if (!this.previewLow || !this.previewThird) return [];
+              return [this.previewLow, this.previewThird];
+            }, false),
+            width: options.width || 3,
+            material: solidColor,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }),
+          },
+        });
+        const ph = viewer.entities.add({
+          polyline: {
+            positions: new Cesium.CallbackProperty(() => {
+              if (!this.previewThird || !this.previewHigh) return [];
+              return [this.previewThird, this.previewHigh];
+            }, false),
+            width: options.width || 3,
+            material: solidColor,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }),
+          },
+        });
+        const phyp = viewer.entities.add({
+          polyline: {
+            positions: new Cesium.CallbackProperty(() => {
+              if (!this.previewLow || !this.previewHigh) return [];
+              return [this.previewLow, this.previewHigh];
+            }, false),
+            width: options.width || 3,
+            material: solidColor,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }),
+          },
+        });
+        this.previewSegmentEntities.push(pv, ph, phyp);
+      }
+      const lenV = Cesium.Cartesian3.distance(low, third);
+      const lenH = Cesium.Cartesian3.distance(third, high);
+      const lenHyp = Cesium.Cartesian3.distance(low, high);
+      const vLowToHigh = Cesium.Cartesian3.subtract(high, low, new Cesium.Cartesian3());
+      const vLowToThird = Cesium.Cartesian3.subtract(third, low, new Cesium.Cartesian3());
+      const vHighToThird = Cesium.Cartesian3.subtract(third, high, new Cesium.Cartesian3());
+      const vHighToLow = Cesium.Cartesian3.subtract(low, high, new Cesium.Cartesian3());
+      const dotA = Cesium.Cartesian3.dot(vLowToHigh, vLowToThird);
+      const magA = Math.sqrt(Cesium.Cartesian3.dot(vLowToHigh, vLowToHigh)) * Math.sqrt(Cesium.Cartesian3.dot(vLowToThird, vLowToThird));
+      const dotB = Cesium.Cartesian3.dot(vHighToThird, vHighToLow);
+      const magB = Math.sqrt(Cesium.Cartesian3.dot(vHighToThird, vHighToThird)) * Math.sqrt(Cesium.Cartesian3.dot(vHighToLow, vHighToLow));
+      const angleA = Math.acos(Math.min(Math.max((dotA / (magA || 1)), -1), 1));
+      const angleB = Math.acos(Math.min(Math.max((dotB / (magB || 1)), -1), 1));
+      const midV = new Cesium.Cartesian3((low.x + third.x) / 2, (low.y + third.y) / 2, (low.z + third.z) / 2);
+      const midH = new Cesium.Cartesian3((third.x + high.x) / 2, (third.y + high.y) / 2, (third.z + high.z) / 2);
+      const midHyp = new Cesium.Cartesian3((low.x + high.x) / 2, (low.y + high.y) / 2, (low.z + high.z) / 2);
+      const mV = Cesium.Cartographic.fromCartesian(midV);
+      const mH = Cesium.Cartographic.fromCartesian(midH);
+      const mHyp = Cesium.Cartographic.fromCartesian(midHyp);
+      const cLow = Cesium.Cartographic.fromCartesian(low);
+      const cHigh = Cesium.Cartographic.fromCartesian(high);
+      const idV = 'measure_triangle_seg_v';
+      const idH = 'measure_triangle_seg_h';
+      const idHyp = 'measure_triangle_seg_hyp';
+      const idAngA = 'measure_triangle_angle_a';
+      const idAngB = 'measure_triangle_angle_b';
+      if (this.segmentLabelIds.length === 0) {
+        this.segmentLabelIds = [idV, idH, idHyp];
+      }
+      if (this.angleLabelIds.length === 0) {
+        this.angleLabelIds = [idAngA, idAngB];
+      }
+      this.htmlLabelPool.add({ text: `${lenV.toFixed(2)} m` }, { id: idV, lon: Cesium.Math.toDegrees(mV.longitude), lat: Cesium.Math.toDegrees(mV.latitude), height: mV.height || 0, theme: 'measure-triangle-seg', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+      this.htmlLabelPool.add({ text: `${lenH.toFixed(2)} m` }, { id: idH, lon: Cesium.Math.toDegrees(mH.longitude), lat: Cesium.Math.toDegrees(mH.latitude), height: mH.height || 0, theme: 'measure-triangle-seg', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+      this.htmlLabelPool.add({ text: `${lenHyp.toFixed(2)} m` }, { id: idHyp, lon: Cesium.Math.toDegrees(mHyp.longitude), lat: Cesium.Math.toDegrees(mHyp.latitude), height: mHyp.height || 0, theme: 'measure-triangle-seg', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+      this.htmlLabelPool.add({ text: `${(angleA * 180 / Math.PI).toFixed(2)}°` }, { id: idAngA, lon: Cesium.Math.toDegrees(cLow.longitude), lat: Cesium.Math.toDegrees(cLow.latitude), height: cLow.height || 0, theme: 'measure-triangle-angle', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+      this.htmlLabelPool.add({ text: `${(angleB * 180 / Math.PI).toFixed(2)}°` }, { id: idAngB, lon: Cesium.Math.toDegrees(cHigh.longitude), lat: Cesium.Math.toDegrees(cHigh.latitude), height: cHigh.height || 0, theme: 'measure-triangle-angle', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+      const ratio = Math.max(0.01, Math.min(0.5, options.angleMarkerRatio ?? 0.2));
+      const markerLen = Math.min(lenV, lenH) * ratio;
+      if (lenV > 0.001 && lenH > 0.001) {
+        const dirV = Cesium.Cartesian3.normalize(
+          Cesium.Cartesian3.subtract(low, third, new Cesium.Cartesian3()),
+          new Cesium.Cartesian3(),
+        );
+        const dirH = Cesium.Cartesian3.normalize(
+          Cesium.Cartesian3.subtract(high, third, new Cesium.Cartesian3()),
+          new Cesium.Cartesian3(),
+        );
+        const pOffV = new Cesium.Cartesian3(
+          third.x + dirV.x * markerLen,
+          third.y + dirV.y * markerLen,
+          third.z + dirV.z * markerLen,
+        );
+        const pOffH = new Cesium.Cartesian3(
+          third.x + dirH.x * markerLen,
+          third.y + dirH.y * markerLen,
+          third.z + dirH.z * markerLen,
+        );
+        const pCorner = new Cesium.Cartesian3(
+          third.x + dirV.x * markerLen + dirH.x * markerLen,
+          third.y + dirV.y * markerLen + dirH.y * markerLen,
+          third.z + dirV.z * markerLen + dirH.z * markerLen,
+        );
+        this.previewMarkerP1 = pOffV;
+        this.previewMarkerP2 = pOffH;
+        this.previewMarkerCorner = pCorner;
+        if (!this.previewAngleMarkerEntities.length) {
+          const rightMarkerSeg1 = viewer.entities.add({
+            polyline: {
+              positions: new Cesium.CallbackProperty(() => {
+                if (!this.previewMarkerP1 || !this.previewMarkerCorner) return [];
+                return [this.previewMarkerP1, this.previewMarkerCorner];
+              }, false),
+              width: options.width || 3,
+              material: solidColor,
+              depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }),
+            },
+          });
+          const rightMarkerSeg2 = viewer.entities.add({
+            polyline: {
+              positions: new Cesium.CallbackProperty(() => {
+                if (!this.previewMarkerP2 || !this.previewMarkerCorner) return [];
+                return [this.previewMarkerP2, this.previewMarkerCorner];
+              }, false),
+              width: options.width || 3,
+              material: solidColor,
+              depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }),
+            },
+          });
+          this.previewAngleMarkerEntities.push(rightMarkerSeg1, rightMarkerSeg2);
+        }
+      }
+    }, 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.angleMarkerEntities.forEach((e) => this.viewer.entities.remove(e));
+    this.angleMarkerEntities = [];
+    this.pointEntities.forEach((e) => this.viewer.entities.remove(e));
+    this.pointEntities = [];
+    this.previewSegmentEntities.forEach((e) => this.viewer.entities.remove(e));
+    this.previewSegmentEntities = [];
+    this.previewAngleMarkerEntities.forEach((e) => this.viewer.entities.remove(e));
+    this.previewAngleMarkerEntities = [];
+    if (this.previewPointEntity) {
+      this.viewer.entities.remove(this.previewPointEntity);
+      this.previewPointEntity = 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;
+    }
+    if (this.segmentLabelIds.length && this.htmlLabelPool) {
+      this.htmlLabelPool.removeByIds(this.segmentLabelIds.slice());
+    }
+    if (this.angleLabelIds.length && this.htmlLabelPool) {
+      this.htmlLabelPool.removeByIds(this.angleLabelIds.slice());
+    }
+    this.segmentLabelIds = [];
+    this.angleLabelIds = [];
+    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-triangle', {
+        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-triangle-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.htmlLabelPool.registerTheme('measure-triangle-angle', {
+        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 c1 = Cesium.Cartographic.fromCartesian(posList[0]);
+    const c2 = Cesium.Cartographic.fromCartesian(posList[1]);
+    const h1 = c1.height || 0;
+    const h2 = c2.height || 0;
+    const low = h1 <= h2 ? posList[0] : posList[1];
+    const high = h1 > h2 ? posList[0] : posList[1];
+    const pLow = viewer.entities.add({ position: low, point: { pixelSize: 8, color: opts.pointColor || opts.color || Cesium.Color.YELLOW, disableDepthTestDistance: Number.POSITIVE_INFINITY } });
+    const pHigh = viewer.entities.add({ position: high, point: { pixelSize: 8, color: opts.pointColor || opts.color || Cesium.Color.YELLOW, disableDepthTestDistance: Number.POSITIVE_INFINITY } });
+    this.pointEntities.push(pLow, pHigh);
+    const cl = Cesium.Cartographic.fromCartesian(low);
+    const maxH = Math.max(h1, h2);
+    const third = Cesium.Cartesian3.fromDegrees(
+      Cesium.Math.toDegrees(cl.longitude),
+      Cesium.Math.toDegrees(cl.latitude),
+      maxH,
+    );
+    const vertical = viewer.entities.add({
+      polyline: { positions: [low, third], width, material: lineColor, depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }) },
+    });
+    const horizontal = viewer.entities.add({
+      polyline: { positions: [third, high], width, material: lineColor, depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }) },
+    });
+    const hypotenuse = viewer.entities.add({
+      polyline: { positions: [low, high], width, material: lineColor, depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }) },
+    });
+    this.segmentEntities.push(vertical, horizontal, hypotenuse);
+    const lenV = Cesium.Cartesian3.distance(low, third);
+    const lenH = Cesium.Cartesian3.distance(third, high);
+    const lenHyp = Cesium.Cartesian3.distance(low, high);
+    const midV = new Cesium.Cartesian3((low.x + third.x) / 2, (low.y + third.y) / 2, (low.z + third.z) / 2);
+    const midH = new Cesium.Cartesian3((third.x + high.x) / 2, (third.y + high.y) / 2, (third.z + high.z) / 2);
+    const midHyp = new Cesium.Cartesian3((low.x + high.x) / 2, (low.y + high.y) / 2, (low.z + high.z) / 2);
+    const mV = Cesium.Cartographic.fromCartesian(midV);
+    const mH = Cesium.Cartographic.fromCartesian(midH);
+    const mHyp = Cesium.Cartographic.fromCartesian(midHyp);
+    const idV = record.id + '_tri_v';
+    const idH = record.id + '_tri_h';
+    const idHyp = record.id + '_tri_hyp';
+    this.segmentLabelIds = [idV, idH, idHyp];
+    this.htmlLabelPool.add({ text: `${lenV.toFixed(2)} m` }, { id: idV, lon: Cesium.Math.toDegrees(mV.longitude), lat: Cesium.Math.toDegrees(mV.latitude), height: mV.height || 0, theme: 'measure-triangle-seg', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+    this.htmlLabelPool.add({ text: `${lenH.toFixed(2)} m` }, { id: idH, lon: Cesium.Math.toDegrees(mH.longitude), lat: Cesium.Math.toDegrees(mH.latitude), height: mH.height || 0, theme: 'measure-triangle-seg', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+    this.htmlLabelPool.add({ text: `${lenHyp.toFixed(2)} m` }, { id: idHyp, lon: Cesium.Math.toDegrees(mHyp.longitude), lat: Cesium.Math.toDegrees(mHyp.latitude), height: mHyp.height || 0, theme: 'measure-triangle-seg', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+    const vLowToHigh = Cesium.Cartesian3.subtract(high, low, new Cesium.Cartesian3());
+    const vLowToThird = Cesium.Cartesian3.subtract(third, low, new Cesium.Cartesian3());
+    const vHighToThird = Cesium.Cartesian3.subtract(third, high, new Cesium.Cartesian3());
+    const vHighToLow = Cesium.Cartesian3.subtract(low, high, new Cesium.Cartesian3());
+    const dotA = Cesium.Cartesian3.dot(vLowToHigh, vLowToThird);
+    const magA = Math.sqrt(Cesium.Cartesian3.dot(vLowToHigh, vLowToHigh)) * Math.sqrt(Cesium.Cartesian3.dot(vLowToThird, vLowToThird));
+    const dotB = Cesium.Cartesian3.dot(vHighToThird, vHighToLow);
+    const magB = Math.sqrt(Cesium.Cartesian3.dot(vHighToThird, vHighToThird)) * Math.sqrt(Cesium.Cartesian3.dot(vHighToLow, vHighToLow));
+    const angleA = Math.acos(Math.min(Math.max(dotA / (magA || 1), -1), 1));
+    const angleB = Math.acos(Math.min(Math.max(dotB / (magB || 1), -1), 1));
+    const cLow = Cesium.Cartographic.fromCartesian(low);
+    const cHigh = Cesium.Cartographic.fromCartesian(high);
+    const t = opts.labelText || { angle: '角度' };
+    const idAngA = record.id + '_tri_angA';
+    const idAngB = record.id + '_tri_angB';
+    this.angleLabelIds = [idAngA, idAngB];
+    this.htmlLabelPool.add({ text: `${t.angle}:${(angleA * 180 / Math.PI).toFixed(2)}°` }, { id: idAngA, lon: Cesium.Math.toDegrees(cLow.longitude), lat: Cesium.Math.toDegrees(cLow.latitude), height: cLow.height || 0, theme: 'measure-triangle-angle', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+    this.htmlLabelPool.add({ text: `${t.angle}:${(angleB * 180 / Math.PI).toFixed(2)}°` }, { id: idAngB, lon: Cesium.Math.toDegrees(cHigh.longitude), lat: Cesium.Math.toDegrees(cHigh.latitude), height: cHigh.height || 0, theme: 'measure-triangle-angle', show: true, style: { pointerEvents: 'none', userSelect: 'none', cursor: 'default' } });
+    const ratio = Math.max(0.01, Math.min(0.5, opts.angleMarkerRatio ?? 0.2));
+    const markerLen = Math.min(lenV, lenH) * ratio;
+    if (lenV > 0.001 && lenH > 0.001) {
+      const dirV = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(low, third, new Cesium.Cartesian3()), new Cesium.Cartesian3());
+      const dirH = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(high, third, new Cesium.Cartesian3()), new Cesium.Cartesian3());
+      const pOffV = new Cesium.Cartesian3(third.x + dirV.x * markerLen, third.y + dirV.y * markerLen, third.z + dirV.z * markerLen);
+      const pOffH = new Cesium.Cartesian3(third.x + dirH.x * markerLen, third.y + dirH.y * markerLen, third.z + dirH.z * markerLen);
+      const pCorner = new Cesium.Cartesian3(third.x + dirV.x * markerLen + dirH.x * markerLen, third.y + dirV.y * markerLen + dirH.y * markerLen, third.z + dirV.z * markerLen + dirH.z * markerLen);
+      const rightMarkerSeg1 = viewer.entities.add({ polyline: { positions: [pOffV, pCorner], width, material: lineColor, depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }) } });
+      const rightMarkerSeg2 = viewer.entities.add({ polyline: { positions: [pOffH, pCorner], width, material: lineColor, depthFailMaterial: new Cesium.PolylineDashMaterialProperty({ color: dashColor, dashLength: 12, dashPattern: 255 }) } });
+      this.angleMarkerEntities.push(rightMarkerSeg1, rightMarkerSeg2);
+    }
+  }
+}