leiting-bim 2.1.35 → 2.1.37

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

@@ -0,0 +1,388 @@
+import { IMeasure, MeasurementOptions, MeasurementRecord } from '../types';
+import { HtmlOverlayLabelPool } from '../../HtmlOverlayLabelPool';
+
+export default class RectangleMeasure implements IMeasure {
+  private Cesium: any;
+  private viewer: any;
+  private handler: any = null;
+  private startPoint: any = null;
+  private endPoint: any = null;
+  private entity: any = null;
+  private labelEntity: any = null;
+  private primitive: any = null;
+  private previewPrimitive: any = null;
+  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;
+    if (!this.htmlLabelPool) {
+      const containerId = options.overlayContainerId || 'html-label-container';
+      this.htmlLabelPool = new HtmlOverlayLabelPool(Cesium, viewer, containerId);
+      this.htmlLabelPool.registerTheme('measure-rectangle', {
+        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-rectangle-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;
+      if (!this.startPoint) {
+        this.startPoint = pos;
+      } else {
+        this.endPoint = pos;
+        this.stop();
+        const c1 = Cesium.Cartographic.fromCartesian(this.startPoint);
+        const c2 = Cesium.Cartographic.fromCartesian(this.endPoint);
+        const west = Math.min(c1.longitude, c2.longitude);
+        const east = Math.max(c1.longitude, c2.longitude);
+        const south = Math.min(c1.latitude, c2.latitude);
+        const north = Math.max(c1.latitude, c2.latitude);
+        const southWest = new Cesium.Cartographic(west, south, 0);
+        const southEast = new Cesium.Cartographic(east, south, 0);
+        const northWest = new Cesium.Cartographic(west, north, 0);
+        const geodesicWidth = new Cesium.EllipsoidGeodesic(southWest, southEast).surfaceDistance;
+        const geodesicHeight = new Cesium.EllipsoidGeodesic(southWest, northWest).surfaceDistance;
+        const area = geodesicWidth * geodesicHeight;
+        const midPos = new Cesium.Cartesian3(
+          (this.startPoint.x + this.endPoint.x) / 2,
+          (this.startPoint.y + this.endPoint.y) / 2,
+          (this.startPoint.z + this.endPoint.z) / 2,
+        );
+        const mc = Cesium.Cartographic.fromCartesian(midPos);
+        const h = mc.height || 0;
+        const id = this.htmlLabelId || `measure_rectangle_${Date.now()}`;
+        this.htmlLabelId = id;
+        const t = options.labelText || { width: '宽', heightLabel: '高', area: '面积', side: '边长' };
+        if (this.previewLabelId && this.htmlLabelPool) {
+          this.htmlLabelPool.removeByIds([this.previewLabelId]);
+          this.previewLabelId = null;
+        }
+        this.htmlLabelPool.add(
+          { text: `${t.width}:${geodesicWidth.toFixed(2)} m\n${t.heightLabel}:${geodesicHeight.toFixed(2)} m\n${t.area}:${area.toFixed(2)} m²` },
+          {
+            id,
+            lon: Cesium.Math.toDegrees(mc.longitude),
+            lat: Cesium.Math.toDegrees(mc.latitude),
+            height: mc.height || 0,
+            theme: 'measure-rectangle',
+            show: true,
+          },
+        );
+        const sw = new Cesium.Cartographic(west, south, h);
+        const se = new Cesium.Cartographic(east, south, h);
+        const nw = new Cesium.Cartographic(west, north, h);
+        const ne = new Cesium.Cartographic(east, north, h);
+        const csw = Cesium.Ellipsoid.WGS84.cartographicToCartesian(sw);
+        const cse = Cesium.Ellipsoid.WGS84.cartographicToCartesian(se);
+        const cnw = Cesium.Ellipsoid.WGS84.cartographicToCartesian(nw);
+        const cne = Cesium.Ellipsoid.WGS84.cartographicToCartesian(ne);
+        const edges = [
+          [csw, cse, geodesicWidth],
+          [cse, cne, geodesicHeight],
+          [cne, cnw, geodesicWidth],
+          [cnw, csw, geodesicHeight],
+        ];
+        for (let i = 0; i < edges.length; i++) {
+          const [p1, p2, d] = edges[i];
+          const mid = new Cesium.Cartesian3((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, (p1.z + p2.z) / 2);
+          const mc2 = Cesium.Cartographic.fromCartesian(mid);
+          const sid = `measure_rectangle_seg_${Date.now()}_${i}`;
+          this.segmentLabelIds.push(sid);
+          this.htmlLabelPool.add(
+            { text: `${t.side}:${Number(d).toFixed(2)} m` },
+            {
+              id: sid,
+              lon: Cesium.Math.toDegrees(mc2.longitude),
+              lat: Cesium.Math.toDegrees(mc2.latitude),
+              height: mc2.height || 0,
+              theme: 'measure-rectangle-seg',
+              show: true,
+            },
+          );
+        }
+        if (this.previewPrimitive) {
+          viewer.scene.primitives.remove(this.previewPrimitive);
+          this.previewPrimitive = null;
+        }
+        if (this.primitive) {
+          viewer.scene.primitives.remove(this.primitive);
+          this.primitive = null;
+        }
+        if (this.entity) {
+          viewer.entities.remove(this.entity);
+          this.entity = null;
+        }
+        const hierarchy = new Cesium.PolygonHierarchy([csw, cse, cne, cnw]);
+        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);
+        const result = {
+          entity: this.primitive,
+          label: this.labelEntity,
+          positions: [this.startPoint, this.endPoint],
+          width: geodesicWidth,
+          height: geodesicHeight,
+          area,
+          clear: () => this.clear(),
+        };
+        options.onComplete?.(result);
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    this.handler.setInputAction((movement: any) => {
+      if (!this.startPoint) return;
+      const pos = viewer.scene.pickPosition(movement.endPosition);
+      if (!pos) return;
+      this.endPoint = pos;
+      const c1 = Cesium.Cartographic.fromCartesian(this.startPoint);
+      const c2 = Cesium.Cartographic.fromCartesian(this.endPoint);
+      const west = Math.min(c1.longitude, c2.longitude);
+      const east = Math.max(c1.longitude, c2.longitude);
+      const south = Math.min(c1.latitude, c2.latitude);
+      const north = Math.max(c1.latitude, c2.latitude);
+      const southWest = new Cesium.Cartographic(west, south, 0);
+      const southEast = new Cesium.Cartographic(east, south, 0);
+      const northWest = new Cesium.Cartographic(west, north, 0);
+      const geodesicWidth = new Cesium.EllipsoidGeodesic(southWest, southEast).surfaceDistance;
+      const geodesicHeight = new Cesium.EllipsoidGeodesic(southWest, northWest).surfaceDistance;
+      const areaEst = geodesicWidth * geodesicHeight;
+      const midPos = new Cesium.Cartesian3(
+        (this.startPoint.x + this.endPoint.x) / 2,
+        (this.startPoint.y + this.endPoint.y) / 2,
+        (this.startPoint.z + this.endPoint.z) / 2,
+      );
+      const mc = Cesium.Cartographic.fromCartesian(midPos);
+      const h = mc.height || 0;
+      const pid = this.previewLabelId || 'measure_rectangle_preview';
+      this.previewLabelId = pid;
+      const tPrev = options.labelText || { width: '宽', heightLabel: '高', area: '面积' };
+      this.htmlLabelPool.add(
+        { text: `${tPrev.width}:${geodesicWidth.toFixed(2)} m\n${tPrev.heightLabel}:${geodesicHeight.toFixed(2)} m\n${tPrev.area}:${areaEst.toFixed(2)} m²` },
+        {
+          id: pid,
+          lon: Cesium.Math.toDegrees(mc.longitude),
+          lat: Cesium.Math.toDegrees(mc.latitude),
+          height: mc.height || 0,
+          theme: 'measure-rectangle',
+          show: true,
+        },
+      );
+      const sw = new Cesium.Cartographic(west, south, h);
+      const se = new Cesium.Cartographic(east, south, h);
+      const nw = new Cesium.Cartographic(west, north, h);
+      const ne = new Cesium.Cartographic(east, north, h);
+      const csw = Cesium.Ellipsoid.WGS84.cartographicToCartesian(sw);
+      const cse = Cesium.Ellipsoid.WGS84.cartographicToCartesian(se);
+      const cnw = Cesium.Ellipsoid.WGS84.cartographicToCartesian(nw);
+      const cne = Cesium.Ellipsoid.WGS84.cartographicToCartesian(ne);
+      if (this.previewPrimitive) {
+        viewer.scene.primitives.remove(this.previewPrimitive);
+        this.previewPrimitive = null;
+      }
+      const hierarchy = new Cesium.PolygonHierarchy([csw, cse, cne, cnw]);
+      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);
+  }
+
+  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.previewPrimitive) {
+      this.viewer.scene.primitives.remove(this.previewPrimitive);
+      this.previewPrimitive = null;
+    }
+    if (this.primitive) {
+      this.viewer.scene.primitives.remove(this.primitive);
+      this.primitive = null;
+    }
+    if (this.htmlLabelId && this.htmlLabelPool) {
+      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.startPoint = null;
+    this.endPoint = null;
+  }
+
+  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 < 2) return;
+    if (!this.htmlLabelPool) {
+      const containerId = opts.overlayContainerId || 'html-label-container';
+      this.htmlLabelPool = htmlLabelPool || new HtmlOverlayLabelPool(Cesium, viewer, containerId);
+      this.htmlLabelPool.registerTheme('measure-rectangle', {
+        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-rectangle-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 } },
+      });
+    }
+    const p1 = posList[0];
+    const p2 = posList[1];
+    const c1 = Cesium.Cartographic.fromCartesian(p1);
+    const c2 = Cesium.Cartographic.fromCartesian(p2);
+    const west = Math.min(c1.longitude, c2.longitude);
+    const east = Math.max(c1.longitude, c2.longitude);
+    const south = Math.min(c1.latitude, c2.latitude);
+    const north = Math.max(c1.latitude, c2.latitude);
+    const southWest = new Cesium.Cartographic(west, south, 0);
+    const southEast = new Cesium.Cartographic(east, south, 0);
+    const northWest = new Cesium.Cartographic(west, north, 0);
+    const geodesicWidth = new Cesium.EllipsoidGeodesic(southWest, southEast).surfaceDistance;
+    const geodesicHeight = new Cesium.EllipsoidGeodesic(southWest, northWest).surfaceDistance;
+    const area = geodesicWidth * geodesicHeight;
+    const midPos = new Cesium.Cartesian3((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, (p1.z + p2.z) / 2);
+    const mc = Cesium.Cartographic.fromCartesian(midPos);
+    const id = record.id + '_rectangle';
+    const t = opts.labelText || { width: '宽', heightLabel: '高', area: '面积', side: '边长' };
+    this.htmlLabelId = id;
+    this.htmlLabelPool.add({ text: `${t.width}:${geodesicWidth.toFixed(2)} m\n${t.heightLabel}:${geodesicHeight.toFixed(2)} m\n${t.area}:${area.toFixed(2)} m²` }, { id, lon: Cesium.Math.toDegrees(mc.longitude), lat: Cesium.Math.toDegrees(mc.latitude), height: mc.height || 0, theme: 'measure-rectangle', show: true });
+    const h = mc.height || 0;
+    const sw = new Cesium.Cartographic(west, south, h);
+    const se = new Cesium.Cartographic(east, south, h);
+    const nw = new Cesium.Cartographic(west, north, h);
+    const ne = new Cesium.Cartographic(east, north, h);
+    const csw = Cesium.Ellipsoid.WGS84.cartographicToCartesian(sw);
+    const cse = Cesium.Ellipsoid.WGS84.cartographicToCartesian(se);
+    const cnw = Cesium.Ellipsoid.WGS84.cartographicToCartesian(nw);
+    const cne = Cesium.Ellipsoid.WGS84.cartographicToCartesian(ne);
+    const edges: any[] = [
+      [csw, cse, geodesicWidth],
+      [cse, cne, geodesicHeight],
+      [cne, cnw, geodesicWidth],
+      [cnw, csw, geodesicHeight],
+    ];
+    for (let i = 0; i < edges.length; i++) {
+      const [ep1, ep2, d] = edges[i];
+      const mid = new Cesium.Cartesian3((ep1.x + ep2.x) / 2, (ep1.y + ep2.y) / 2, (ep1.z + ep2.z) / 2);
+      const mc2 = Cesium.Cartographic.fromCartesian(mid);
+      const sid = record.id + `_rectangle_seg_${i}`;
+      this.segmentLabelIds.push(sid);
+      this.htmlLabelPool.add({ text: `${t.side}:${Number(d).toFixed(2)} m` }, { id: sid, lon: Cesium.Math.toDegrees(mc2.longitude), lat: Cesium.Math.toDegrees(mc2.latitude), height: mc2.height || 0, theme: 'measure-rectangle-seg', show: true });
+    }
+    const hierarchy = new Cesium.PolygonHierarchy([csw, cse, cne, cnw]);
+    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 }),
+    });
+    this.primitive = primitive;
+    viewer.scene.primitives.add(this.primitive);
+  }
+}