leiting-bim 2.1.36 → 2.1.39

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

@@ -0,0 +1,451 @@
+import { IMeasure, MeasurementOptions, MeasurementRecord } from '../types';
+import { HtmlOverlayLabelPool } from '../../HtmlOverlayLabelPool';
+
+export default class AreaMeasure 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 primitive: any = null;
+  private previewPrimitive: any = null;
+  private htmlLabelPool: any = null;
+  private htmlLabelId: string | null = null;
+  private previewLabelId: string | null = null;
+  private segmentLabelIds: string[] = [];
+  private angleLabelIds: string[] = [];
+
+  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-area', {
+        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-area-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-area-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 point = viewer.entities.add({
+        position: pos,
+        point: {
+          pixelSize: 8,
+          color: options.color || Cesium.Color.YELLOW,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        },
+      });
+      this.tempPoints.push(point);
+      if (this.primitive) {
+        viewer.scene.primitives.remove(this.primitive);
+        this.primitive = null;
+      }
+      const hierarchy = new Cesium.PolygonHierarchy(this.positions.slice());
+      const geom = new Cesium.PolygonGeometry({
+        polygonHierarchy: hierarchy,
+        vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT,
+        perPositionHeight: true,
+      });
+      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);
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.handler.setInputAction((movement: any) => {
+      if (this.positions.length === 0) return;
+      const pos = viewer.scene.pickPosition(movement.endPosition);
+      if (!pos) return;
+      const pts = this.positions.concat([pos]);
+      const center = new Cesium.Cartesian3(
+        pts.reduce((s: number, p: any) => s + p.x, 0) / pts.length,
+        pts.reduce((s: number, p: any) => s + p.y, 0) / pts.length,
+        pts.reduce((s: number, p: any) => s + p.z, 0) / pts.length,
+      );
+      const plane = new Cesium.EllipsoidTangentPlane(center, Cesium.Ellipsoid.WGS84);
+      const points2D = plane.projectPointsOntoPlane(pts);
+      let area2D = 0;
+      for (let i = 0; i < points2D.length; i++) {
+        const j = (i + 1) % points2D.length;
+        area2D += points2D[i].x * points2D[j].y - points2D[j].x * points2D[i].y;
+      }
+      area2D = Math.abs(area2D) / 2;
+      const cc = Cesium.Cartographic.fromCartesian(center);
+      const pid = this.previewLabelId || 'measure_area_preview';
+      this.previewLabelId = pid;
+      const t = options.labelText || { area: '面积' };
+      this.htmlLabelPool.add(
+        { text: `${t.area}:${area2D.toFixed(2)} m²` },
+        {
+          id: pid,
+          lon: Cesium.Math.toDegrees(cc.longitude),
+          lat: Cesium.Math.toDegrees(cc.latitude),
+          height: cc.height || 0,
+          theme: 'measure-area',
+          show: true,
+        },
+      );
+      if (this.previewPrimitive) {
+        viewer.scene.primitives.remove(this.previewPrimitive);
+        this.previewPrimitive = null;
+      }
+      const hierarchy = new Cesium.PolygonHierarchy(pts);
+      const geom = new Cesium.PolygonGeometry({
+        polygonHierarchy: hierarchy,
+        vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT,
+        perPositionHeight: true,
+      });
+      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.previewPrimitive = 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.previewPrimitive);
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+    this.handler.setInputAction(() => {
+      if (this.positions.length < 3) {
+        this.stop();
+        return;
+      }
+      if (this.positions.length >= 3) {
+        this.positions.pop();
+        const lastPoint = this.tempPoints.pop();
+        if (lastPoint) this.viewer.entities.remove(lastPoint);
+      }
+      this.stop();
+      const center = new Cesium.Cartesian3(
+        this.positions.reduce((s: number, p: any) => s + p.x, 0) / this.positions.length,
+        this.positions.reduce((s: number, p: any) => s + p.y, 0) / this.positions.length,
+        this.positions.reduce((s: number, p: any) => s + p.z, 0) / this.positions.length,
+      );
+      const plane = new Cesium.EllipsoidTangentPlane(center, Cesium.Ellipsoid.WGS84);
+      const points2D = plane.projectPointsOntoPlane(this.positions);
+      let area2D = 0;
+      for (let i = 0; i < points2D.length; i++) {
+        const j = (i + 1) % points2D.length;
+        area2D += points2D[i].x * points2D[j].y - points2D[j].x * points2D[i].y;
+      }
+      area2D = Math.abs(area2D) / 2;
+      const cc = Cesium.Cartographic.fromCartesian(center);
+      const id = this.htmlLabelId || `measure_area_${Date.now()}`;
+      this.htmlLabelId = id;
+      const t = options.labelText || { area: '面积', side: '边长', angle: '角度' };
+      if (this.previewLabelId && this.htmlLabelPool) {
+        this.htmlLabelPool.removeByIds([this.previewLabelId]);
+        this.previewLabelId = null;
+      }
+      this.htmlLabelPool.add(
+        { text: `${t.area}:${area2D.toFixed(2)} m²` },
+        {
+          id,
+          lon: Cesium.Math.toDegrees(cc.longitude),
+          lat: Cesium.Math.toDegrees(cc.latitude),
+          height: cc.height || 0,
+          theme: 'measure-area',
+          show: true,
+        },
+      );
+      this.labelEntity = this.htmlLabelId;
+      for (let i = 0; i < this.positions.length; i++) {
+        const j = (i + 1) % this.positions.length;
+        const p1 = this.positions[i];
+        const p2 = this.positions[j];
+        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 = `measure_area_seg_${Date.now()}_${i}`;
+        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-area-seg',
+            show: true,
+          },
+        );
+      }
+      const p2d = points2D;
+      for (let i = 0; i < p2d.length; i++) {
+        const prev = p2d[(i - 1 + p2d.length) % p2d.length];
+        const curr = p2d[i];
+        const next = p2d[(i + 1) % p2d.length];
+        const v1x = prev.x - curr.x;
+        const v1y = prev.y - curr.y;
+        const v2x = next.x - curr.x;
+        const v2y = next.y - curr.y;
+        const len1 = Math.sqrt(v1x * v1x + v1y * v1y);
+        const len2 = Math.sqrt(v2x * v2x + v2y * v2y);
+        if (!len1 || !len2) continue;
+        const dot = (v1x / len1) * (v2x / len2) + (v1y / len1) * (v2y / len2);
+        const ang = Math.acos(Math.min(1, Math.max(-1, dot))) * (180 / Math.PI);
+        const pc = Cesium.Cartographic.fromCartesian(this.positions[i]);
+        const aid = `measure_area_angle_${Date.now()}_${i}`;
+        this.angleLabelIds.push(aid);
+        this.htmlLabelPool.add(
+          { text: `${t.angle}:${ang.toFixed(2)} °` },
+          {
+            id: aid,
+            lon: Cesium.Math.toDegrees(pc.longitude),
+            lat: Cesium.Math.toDegrees(pc.latitude),
+            height: pc.height || 0,
+            theme: 'measure-area-angle',
+            show: true,
+          },
+        );
+      }
+      const result = {
+        entity: this.primitive,
+        label: this.labelEntity,
+        positions: this.positions,
+        area: area2D,
+        clear: () => this.clear(),
+      };
+      options.onComplete?.(result);
+    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+  }
+
+  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.primitive) {
+      this.viewer.scene.primitives.remove(this.primitive);
+      this.primitive = null;
+    }
+    if (this.previewPrimitive) {
+      this.viewer.scene.primitives.remove(this.previewPrimitive);
+      this.previewPrimitive = null;
+    }
+    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());
+    }
+    if (this.angleLabelIds.length && this.htmlLabelPool) {
+      this.htmlLabelPool.removeByIds(this.angleLabelIds.slice());
+    }
+    this.segmentLabelIds = [];
+    this.angleLabelIds = [];
+    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 posList = (record.positions || []).map((p) => new Cesium.Cartesian3(p[0], p[1], p[2]));
+    if (posList.length < 3) return;
+    if (!this.htmlLabelPool) {
+      const containerId = opts.overlayContainerId || 'html-label-container';
+      this.htmlLabelPool = htmlLabelPool || new HtmlOverlayLabelPool(Cesium, viewer, containerId);
+      this.htmlLabelPool.registerTheme('measure-area', {
+        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-area-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-area-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 } },
+      });
+    }
+    for (const pos of posList) {
+      const point = viewer.entities.add({ position: pos, point: { pixelSize: 8, color: opts.color || Cesium.Color.YELLOW, disableDepthTestDistance: Number.POSITIVE_INFINITY } });
+      this.tempPoints.push(point);
+    }
+    const center = new Cesium.Cartesian3(
+      posList.reduce((s: number, p: any) => s + p.x, 0) / posList.length,
+      posList.reduce((s: number, p: any) => s + p.y, 0) / posList.length,
+      posList.reduce((s: number, p: any) => s + p.z, 0) / posList.length,
+    );
+    const plane = new Cesium.EllipsoidTangentPlane(center, Cesium.Ellipsoid.WGS84);
+    const points2D = plane.projectPointsOntoPlane(posList);
+    let area2D = 0;
+    for (let i = 0; i < points2D.length; i++) {
+      const j = (i + 1) % points2D.length;
+      area2D += points2D[i].x * points2D[j].y - points2D[j].x * points2D[i].y;
+    }
+    area2D = Math.abs(area2D) / 2;
+    const cc = Cesium.Cartographic.fromCartesian(center);
+    const id = record.id + '_area';
+    this.htmlLabelId = id;
+    const t = opts.labelText || { area: '面积', side: '边长', angle: '角度' };
+    this.htmlLabelPool.add({ text: `${t.area}:${area2D.toFixed(2)} m²` }, {
+      id,
+      lon: Cesium.Math.toDegrees(cc.longitude),
+      lat: Cesium.Math.toDegrees(cc.latitude),
+      height: cc.height || 0,
+      theme: 'measure-area',
+      show: true,
+    });
+    const hierarchy = new Cesium.PolygonHierarchy(posList);
+    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;
+    for (let i = 0; i < posList.length; i++) {
+      const j = (i + 1) % posList.length;
+      const p1 = posList[i];
+      const p2 = posList[j];
+      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 + `_area_seg_${i}`;
+      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-area-seg', show: true });
+    }
+    const p2d = points2D;
+    for (let i = 0; i < p2d.length; i++) {
+      const prev = p2d[(i - 1 + p2d.length) % p2d.length];
+      const curr = p2d[i];
+      const next = p2d[(i + 1) % p2d.length];
+      const v1x = prev.x - curr.x;
+      const v1y = prev.y - curr.y;
+      const v2x = next.x - curr.x;
+      const v2y = next.y - curr.y;
+      const len1 = Math.sqrt(v1x * v1x + v1y * v1y);
+      const len2 = Math.sqrt(v2x * v2x + v2y * v2y);
+      if (!len1 || !len2) continue;
+      const dot = (v1x / len1) * (v2x / len2) + (v1y / len1) * (v2y / len2);
+      const ang = Math.acos(Math.min(1, Math.max(-1, dot))) * (180 / Math.PI);
+      const pc = Cesium.Cartographic.fromCartesian(posList[i]);
+      const aid = record.id + `_area_angle_${i}`;
+      this.angleLabelIds.push(aid);
+      this.htmlLabelPool.add({ text: `${t.angle}:${ang.toFixed(2)} °` }, { id: aid, lon: Cesium.Math.toDegrees(pc.longitude), lat: Cesium.Math.toDegrees(pc.latitude), height: pc.height || 0, theme: 'measure-area-angle', show: true });
+    }
+  }
+}