leiting-bim 2.1.48 → 2.1.52

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

@@ -1,516 +0,0 @@
-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 secondPoint: any = null;
-  private currentCorners: any[] = [];
-  private edgeEntities: any[] = [];
-  private pointEntities: any[] = [];
-  private previewEdgeEntity: any = null;
-  private previewPointEntities: any[] = [];
-  private entity: any = null;
-  private labelEntity: any = null;
-  private primitive: any = null;
-  private previewEntity: 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;
-        return;
-      }
-      if (!this.secondPoint) {
-        this.secondPoint = pos;
-        this.endPoint = pos;
-        return;
-      }
-      const thirdPoint = pos;
-      const rect = this.computeRectangle(this.startPoint, this.secondPoint, thirdPoint);
-      if (!rect) {
-        this.stop();
-        return;
-      }
-      this.stop();
-      const { corners, center, width, height, area } = rect;
-      if (this.previewEntity) {
-        viewer.entities.remove(this.previewEntity);
-        this.previewEntity = 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 id = this.htmlLabelId || `measure_rectangle_${Date.now()}`;
-      this.htmlLabelId = id;
-      const mc = Cesium.Cartographic.fromCartesian(center);
-      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}:${width.toFixed(2)} m\n${t.heightLabel}:${height.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 edges = [
-        [corners[0], corners[1]],
-        [corners[1], corners[2]],
-        [corners[2], corners[3]],
-        [corners[3], corners[0]],
-      ];
-      for (let i = 0; i < edges.length; i++) {
-        const [p1, p2] = edges[i];
-        const d = i === 0 || i === 2 ? width : height;
-        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,
-          },
-        );
-      }
-      const surfacePositions = this.buildSurfaceRectanglePositions(corners);
-      const hierarchy = new Cesium.PolygonHierarchy(surfacePositions);
-      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 || options.color || Cesium.Color.YELLOW;
-      const dashColor =
-        (options.dashLineColor || options.lineColor || options.color || Cesium.Color.RED).withAlpha?.(0.9) ||
-        Cesium.Color.RED;
-      const polylinePositions = [...surfacePositions, surfacePositions[0]];
-      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 || options.color || Cesium.Color.YELLOW;
-      for (const corner of corners) {
-        const pointEntity = viewer.entities.add({
-          position: corner,
-          point: {
-            pixelSize: 8,
-            color: pointColor,
-            disableDepthTestDistance: Number.POSITIVE_INFINITY,
-          },
-        });
-        this.pointEntities.push(pointEntity);
-      }
-      const result = {
-        entity: this.primitive,
-        label: this.labelEntity,
-        positions: [this.startPoint, this.secondPoint, thirdPoint],
-        width,
-        height,
-        area,
-        clear: () => this.clear(),
-      };
-      options.onComplete?.(result);
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
-    this.handler.setInputAction((movement: any) => {
-      const pos = viewer.scene.pickPosition(movement.endPosition);
-      if (!pos) return;
-      if (this.startPoint && !this.secondPoint) {
-        this.endPoint = pos;
-        if (!this.previewEdgeEntity) {
-          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;
-          this.previewEdgeEntity = viewer.entities.add({
-            polyline: {
-              positions: new Cesium.CallbackProperty(() => {
-                if (!this.startPoint || !this.endPoint) return [];
-                return [this.startPoint, this.endPoint];
-              }, false),
-              width: options.width || 2,
-              material: solidColor,
-              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: this.startPoint,
-            point: {
-              pixelSize: 8,
-              color: pointColor,
-              disableDepthTestDistance: Number.POSITIVE_INFINITY,
-            },
-          });
-          const hoverPoint = viewer.entities.add({
-            position: new Cesium.CallbackProperty(() => this.endPoint || this.startPoint, false),
-            point: {
-              pixelSize: 8,
-              color: pointColor,
-              disableDepthTestDistance: Number.POSITIVE_INFINITY,
-            },
-          });
-          this.previewPointEntities.push(basePoint, hoverPoint);
-        }
-        return;
-      }
-      if (!this.startPoint || !this.secondPoint) return;
-      const rect = this.computeRectangle(this.startPoint, this.secondPoint, pos);
-      if (!rect) return;
-      const { corners, center, width, height, area } = rect;
-      const surfacePositions = this.buildSurfaceRectanglePositions(corners);
-      this.currentCorners = surfacePositions;
-      const mc = Cesium.Cartographic.fromCartesian(center);
-      const pid = this.previewLabelId || 'measure_rectangle_preview';
-      this.previewLabelId = pid;
-      const tPrev = options.labelText || { width: '宽', heightLabel: '高', area: '面积' };
-      this.htmlLabelPool.add(
-        { text: `${tPrev.width}:${width.toFixed(2)} m\n${tPrev.heightLabel}:${height.toFixed(2)} m\n${tPrev.area}:${area.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,
-        },
-      );
-      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.startPoint || !this.secondPoint || !this.currentCorners.length) return undefined;
-              return new Cesium.PolygonHierarchy(this.currentCorners);
-            }, false),
-            material: color,
-            perPositionHeight: true,
-            arcType: Cesium.ArcType.NONE,
-          },
-        });
-      }
-    }, 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.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.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;
-    this.secondPoint = null;
-    this.currentCorners = [];
-  }
-
-  private buildSurfaceRectanglePositions(corners: any[]) {
-    if (!corners || !corners.length) return [];
-    return corners.slice();
-  }
-
-  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-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 rect = this.computeRectangle(posList[0], posList[1], posList[2]);
-    if (!rect) return;
-    const corners = rect.corners;
-    const center = rect.center;
-    const width = rect.width;
-    const height = rect.height;
-    const area = rect.area;
-    const mc = Cesium.Cartographic.fromCartesian(center);
-    const id = record.id + '_rectangle';
-    const t = opts.labelText || { width: '宽', heightLabel: '高', area: '面积', side: '边长' };
-    this.htmlLabelId = id;
-    this.htmlLabelPool.add({ text: `${t.width}:${width.toFixed(2)} m\n${t.heightLabel}:${height.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 edges: any[] = [
-      [corners[0], corners[1]],
-      [corners[1], corners[2]],
-      [corners[2], corners[3]],
-      [corners[3], corners[0]],
-    ];
-    for (let i = 0; i < edges.length; i++) {
-      const [ep1, ep2] = edges[i];
-      const d = i === 0 || i === 2 ? width : height;
-      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(corners);
-    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 = 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);
-
-    const lineColor = opts.lineColor || color;
-    const polylinePositions = [...corners, corners[0]];
-    const lineEntity = viewer.entities.add({
-      polyline: {
-        positions: polylinePositions,
-        width: opts.width || 2,
-        material: lineColor,
-        clampToGround: false,
-        arcType: Cesium.ArcType.NONE,
-      },
-    });
-    this.edgeEntities.push(lineEntity);
-    const pointColor = opts.pointColor || color;
-    for (const corner of corners) {
-      const pointEntity = viewer.entities.add({
-        position: corner,
-        point: {
-          pixelSize: 8,
-          color: pointColor,
-          disableDepthTestDistance: Number.POSITIVE_INFINITY,
-        },
-      });
-      this.pointEntities.push(pointEntity);
-    }
-  }
-
-  private computeRectangle(p1: any, p2: any, p3: any) {
-    const Cesium = this.Cesium;
-    const plane = new Cesium.EllipsoidTangentPlane(p1, Cesium.Ellipsoid.WGS84);
-    const pts2d = plane.projectPointsOntoPlane([p1, p2, p3]);
-    if (!pts2d || pts2d.length < 3) return null;
-    const a = pts2d[0];
-    const b = pts2d[1];
-    const c = pts2d[2];
-    const vx = b.x - a.x;
-    const vy = b.y - a.y;
-    const baseLen = Math.sqrt(vx * vx + vy * vy);
-    if (!baseLen) return null;
-    const ux = vx / baseLen;
-    const uy = vy / baseLen;
-    const nx = -uy;
-    const ny = ux;
-    const wx = c.x - b.x;
-    const wy = c.y - b.y;
-    const s = wx * nx + wy * ny;
-    if (!s) return null;
-    const c2 = new Cesium.Cartesian2(b.x + nx * s, b.y + ny * s);
-    const d2 = new Cesium.Cartesian2(a.x + nx * s, a.y + ny * s);
-    const worldPoints = plane.projectPointsOntoEllipsoid([a, b, c2, d2]);
-    if (!worldPoints || worldPoints.length < 4) return null;
-    const corners = worldPoints;
-    const p0 = corners[0];
-    const p2w = corners[2];
-    const width = Math.abs(baseLen);
-    const height = Math.abs(s);
-    const center = new Cesium.Cartesian3(
-      (p0.x + p2w.x) / 2,
-      (p0.y + p2w.y) / 2,
-      (p0.z + p2w.z) / 2,
-    );
-    const planeCenter = new Cesium.EllipsoidTangentPlane(center, Cesium.Ellipsoid.WGS84);
-    const rect2d = planeCenter.projectPointsOntoPlane(corners);
-    let area2D = 0;
-    for (let i = 0; i < rect2d.length; i++) {
-      const j = (i + 1) % rect2d.length;
-      area2D += rect2d[i].x * rect2d[j].y - rect2d[j].x * rect2d[i].y;
-    }
-    const area = Math.abs(area2D) / 2;
-    return { corners, center, width, height, area };
-  }
-}