leiting-bim 2.1.36 → 2.1.39

package/plugins/plugins/cesium-core/src/components/BufferedHierarchicalAggregator.ts

@@ -0,0 +1,546 @@
+import { HtmlOverlayLabelPool } from './HtmlOverlayLabelPool';
+
+interface PointData {
+  id: string;
+  lon: number;
+  lat: number;
+  height: number;
+  name: string;
+  data: {
+    [key: string]: any;
+  };
+  [key: string]: any;
+}
+
+interface GridCell {
+  allPoints: PointData[];
+  groups: Map<string, PointData[]>;
+  skipPoints: PointData[];
+}
+
+interface AggregatorOptions {
+  labelPool: HtmlOverlayLabelPool;
+  threshold?: number;
+  displayLimit?: number;
+  maxLevel?: number;
+  debugCurrentGrids?: boolean;
+  clusterTheme?: string;
+  pointTheme?: string;
+  centralPointMode?: string;
+  minGlobalPointCount?: number;
+  groupByTheme?: boolean;
+}
+
+interface GridLevel {
+  level: number;
+  size: number;
+  minViewWidth: number;
+}
+
+export { PointData, GridLevel, AggregatorOptions };
+
+export class BufferedHierarchicalAggregator {
+  private Cesium: any;
+  private viewer: any;
+  labelPool: HtmlOverlayLabelPool;
+  private threshold: number;
+  private displayLimit: number;
+  private maxLevel: number;
+  private debugCurrentGrids: boolean;
+  private levels: GridLevel[];
+  private points: PointData[] = [];
+  private gridLayers: Map<number, Map<string, GridCell>> = new Map();
+  private debugGrids: any[] = [];
+  private _updateFn: () => void;
+  private clusterTheme: string;
+  private pointTheme: string;
+  private centralPointMode: string;
+  private minGlobalPointCount: number;
+  private groupByTheme: boolean;
+  private tilingScheme: any;
+  private levelIndexByTileLevel: Map<number, number> = new Map();
+  private _updateTimer: number | null = null;
+  private _updateDelay: number = 100;
+  private _tilesRetryCount: number = 0;
+  private _tilesRetryMax: number = 100;
+
+  constructor(Cesium: any, viewer: any, options: AggregatorOptions) {
+    this.Cesium = Cesium;
+    this.viewer = viewer;
+
+    this.labelPool = options.labelPool;
+    this.threshold = options.threshold ?? 10;
+    this.displayLimit = options.displayLimit ?? 100;
+    this.maxLevel = options.maxLevel ?? 5;
+    this.debugCurrentGrids = options.debugCurrentGrids ?? false;
+
+    this.clusterTheme = options.clusterTheme ?? 'cluster-label';
+    this.pointTheme = options.pointTheme ?? 'point-label';
+    this.centralPointMode = options.centralPointMode ?? 'central';
+    this.minGlobalPointCount = options.minGlobalPointCount ?? 0;
+    this.groupByTheme = options.groupByTheme ?? false;
+
+    const globe = this.viewer.scene && this.viewer.scene.globe;
+    const surface = globe && (globe as any)._surface;
+    const provider = surface && (surface as any)._tileProvider;
+    this.tilingScheme =
+      provider?.tilingScheme || new this.Cesium.GeographicTilingScheme();
+    this.levels = this._createLevels();
+    this._buildLevels();
+
+    this._updateFn = this._update.bind(this);
+    this.viewer.camera.changed.addEventListener(this._updateFn);
+  }
+
+  public setGroupByTheme(groupByTheme: boolean, rebuild: boolean = true, update: boolean = true) {
+    if (this.groupByTheme === groupByTheme) {
+      if (update) this._update();
+      return;
+    }
+    this.groupByTheme = groupByTheme;
+    if (rebuild) {
+      this._buildLevels();
+    }
+    if (update) {
+      this._update();
+    }
+  }
+
+  public setMinGlobalPointCount(count: number, update: boolean = true) {
+    this.minGlobalPointCount = count;
+    if (update) {
+      this._update();
+    }
+  }
+
+  public setThreshold(threshold: number, update: boolean = true) {
+    this.threshold = threshold;
+    if (update) {
+      this._update();
+    }
+  }
+
+  public setDebugCurrentGrids(debug: boolean, update: boolean = true) {
+    this.debugCurrentGrids = debug;
+    if (!debug) {
+      this._clearDebugGrids();
+    }
+    if (update) {
+      this._update();
+    }
+  }
+
+  private _createLevels(): GridLevel[] {
+    const levels: GridLevel[] = [];
+    this.levelIndexByTileLevel = new Map();
+
+    const minLevel = 0;
+    const maxLevel = this.maxLevel;
+
+    let index = 0;
+    for (let tileLevel = minLevel; tileLevel <= maxLevel; tileLevel++, index++) {
+      const size = 360 / Math.pow(2, tileLevel);
+      levels.push({
+        level: tileLevel,
+        size,
+        minViewWidth: size * 4,
+      });
+      this.levelIndexByTileLevel.set(tileLevel, index);
+    }
+    return levels;
+  }
+
+  public addPoints(points: PointData[]) {
+    this.points = points;
+    this._buildLevels();
+  }
+
+  public appendPoints(newPoints: PointData[], isUpdate: boolean = true) {
+    for (const pt of newPoints) {
+      this.points.push(pt);
+    }
+    for (const pt of newPoints) {
+      this._addPointToGrid(pt);
+    }
+    if (isUpdate) {
+      this._scheduleUpdate();
+    }
+  }
+
+  private _scheduleUpdate() {
+    if (this._updateTimer !== null) {
+      clearTimeout(this._updateTimer);
+    }
+    this._updateTimer = window.setTimeout(() => {
+      this._update();
+      this._updateTimer = null;
+    }, this._updateDelay);
+  }
+
+  public updatePoint(newData: Partial<PointData>) {
+    const idx = this.points.findIndex((p: PointData) => p.id === newData.id);
+    if (idx === -1) return;
+
+    const oldPt = this.points[idx];
+
+    for (const level of this.levels) {
+      const tileLevel = level.level;
+      const grid = this.gridLayers.get(tileLevel);
+      if (!grid) continue;
+
+      const carto = this.Cesium.Cartographic.fromDegrees(oldPt.lon, oldPt.lat);
+      const tileXY = this.tilingScheme.positionToTileXY(
+        carto,
+        tileLevel,
+        new this.Cesium.Cartesian2(),
+      );
+      if (!tileXY) continue;
+      const key = `${tileXY.x}_${tileXY.y}`;
+      const cell = grid.get(key);
+      if (cell) {
+        // 1. remove from allPoints
+        const iAll = cell.allPoints.findIndex((p: PointData) => p.id === newData.id);
+        if (iAll !== -1) cell.allPoints.splice(iAll, 1);
+
+        // 2. remove from skipPoints or groups
+        if (oldPt.data?.skipAggregation) {
+          const iSkip = cell.skipPoints.findIndex((p: PointData) => p.id === newData.id);
+          if (iSkip !== -1) cell.skipPoints.splice(iSkip, 1);
+        } else {
+          const theme = this.groupByTheme ? oldPt.data?.theme : this.clusterTheme;
+          const group = cell.groups.get(theme);
+          if (group) {
+            const iGroup = group.findIndex((p: PointData) => p.id === newData.id);
+            if (iGroup !== -1) group.splice(iGroup, 1);
+            if (group.length === 0) cell.groups.delete(theme);
+          }
+        }
+      }
+    }
+
+    // 替换数据
+    const updated = { ...oldPt, ...newData };
+    this.points[idx] = updated;
+
+    // 加入新 grid
+    this._addPointToGrid(updated);
+    this._update();
+  }
+
+  public removePointsById(ids: string[]) {
+    const idSet = new Set(ids);
+    this.points = this.points.filter((p: PointData) => !idSet.has(p.id));
+
+    for (const level of this.levels) {
+      const grid = this.gridLayers.get(level.level);
+      if (!grid) continue;
+      for (const [key, cell] of grid.entries()) {
+        // Filter allPoints
+        cell.allPoints = cell.allPoints.filter((p: PointData) => !idSet.has(p.id));
+
+        // Filter skipPoints
+        cell.skipPoints = cell.skipPoints.filter((p: PointData) => !idSet.has(p.id));
+
+        // Filter groups
+        for (const [groupKey, groupPoints] of cell.groups.entries()) {
+          const filteredGroup = groupPoints.filter((p: PointData) => !idSet.has(p.id));
+          if (filteredGroup.length === 0) {
+            cell.groups.delete(groupKey);
+          } else {
+            cell.groups.set(groupKey, filteredGroup);
+          }
+        }
+
+        // Cleanup empty cell if needed (optional)
+        if (cell.allPoints.length === 0) {
+          grid.delete(key);
+        }
+      }
+    }
+    this._update();
+  }
+
+  private _buildLevels() {
+    this.gridLayers.clear();
+    for (const level of this.levels) {
+      this.gridLayers.set(level.level, new Map<string, GridCell>());
+    }
+    for (const pt of this.points) {
+      this._addPointToGrid(pt);
+    }
+  }
+
+  private _addPointToGrid(pt: PointData) {
+    for (const level of this.levels) {
+      const tileLevel = level.level;
+      const grid = this.gridLayers.get(tileLevel);
+      if (!grid) continue;
+
+      const carto = this.Cesium.Cartographic.fromDegrees(pt.lon, pt.lat);
+      const tileXY = this.tilingScheme.positionToTileXY(
+        carto,
+        tileLevel,
+        new this.Cesium.Cartesian2(),
+      );
+      if (!tileXY) continue;
+      const key = `${tileXY.x}_${tileXY.y}`;
+
+      let cell = grid.get(key);
+      if (!cell) {
+        cell = {
+          allPoints: [],
+          groups: new Map(),
+          skipPoints: [],
+        };
+        grid.set(key, cell);
+      }
+
+      cell.allPoints.push(pt);
+
+      if (pt.data?.billboard?.[0]?.skipAggregation) {
+        cell.skipPoints.push(pt);
+      } else {
+        const theme = this.groupByTheme ? pt.data?.billboard?.[0]?.theme : this.clusterTheme;
+        if (!cell.groups.has(theme)) {
+          cell.groups.set(theme, []);
+        }
+        cell.groups.get(theme)!.push(pt);
+      }
+    }
+  }
+
+  private _update() {
+    if (!this.labelPool) return;
+    this.labelPool.reset();
+
+    if (this.debugCurrentGrids) this._clearDebugGrids();
+
+    const effectiveThreshold =
+      this.points.length < this.minGlobalPointCount ? Infinity : this.threshold;
+
+    let labelCount = 0;
+
+    const processCell = (levelIdx: number, lonIdx: number, latIdx: number) => {
+      if (labelCount >= this.displayLimit) return;
+      if (levelIdx < 0) return;
+      // 当超过最大层级时，强制使用最大层级
+      if (levelIdx >= this.levels.length) {
+        levelIdx = this.levels.length - 1;
+      }
+      const level = this.levels[levelIdx];
+      const tileLevel = level.level;
+      const grid = this.gridLayers.get(tileLevel);
+      if (!grid) return;
+      const key = `${lonIdx}_${latIdx}`;
+      const cell = grid.get(key);
+      if (!cell) return;
+
+      const rect = this.tilingScheme.tileXYToRectangle(lonIdx, latIdx, tileLevel);
+      const west = this.Cesium.Math.toDegrees(rect.west);
+      const south = this.Cesium.Math.toDegrees(rect.south);
+      const east = this.Cesium.Math.toDegrees(rect.east);
+      const north = this.Cesium.Math.toDegrees(rect.north);
+      const centerLon = (west + east) / 2;
+      const centerLat = (south + north) / 2;
+
+      for (const p of cell.skipPoints) {
+        if (p.data?.show === false) continue;
+        if (labelCount >= this.displayLimit) break;
+        this.labelPool.add(p.data, {
+          id: `point-${p.id}`,
+          lon: p.lon,
+          lat: p.lat,
+          height: p.height,
+          theme: p.data?.billboard?.[0]?.theme || this.pointTheme,
+          style: p.style,
+        });
+        labelCount++;
+      }
+
+      if (labelCount >= this.displayLimit) {
+        if (this.debugCurrentGrids) {
+          this._drawDebugGrid(west, south, east, north, key);
+        }
+        return;
+      }
+
+      for (const [groupKey, rawGroupPoints] of cell.groups) {
+        const groupPoints = rawGroupPoints.filter((p: PointData) => p.data?.show !== false);
+        if (groupPoints.length === 0) continue;
+
+        let clusterLon = centerLon;
+        let clusterLat = centerLat;
+        if (this.centralPointMode == 'firstPoint') {
+          clusterLon = groupPoints[0]?.lon || 0;
+          clusterLat = groupPoints[0]?.lat || 0;
+        }
+
+        if (groupPoints.length < effectiveThreshold) {
+          for (const p of groupPoints) {
+            if (labelCount >= this.displayLimit) break;
+            this.labelPool.add(p.data, {
+              id: `point-${p.id}`,
+              lon: p.lon,
+              lat: p.lat,
+              height: p.height,
+              theme: p.data?.billboard?.[0]?.theme || this.pointTheme,
+              style: p.style,
+            });
+            labelCount++;
+          }
+        } else {
+          if (labelCount >= this.displayLimit) break;
+          const customClusterTheme = groupPoints[0]?.data?.billboard?.[0]?.theme;
+          const finalTheme = customClusterTheme || this.clusterTheme;
+          const clusterId = this.groupByTheme
+            ? `cluster-${levelIdx}-${lonIdx}-${latIdx}-${groupKey}`
+            : `cluster-${levelIdx}-${lonIdx}-${latIdx}`;
+          this.labelPool.add(
+            {
+              id: clusterId,
+              billboard: groupPoints[0]?.data?.billboard || [],
+              count: groupPoints.length,
+              gridKey: key,
+              points: groupPoints,
+              aggregationGroup: groupKey,
+            },
+            {
+              id: clusterId,
+              lon: clusterLon,
+              lat: clusterLat,
+              theme: finalTheme,
+            },
+          );
+          labelCount++;
+        }
+      }
+
+      if (this.debugCurrentGrids) {
+        const tileLevelForDebug = this.levels[levelIdx].level;
+        this._drawDebugGrid(
+          west,
+          south,
+          east,
+          north,
+          `L:${tileLevelForDebug} X:${lonIdx} Y:${latIdx}`,
+        );
+      }
+    };
+
+    try {
+      const globe = this.viewer.scene && this.viewer.scene.globe;
+      const surface = globe && (globe as any)._surface;
+      let tiles: any[] | undefined;
+      if (surface) {
+        tiles =
+          (surface as any)._tilesToRender || (surface as any)._tilesToRenderByTextureCount;
+      }
+      if (!tiles || tiles.length === 0) {
+        this.labelPool.cleanup();
+        if (this.points.length > 0 && this._tilesRetryCount < this._tilesRetryMax) {
+          this._tilesRetryCount++;
+          this._scheduleUpdate();
+        }
+        return;
+      }
+      this._tilesRetryCount = 0;
+
+      const visited = new Set<string>();
+      for (const t of tiles) {
+        const rect = t.rectangle;
+        const tileLevel = t._level ?? t.level;
+        if (!rect || typeof tileLevel !== 'number') continue;
+
+        const levelIdx = this.levelIndexByTileLevel.get(tileLevel);
+        if (levelIdx === undefined) continue;
+
+        const tileX = (t as any)._x ?? (t as any).x;
+        const tileY = (t as any)._y ?? (t as any).y;
+
+        if (typeof tileX === 'number' && typeof tileY === 'number') {
+          const key = `${tileLevel}_${tileX}_${tileY}`;
+          if (visited.has(key)) continue;
+          visited.add(key);
+          processCell(levelIdx, tileX, tileY);
+          continue;
+        }
+
+        const level = this.levels[levelIdx];
+        const size = level.size;
+        const tileWestDeg = this.Cesium.Math.toDegrees(rect.west);
+        const tileEastDeg = this.Cesium.Math.toDegrees(rect.east);
+        const tileSouthDeg = this.Cesium.Math.toDegrees(rect.south);
+        const tileNorthDeg = this.Cesium.Math.toDegrees(rect.north);
+
+        const westIdx = Math.floor((tileWestDeg - -180) / size);
+        const eastIdx = Math.floor((tileEastDeg - -180) / size);
+        const southIdx = Math.floor((tileSouthDeg - -90) / size);
+        const northIdx = Math.floor((tileNorthDeg - -90) / size);
+
+        for (let lonIdx = westIdx; lonIdx <= eastIdx; lonIdx++) {
+          for (let latIdx = southIdx; latIdx <= northIdx; latIdx++) {
+            const key = `${tileLevel}_${lonIdx}_${latIdx}`;
+            if (visited.has(key)) continue;
+            visited.add(key);
+            processCell(levelIdx, lonIdx, latIdx);
+          }
+        }
+      }
+    } catch (e) {
+      this.labelPool.cleanup();
+      return;
+    }
+    this.labelPool.cleanup();
+  }
+
+  refresh() {
+    this._update();
+  }
+
+  private _drawDebugGrid(
+    west: number,
+    south: number,
+    east: number,
+    north: number,
+    text: string,
+  ) {
+    const rect = this.Cesium.Rectangle.fromDegrees(west, south, east, north);
+    const entity = this.viewer.entities.add({
+      rectangle: {
+        coordinates: rect,
+        material: this.Cesium.Color.YELLOW.withAlpha(0.2),
+        outline: true,
+        outlineColor: this.Cesium.Color.RED,
+        height: 0,
+      },
+      label: {
+        text,
+        font: '14px sans-serif',
+        fillColor: this.Cesium.Color.BLACK,
+        outlineColor: this.Cesium.Color.WHITE,
+        outlineWidth: 2,
+        style: this.Cesium.LabelStyle.FILL_AND_OUTLINE,
+        verticalOrigin: this.Cesium.VerticalOrigin.CENTER,
+        horizontalOrigin: this.Cesium.HorizontalOrigin.CENTER,
+      },
+    });
+    this.debugGrids.push(entity);
+  }
+
+  private _clearDebugGrids() {
+    for (const e of this.debugGrids) {
+      this.viewer.entities.remove(e);
+    }
+    this.debugGrids = [];
+  }
+
+  public destroy() {
+    this.viewer.camera.changed.removeEventListener(this._updateFn);
+    if (this._updateTimer !== null) {
+      clearTimeout(this._updateTimer);
+      this._updateTimer = null;
+    }
+    this.labelPool.reset();
+    this._clearDebugGrids();
+  }
+}