leiting-bim 2.1.35 → 2.1.37

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

@@ -0,0 +1,289 @@
+import { IMeasure, MeasurementOptions, MeasurementRecord } from '../types';
+import { HtmlOverlayLabelPool } from '../../HtmlOverlayLabelPool';
+
+export default class CircleMeasure implements IMeasure {
+  private Cesium: any;
+  private viewer: any;
+  private handler: any = null;
+  private entity: any = null;
+  private positions: any[] = [];
+  private currentRadius: number = 0;
+  private labelEntity: any = null;
+  private previewLabel: any = null;
+  private ellipsePrimitive: any = null;
+  private previewEntity: any = null;
+  private isPrimitive: boolean = false;
+  private htmlLabelPool: any = null;
+  private htmlLabelId: 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-circle', {
+        createElement: (el: HTMLDivElement, ctx: any) => {
+          const text = ctx?.data?.text || '';
+          el.innerHTML = String(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 area = Math.PI * radius * radius;
+        const perimeter = 2 * Math.PI * radius;
+        const t = options.labelText || { radius: '半径', area: '面积', circumference: '周长' };
+        const centerLabelPos = center;
+        if (!this.labelEntity) {
+          this.labelEntity = viewer.entities.add({
+            position: centerLabelPos,
+            label: {
+              text: `${t.radius}:${radius.toFixed(2)} m\n${t.area}:${area.toFixed(2)} m²\n${t.circumference}:${perimeter.toFixed(2)} m`,
+              font: '14px sans-serif',
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+              pixelOffset: new Cesium.Cartesian2(0, -10),
+              disableDepthTestDistance: Number.POSITIVE_INFINITY,
+              eyeOffset: new Cesium.Cartesian3(0, 0, -1000),
+              showBackground: true,
+              backgroundColor: Cesium.Color.BLACK.withAlpha(0.6),
+              show: false,
+            },
+          });
+        } else {
+          this.labelEntity.position = centerLabelPos;
+          this.labelEntity.label.text = `${t.radius}:${radius.toFixed(2)} m\n${t.area}:${area.toFixed(2)} m²\n${t.circumference}:${perimeter.toFixed(2)} m`;
+        }
+          if (this.previewEntity) {
+            viewer.entities.remove(this.previewEntity);
+            this.previewEntity = null;
+          }
+          const cartoCenter = Cesium.Cartographic.fromCartesian(center);
+          const geom = new Cesium.EllipseGeometry({
+            center,
+            semiMajorAxis: radius,
+            semiMinorAxis: radius,
+            height: cartoCenter.height || 0,
+            vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT,
+          });
+          const instance = new Cesium.GeometryInstance({ geometry: geom });
+          const color = options.color || Cesium.Color.YELLOW.withAlpha(0.5);
+          const occludedColor = (options.color && options.color.withAlpha)
+            ? options.color.withAlpha(0.25)
+            : Cesium.Color.RED.withAlpha(0.4);
+          if (this.ellipsePrimitive) {
+            viewer.scene.primitives.remove(this.ellipsePrimitive);
+            this.ellipsePrimitive = null;
+          }
+          this.ellipsePrimitive = 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.ellipsePrimitive);
+          this.entity = this.ellipsePrimitive;
+          this.isPrimitive = true;
+        const c = Cesium.Cartographic.fromCartesian(center);
+        const lng = Cesium.Math.toDegrees(c.longitude);
+        const lat = Cesium.Math.toDegrees(c.latitude);
+        const h = c.height || 0;
+        const id = this.htmlLabelId || `measure_circle_${Date.now()}`;
+        this.htmlLabelId = id;
+        const text = `${t.radius}:${radius.toFixed(2)} m\n${t.area}:${area.toFixed(2)} m²\n${t.circumference}:${perimeter.toFixed(2)} m`;
+        this.htmlLabelPool.add({ text }, { id, lon: lng, lat, height: h, theme: 'measure-circle', show: true });
+        const result = {
+          entity: this.entity,
+          label: this.labelEntity,
+          positions: this.positions,
+          radius,
+          area,
+          perimeter,
+          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.currentRadius = radius;
+      const cartoCenter = Cesium.Cartographic.fromCartesian(center);
+      const area = Math.PI * radius * radius;
+      const perimeter = 2 * Math.PI * radius;
+      const t = options.labelText || { radius: '半径', area: '面积', circumference: '周长' };
+      const centerLabelPos = center;
+      if (!this.labelEntity) {
+        this.labelEntity = viewer.entities.add({
+          position: centerLabelPos,
+          label: {
+            text: `${t.radius}:${radius.toFixed(2)} m\n${t.area}:${area.toFixed(2)} m²\n${t.circumference}:${perimeter.toFixed(2)} m`,
+            font: '14px sans-serif',
+            fillColor: Cesium.Color.WHITE,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            pixelOffset: new Cesium.Cartesian2(0, -10),
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+            eyeOffset: new Cesium.Cartesian3(0, 0, -1000),
+            showBackground: true,
+            backgroundColor: Cesium.Color.BLACK.withAlpha(0.6),
+            show: false,
+          },
+        });
+      } else {
+        this.labelEntity.position = centerLabelPos;
+        this.labelEntity.label.text = `${t.radius}:${radius.toFixed(2)} m\n${t.area}:${area.toFixed(2)} m²\n${t.circumference}:${perimeter.toFixed(2)} m`;
+      }
+      const c = Cesium.Cartographic.fromCartesian(center);
+      const lng = Cesium.Math.toDegrees(c.longitude);
+      const lat = Cesium.Math.toDegrees(c.latitude);
+      const h = c.height || 0;
+      const id = this.htmlLabelId || `measure_circle_${Date.now()}`;
+      this.htmlLabelId = id;
+      const text = `${t.radius}:${radius.toFixed(2)} m\n${t.area}:${area.toFixed(2)} m²\n${t.circumference}:${perimeter.toFixed(2)} m`;
+      this.htmlLabelPool.add({ text }, { id, lon: lng, lat, height: h, theme: 'measure-circle', show: true });
+      if (!this.previewEntity) {
+        const color = options.color || Cesium.Color.YELLOW.withAlpha(0.5);
+        this.previewEntity = viewer.entities.add({
+          position: center,
+          ellipse: {
+            semiMajorAxis: new Cesium.CallbackProperty(() => this.currentRadius, false),
+            semiMinorAxis: new Cesium.CallbackProperty(() => this.currentRadius, false),
+            height: cartoCenter.height || 0,
+            material: color,
+          },
+        });
+      }
+    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  }
+
+  stop() {
+    if (this.handler) {
+      this.handler.destroy();
+      this.handler = null;
+    }
+  }
+
+  clear() {
+    this.stop();
+    if (this.entity) {
+      if (this.isPrimitive) {
+        this.viewer.scene.primitives.remove(this.entity);
+      } else {
+        this.viewer.entities.remove(this.entity);
+      }
+      this.entity = null;
+      this.isPrimitive = false;
+    }
+    if (this.previewEntity) {
+      this.viewer.entities.remove(this.previewEntity);
+      this.previewEntity = null;
+    }
+    if (this.labelEntity) {
+      this.viewer.entities.remove(this.labelEntity);
+      this.labelEntity = null;
+    }
+    if (this.previewLabel) {
+      this.viewer.entities.remove(this.previewLabel);
+      this.previewLabel = null;
+    }
+    if (this.ellipsePrimitive) {
+      this.viewer.scene.primitives.remove(this.ellipsePrimitive);
+      this.ellipsePrimitive = null;
+    }
+    if (this.htmlLabelPool && this.htmlLabelId) {
+      this.htmlLabelPool.removeByIds([this.htmlLabelId]);
+      this.htmlLabelId = null;
+    }
+    this.positions = [];
+    this.currentRadius = 0;
+  }
+
+  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-circle', {
+        createElement: (el: HTMLDivElement, ctx: any) => {
+          const text = ctx?.data?.text || '';
+          el.innerHTML = String(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 center = posList[0];
+    const edge = posList[1];
+    const radius = Cesium.Cartesian3.distance(center, edge);
+    const area = Math.PI * radius * radius;
+    const perimeter = 2 * Math.PI * radius;
+    const cartoCenter = Cesium.Cartographic.fromCartesian(center);
+    const geom = new Cesium.EllipseGeometry({ center, semiMajorAxis: radius, semiMinorAxis: radius, height: cartoCenter.height || 0, vertexFormat: Cesium.MaterialAppearance.VERTEX_FORMAT });
+    const instance = new Cesium.GeometryInstance({ geometry: geom });
+    const color = opts.color || Cesium.Color.YELLOW.withAlpha(0.5);
+    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.ellipsePrimitive = primitive;
+    this.entity = primitive;
+    this.isPrimitive = true;
+    const c = Cesium.Cartographic.fromCartesian(center);
+    const id = record.id + '_circle';
+    this.htmlLabelId = id;
+    const t = opts.labelText || { radius: '半径', area: '面积', circumference: '周长' };
+    const text = `${t.radius}:${radius.toFixed(2)} m\n${t.area}:${area.toFixed(2)} m²\n${t.circumference}:${perimeter.toFixed(2)} m`;
+    this.htmlLabelPool.add({ text }, { id, lon: Cesium.Math.toDegrees(c.longitude), lat: Cesium.Math.toDegrees(c.latitude), height: c.height || 0, theme: 'measure-circle', show: true });
+  }
+}

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

@@ -0,0 +1,139 @@
+import { IMeasure, MeasurementOptions, MeasurementRecord } from '../types';
+import { HtmlOverlayLabelPool } from '../../HtmlOverlayLabelPool';
+
+export default class CoordinateMeasure implements IMeasure {
+  private Cesium: any;
+  private viewer: any;
+  private handler: any = null;
+  private entity: any = null;
+  private labelEntity: any = null;
+  private htmlLabelPool: any = null;
+  private htmlLabelId: 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-coordinate', {
+        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 position = viewer.scene.pickPosition(movement.position);
+      if (!position) return;
+      const carto = Cesium.Cartographic.fromCartesian(position);
+      const lng = Cesium.Math.toDegrees(carto.longitude);
+      const lat = Cesium.Math.toDegrees(carto.latitude);
+      const h = carto.height || 0;
+      this.entity = viewer.entities.add({
+        position,
+        point: {
+          pixelSize: 10,
+          color: options.color || Cesium.Color.YELLOW,
+          disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        },
+      });
+      const id = this.htmlLabelId || `measure_coordinate_${Date.now()}`;
+      this.htmlLabelId = id;
+      const t = options.labelText || { lng: '经', lat: '纬', height: '高' };
+      this.htmlLabelPool.add(
+        { text: `${t.lng}:${lng.toFixed(6)}\n${t.lat}:${lat.toFixed(6)}\n${t.height}:${h.toFixed(2)} m` },
+        {
+          id,
+          lon: lng,
+          lat,
+          height: h,
+          theme: 'measure-coordinate',
+          show: true,
+        },
+      );
+      this.labelEntity = this.htmlLabelId;
+      const result = {
+        entity: this.entity,
+        label: this.labelEntity,
+        lnglat: { lng, lat, height: h },
+        clear: () => this.clear(),
+      };
+      options.onComplete?.(result);
+      this.stop();
+    }, Cesium.ScreenSpaceEventType.LEFT_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.htmlLabelId && this.htmlLabelPool) {
+      this.htmlLabelPool.removeByIds([this.htmlLabelId]);
+      this.htmlLabelId = 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) {
+      const ll = (record.data as any)?.lnglat;
+      if (ll && typeof ll.lng === 'number' && typeof ll.lat === 'number') {
+        const c = Cesium.Cartesian3.fromDegrees(ll.lng, ll.lat, ll.height || 0);
+        posList.push(c);
+      }
+    }
+    if (!posList.length) return;
+    if (!this.htmlLabelPool) {
+      const containerId = opts.overlayContainerId || 'html-label-container';
+      this.htmlLabelPool = htmlLabelPool || new HtmlOverlayLabelPool(Cesium, viewer, containerId);
+      this.htmlLabelPool.registerTheme('measure-coordinate', {
+        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 position = posList[0];
+    const carto = Cesium.Cartographic.fromCartesian(position);
+    const lng = Cesium.Math.toDegrees(carto.longitude);
+    const lat = Cesium.Math.toDegrees(carto.latitude);
+    const h = carto.height || 0;
+    this.entity = viewer.entities.add({ position, point: { pixelSize: 10, color: opts.color || Cesium.Color.YELLOW, disableDepthTestDistance: Number.POSITIVE_INFINITY } });
+    const id = record.id + '_coord';
+    this.htmlLabelId = id;
+    const t = opts.labelText || { lng: '经', lat: '纬', height: '高' };
+    this.htmlLabelPool.add({ text: `${t.lng}:${lng.toFixed(6)}\n${t.lat}:${lat.toFixed(6)}\n${t.height}:${h.toFixed(2)} m` }, { id, lon: lng, lat, height: h, theme: 'measure-coordinate', show: true });
+  }
+}