leiting-bim 2.1.35 → 2.1.37

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

@@ -0,0 +1,472 @@
+import { IMeasure, MeasurementOptions, MeasurementRecord } from '../types';
+import { HtmlOverlayLabelPool } from '../../HtmlOverlayLabelPool';
+
+export default class RegularPolygonMeasure implements IMeasure {
+  private Cesium: any;
+  private viewer: any;
+  private handler: any = null;
+  private entity: any = null;
+  private positions: any[] = [];
+  private labelEntity: any = null;
+  private currentPoints: any[] = [];
+  private primitive: any = null;
+  private previewEntity: any = null;
+  private edgeEntities: any[] = [];
+  private pointEntities: any[] = [];
+  private previewEdgeEntity: any = null;
+  private previewPointEntities: any[] = [];
+  private htmlLabelPool: any = null;
+  private htmlLabelId: 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;
+    const sides = Math.max(options.sides || 6, 6);
+    if (!this.htmlLabelPool) {
+      const containerId = options.overlayContainerId || 'html-label-container';
+      this.htmlLabelPool = new HtmlOverlayLabelPool(Cesium, viewer, containerId);
+      this.htmlLabelPool.registerTheme('measure-regular', {
+        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-regular-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((click: any) => {
+      const position = viewer.scene.pickPosition(click.position);
+      if (!position) return;
+      this.positions.push(position);
+      if (this.positions.length === 2) {
+        this.stop();
+        const center = this.positions[0];
+        const edge = this.positions[1];
+        const radius = Cesium.Cartesian3.distance(center, edge);
+        const points = this.buildRegularPolygonPoints(center, radius, sides);
+        if (this.previewEntity) {
+          viewer.entities.remove(this.previewEntity);
+          this.previewEntity = null;
+        }
+        if (this.primitive) {
+          viewer.scene.primitives.remove(this.primitive);
+          this.primitive = null;
+        }
+        const hierarchy = new Cesium.PolygonHierarchy(points);
+        const geom = new Cesium.PolygonGeometry({
+          polygonHierarchy: hierarchy,
+          vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT,
+          perPositionHeight: true,
+          arcType: Cesium.ArcType.NONE,
+        });
+        const instance = new Cesium.GeometryInstance({ geometry: geom });
+        const color = options.color || Cesium.Color.YELLOW.withAlpha(0.4);
+        const occludedColor = (options.color && options.color.withAlpha)
+          ? options.color.withAlpha(0.25)
+          : Cesium.Color.RED.withAlpha(0.4);
+        this.primitive = new Cesium.Primitive({
+          geometryInstances: instance,
+          appearance: new Cesium.MaterialAppearance({
+            material: Cesium.Material.fromType('Color', { color }),
+            translucent: true,
+            closed: true,
+          }),
+          depthFailAppearance: new Cesium.MaterialAppearance({
+            material: Cesium.Material.fromType('Color', { color: occludedColor }),
+            translucent: true,
+            closed: true,
+          }),
+        });
+        viewer.scene.primitives.add(this.primitive);
+        const lineColor = options.lineColor || color;
+        const dashColor =
+          (options.dashLineColor || options.lineColor || options.color || Cesium.Color.RED).withAlpha?.(0.9) ||
+          Cesium.Color.RED;
+        const polylinePositions = points.slice();
+        const lineEntity = viewer.entities.add({
+          polyline: {
+            positions: polylinePositions,
+            width: options.width || 2,
+            material: lineColor,
+            clampToGround: false,
+            arcType: Cesium.ArcType.NONE,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
+              color: dashColor,
+              dashLength: 12,
+              dashPattern: 255,
+            }),
+          },
+        });
+        this.edgeEntities.push(lineEntity);
+        const pointColor = options.pointColor || color;
+        const uniquePoints = points.slice(0, points.length - 1);
+        for (const p of uniquePoints) {
+          const pointEntity = viewer.entities.add({
+            position: p,
+            point: {
+              pixelSize: 8,
+              color: pointColor,
+              disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            },
+          });
+          this.pointEntities.push(pointEntity);
+        }
+        const area = this.computeAreaByPlane(points);
+        const cc = Cesium.Cartographic.fromCartesian(center);
+        const id = this.htmlLabelId || `measure_regular_${Date.now()}`;
+        this.htmlLabelId = id;
+        const t = options.labelText || { sides: '边数', radius: '半径', circumference: '周长', area: '面积', side: '边长' };
+        if (this.previewLabelId && this.htmlLabelPool) {
+          this.htmlLabelPool.removeByIds([this.previewLabelId]);
+          this.previewLabelId = null;
+        }
+        let perimeter = 0;
+        for (let i = 1; i < points.length; i++) {
+          const p1 = points[i - 1];
+          const p2 = points[i];
+          const c1 = Cesium.Cartographic.fromCartesian(p1);
+          const c2 = Cesium.Cartographic.fromCartesian(p2);
+          const geodesic = new Cesium.EllipsoidGeodesic(c1, c2);
+          const d = geodesic.surfaceDistance;
+          perimeter += d;
+          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 = `measure_regular_seg_${Date.now()}_${i - 1}`;
+          this.segmentLabelIds.push(sid);
+          this.htmlLabelPool.add(
+            { text: `${t.side}:${d.toFixed(2)} m` },
+            {
+              id: sid,
+              lon: Cesium.Math.toDegrees(mc.longitude),
+              lat: Cesium.Math.toDegrees(mc.latitude),
+              height: mc.height || 0,
+              theme: 'measure-regular-seg',
+              show: true,
+            },
+          );
+        }
+        this.htmlLabelPool.add(
+          { text: `${t.sides}:${sides}\n${t.radius}:${radius.toFixed(2)} m\n${t.circumference}:${perimeter.toFixed(2)} m\n${t.area}:${area.toFixed(2)} m²` },
+          {
+            id,
+            lon: Cesium.Math.toDegrees(cc.longitude),
+            lat: Cesium.Math.toDegrees(cc.latitude),
+            height: cc.height || 0,
+            theme: 'measure-regular',
+            show: true,
+          },
+        );
+        const result = {
+          entity: this.primitive,
+          label: this.labelEntity,
+          positions: points,
+          radius,
+          sides,
+          perimeter,
+          area,
+          clear: () => this.clear(),
+        };
+        options.onComplete?.(result);
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.handler.setInputAction((movement: any) => {
+      if (this.positions.length !== 1) return;
+      const center = this.positions[0];
+      const ray = viewer.camera.getPickRay(movement.endPosition);
+      const edge = viewer.scene.globe.pick(ray, viewer.scene);
+      if (!edge) return;
+      const radius = Cesium.Cartesian3.distance(center, edge);
+      this.currentPoints = this.buildRegularPolygonPoints(center, radius, sides);
+      if (!this.previewEntity) {
+        const color = options.color || Cesium.Color.YELLOW.withAlpha(0.4);
+        this.previewEntity = viewer.entities.add({
+          polygon: {
+            hierarchy: new Cesium.CallbackProperty(() => {
+              if (!this.currentPoints || this.currentPoints.length === 0) return undefined;
+              return new Cesium.PolygonHierarchy(this.currentPoints);
+            }, false),
+            material: color,
+            perPositionHeight: true,
+            arcType: Cesium.ArcType.NONE,
+          },
+        });
+        const lineColor = options.lineColor || options.color || Cesium.Color.YELLOW;
+        const dashColor =
+          (options.dashLineColor || options.lineColor || options.color || Cesium.Color.RED).withAlpha?.(0.9) ||
+          Cesium.Color.RED;
+        this.previewEdgeEntity = viewer.entities.add({
+          polyline: {
+            positions: new Cesium.CallbackProperty(() => {
+              if (!this.currentPoints || this.currentPoints.length === 0) return [];
+              return this.currentPoints.slice();
+            }, false),
+            width: options.width || 2,
+            material: lineColor,
+            clampToGround: false,
+            arcType: Cesium.ArcType.NONE,
+            depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
+              color: dashColor,
+              dashLength: 12,
+              dashPattern: 255,
+            }),
+          },
+        });
+        const pointColor = options.pointColor || options.color || Cesium.Color.YELLOW;
+        const basePoint = viewer.entities.add({
+          position: center,
+          point: {
+            pixelSize: 8,
+            color: pointColor,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          },
+        });
+        const hoverPoint = viewer.entities.add({
+          position: new Cesium.CallbackProperty(() => edge || center, false),
+          point: {
+            pixelSize: 8,
+            color: pointColor,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          },
+        });
+        this.previewPointEntities.push(basePoint, hoverPoint);
+      }
+      let perimeter = 0;
+      for (let i = 1; i < this.currentPoints.length; i++) {
+        const p1 = this.currentPoints[i - 1];
+        const p2 = this.currentPoints[i];
+        const c1 = Cesium.Cartographic.fromCartesian(p1);
+        const c2 = Cesium.Cartographic.fromCartesian(p2);
+        const geodesic = new Cesium.EllipsoidGeodesic(c1, c2);
+        perimeter += geodesic.surfaceDistance;
+      }
+      const area = this.computeAreaByPlane(this.currentPoints);
+      const cc = Cesium.Cartographic.fromCartesian(center);
+      const pid = this.previewLabelId || 'measure_regular_preview';
+      this.previewLabelId = pid;
+      const t = options.labelText || { sides: '边数', radius: '半径', circumference: '周长', area: '面积' };
+      this.htmlLabelPool.add(
+        { text: `${t.sides}:${sides}\n${t.radius}:${radius.toFixed(2)} m\n${t.circumference}:${perimeter.toFixed(2)} m\n${t.area}:${area.toFixed(2)} m²` },
+        {
+          id: pid,
+          lon: Cesium.Math.toDegrees(cc.longitude),
+          lat: Cesium.Math.toDegrees(cc.latitude),
+          height: cc.height || 0,
+          theme: 'measure-regular',
+          show: true,
+        },
+      );
+    }, 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.previewEntity) {
+      this.viewer.entities.remove(this.previewEntity);
+      this.previewEntity = null;
+    }
+    if (this.previewEdgeEntity) {
+      this.viewer.entities.remove(this.previewEdgeEntity);
+      this.previewEdgeEntity = null;
+    }
+    if (this.previewPointEntities.length) {
+      for (const p of this.previewPointEntities) {
+        try {
+          this.viewer.entities.remove(p);
+        } catch {}
+      }
+      this.previewPointEntities = [];
+    }
+    if (this.primitive) {
+      this.viewer.scene.primitives.remove(this.primitive);
+      this.primitive = null;
+    }
+    if (this.edgeEntities.length) {
+      for (const e of this.edgeEntities) {
+        try {
+          this.viewer.entities.remove(e);
+        } catch {}
+      }
+      this.edgeEntities = [];
+    }
+    if (this.pointEntities.length) {
+      for (const p of this.pointEntities) {
+        try {
+          this.viewer.entities.remove(p);
+        } catch {}
+      }
+      this.pointEntities = [];
+    }
+    if (this.labelEntity) {
+      this.viewer.entities.remove(this.labelEntity);
+      this.labelEntity = 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());
+    }
+    this.segmentLabelIds = [];
+    this.positions = [];
+    this.currentPoints = [];
+  }
+
+  rehydrate(record: MeasurementRecord, htmlLabelPool?: HtmlOverlayLabelPool) {
+    const Cesium = this.Cesium;
+    const viewer = this.viewer;
+    const opts = (record.options || {}) as MeasurementOptions;
+    const sides = (record.data?.sides || opts.sides || 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-regular', {
+        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-regular-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 } },
+      });
+    }
+    let points: any[] = [];
+    let center = posList[0];
+    let radius = 0;
+    if (posList.length >= 3) {
+      points = posList.slice();
+      center = new Cesium.Cartesian3(
+        points.reduce((s: number, p: any) => s + p.x, 0) / points.length,
+        points.reduce((s: number, p: any) => s + p.y, 0) / points.length,
+        points.reduce((s: number, p: any) => s + p.z, 0) / points.length,
+      );
+      const c1 = points[0];
+      const c2 = points[Math.floor(points.length / 2)] || points[1];
+      radius = Cesium.Cartesian3.distance(center, c1);
+    } else {
+      const edge = posList[1];
+      radius = Cesium.Cartesian3.distance(center, edge);
+      points = this.buildRegularPolygonPoints(center, radius, Math.max(sides, 3));
+    }
+    const hierarchy = new Cesium.PolygonHierarchy(points);
+    const geom = new Cesium.PolygonGeometry({ polygonHierarchy: hierarchy, vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT, perPositionHeight: true });
+    const instance = new Cesium.GeometryInstance({ geometry: geom });
+    const color = opts.color || Cesium.Color.YELLOW.withAlpha(0.4);
+    const occludedColor = (opts.color && opts.color.withAlpha) ? opts.color.withAlpha(0.25) : Cesium.Color.RED.withAlpha(0.4);
+    const primitive = new Cesium.Primitive({ geometryInstances: instance, appearance: new Cesium.MaterialAppearance({ material: Cesium.Material.fromType('Color', { color }), translucent: true, closed: true }), depthFailAppearance: new Cesium.MaterialAppearance({ material: Cesium.Material.fromType('Color', { color: occludedColor }), translucent: true, closed: true }) });
+    viewer.scene.primitives.add(primitive);
+    this.primitive = primitive;
+    const area = this.computeAreaByPlane(points);
+    const cc = Cesium.Cartographic.fromCartesian(center);
+    const id = record.id + '_regular';
+    this.htmlLabelId = id;
+    const t = opts.labelText || { sides: '边数', radius: '半径', circumference: '周长', area: '面积', side: '边长' };
+    let perimeter = 0;
+    for (let i = 1; i < points.length; i++) {
+      const p1 = points[i - 1];
+      const p2 = points[i];
+      const c1 = Cesium.Cartographic.fromCartesian(p1);
+      const c2 = Cesium.Cartographic.fromCartesian(p2);
+      const geodesic = new Cesium.EllipsoidGeodesic(c1, c2);
+      const d = geodesic.surfaceDistance;
+      perimeter += d;
+      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 + `_regular_seg_${i - 1}`;
+      this.segmentLabelIds.push(sid);
+      this.htmlLabelPool.add({ text: `${t.side}:${d.toFixed(2)} m` }, { id: sid, lon: Cesium.Math.toDegrees(mc.longitude), lat: Cesium.Math.toDegrees(mc.latitude), height: mc.height || 0, theme: 'measure-regular-seg', show: true });
+    }
+    this.htmlLabelPool.add({ text: `${t.sides}:${Math.max(sides, 3)}\n${t.radius}:${radius.toFixed(2)} m\n${t.circumference}:${perimeter.toFixed(2)} m\n${t.area}:${area.toFixed(2)} m²` }, { id, lon: Cesium.Math.toDegrees(cc.longitude), lat: Cesium.Math.toDegrees(cc.latitude), height: cc.height || 0, theme: 'measure-regular', show: true });
+  }
+
+  private buildRegularPolygonPoints(center: any, radius: number, sides: number) {
+    const Cesium = this.Cesium;
+    const plane = new Cesium.EllipsoidTangentPlane(center, Cesium.Ellipsoid.WGS84);
+    const step = (2 * Math.PI) / sides;
+    const points2D: any[] = [];
+    for (let i = 0; i < sides; i++) {
+      const angle = i * step;
+      const x = radius * Math.cos(angle);
+      const y = radius * Math.sin(angle);
+      points2D.push(new Cesium.Cartesian2(x, y));
+    }
+    const worldPoints = plane.projectPointsOntoEllipsoid(points2D);
+    const points: any[] = worldPoints.slice();
+    points.push(points[0]);
+    return points;
+  }
+
+  private computeAreaByPlane(points: any[]) {
+    const Cesium = this.Cesium;
+    const center = new Cesium.Cartesian3(
+      points.reduce((s: number, p: any) => s + p.x, 0) / points.length,
+      points.reduce((s: number, p: any) => s + p.y, 0) / points.length,
+      points.reduce((s: number, p: any) => s + p.z, 0) / points.length,
+    );
+    const plane = new Cesium.EllipsoidTangentPlane(center, Cesium.Ellipsoid.WGS84);
+    const p2d = plane.projectPointsOntoPlane(points);
+    let area = 0;
+    for (let i = 0; i < p2d.length; i++) {
+      const j = (i + 1) % p2d.length;
+      area += p2d[i].x * p2d[j].y - p2d[j].x * p2d[i].y;
+    }
+    return Math.abs(area) / 2;
+  }
+}