leiting-bim 2.1.36 → 2.1.39

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

@@ -0,0 +1,489 @@
+import { MarkerEventKey, MarkerEventBus } from './MarkerEvent';
+
+/**
+ * 单个标签实例
+ */
+interface LabelInstance {
+  id: string;
+  el: HTMLDivElement;
+  theme: string;
+  data?: any;
+  notCreateElement?: boolean;
+  unload?: any;
+}
+
+/**
+ * 主题配置项
+ */
+interface ThemeOptions {
+  /**
+   * 创建标签 DOM 内容的方法
+   */
+  createElement: (
+    el: HTMLDivElement,
+    context: { id: string; theme: string; data: any },
+    options: ThemeOptions,
+  ) => any;
+
+  /**
+   * 可选配置，如偏移量
+   */
+  options?: {
+    offset?: { x?: number; y?: number };
+  };
+}
+
+/**
+ * 标签添加时的参数
+ */
+interface LabelOptions {
+  id: string;
+  lon: number;
+  lat: number;
+  height?: number;
+  theme: string;
+  show?: boolean;
+  notCreateElement?: boolean;
+  style?: {
+    [key: string]: string;
+  };
+}
+
+export { LabelOptions, LabelInstance, ThemeOptions };
+
+/**
+ * 自定义事件与 DOM 事件的映射
+ */
+export const DOM_EVENT_MAP: Record<MarkerEventKey, keyof HTMLElementEventMap> = {
+  [MarkerEventKey.Click]: 'click',
+  [MarkerEventKey.DoubleClick]: 'dblclick',
+  [MarkerEventKey.RightClick]: 'contextmenu',
+  [MarkerEventKey.MouseEnter]: 'mouseenter',
+  [MarkerEventKey.MouseLeave]: 'mouseleave',
+  [MarkerEventKey.MouseDown]: 'mousedown',
+  [MarkerEventKey.MouseUp]: 'mouseup',
+};
+
+/**
+ * 用于管理 Cesium HTML 标签的池，支持主题渲染、事件分发、动态更新等功能
+ */
+export class HtmlOverlayLabelPool {
+  private viewer: any;
+  private Cesium: any;
+  private container: HTMLDivElement;
+  private labels: Map<string, LabelInstance> = new Map();
+  private activeIds: Set<string> = new Set();
+  private _updateFn: () => void;
+  private themes: Record<string, ThemeOptions> = {};
+  public eventBus: MarkerEventBus;
+  public openWheel = true;
+  /**
+   * 构造函数
+   * @param Cesium Cesium 命名空间
+   * @param viewer Cesium Viewer 实例
+   * @param containerId HTML 容器 ID（默认："html-label-container"）
+   * @param eventBus 可选：自定义事件总线
+   */
+  constructor(
+    Cesium: any,
+    viewer: any,
+    containerId: string = 'html-label-container',
+    eventBus?: MarkerEventBus,
+    openWheel: boolean = true,
+  ) {
+    this.Cesium = Cesium;
+    this.viewer = viewer;
+    this.container = this._createContainer(containerId);
+    this._updateFn = this._update.bind(this);
+    this.viewer.scene.postRender.addEventListener(this._updateFn);
+    this.eventBus = eventBus || new MarkerEventBus();
+    this.openWheel = openWheel;
+  }
+
+  /**
+   * 创建标签容器
+   */
+  private _createContainer(id: string): HTMLDivElement {
+    let container = document.getElementById(id) as HTMLDivElement;
+    if (!container) {
+      container = document.createElement('div');
+      container.id = id;
+      Object.assign(container.style, {
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        pointerEvents: 'none',
+        width: '100%',
+        height: '100%',
+        zIndex: '100',
+        overflow: 'hidden',
+      });
+      document.body.appendChild(container);
+    }
+    return container;
+  }
+
+  /**
+   * 注册标签主题
+   */
+  registerTheme(themeName: string, options: ThemeOptions) {
+    this.themes[themeName] = options;
+  }
+
+  /**
+   * 添加单个标签
+   */
+  add(data: any, options: LabelOptions) {
+    const {
+      id,
+      lon,
+      lat,
+      height = 0,
+      theme,
+      show = true,
+      notCreateElement = false,
+      style,
+    } = options;
+
+    const themeOptions = this.themes[theme];
+    if (!themeOptions) {
+      console.warn(`Theme "${theme}" not registered`);
+      return;
+    }
+
+    let label = this.labels.get(id);
+    if (!label) {
+      const el = document.createElement('div');
+      Object.assign(el.style, {
+        position: 'absolute',
+        transform: 'translate(0, 0)',
+        pointerEvents: 'auto',
+        ...(options.style || {}),
+      });
+
+      // 绑定 DOM 事件到事件总线
+      for (const [key, domEvent] of Object.entries(DOM_EVENT_MAP)) {
+        el.addEventListener(domEvent, (e: Event) => {
+          e.stopPropagation();
+          const labelData = this.labels.get(id);
+          this.eventBus.runListener(key as MarkerEventKey, labelData, e);
+        });
+
+        // 滚轮期间禁止点击
+        let lastTime = 0;
+        el.addEventListener('wheel', (event) => {
+          if (!this.openWheel) return;
+          const dom = event.currentTarget as HTMLElement;
+          lastTime = Date.now();
+          const currTime = lastTime;
+          dom.style.pointerEvents = 'none';
+          setTimeout(() => {
+            if (lastTime === currTime) {
+              dom.style.pointerEvents = 'auto';
+            }
+          }, 2000);
+        });
+      }
+
+      let unload = null;
+      if (!notCreateElement || show) {
+        try {
+          unload = themeOptions.createElement(el, { id, theme, data }, themeOptions) || {};
+        } catch (err) {
+          console.error(`Error updating label element for id "${id}":`, err);
+        }
+        this.container.appendChild(el);
+      }
+      label = { id, el, theme, data, notCreateElement, unload: unload };
+      this.labels.set(id, label);
+    } else {
+      label.theme = theme;
+      label.data = data;
+      label.notCreateElement = notCreateElement;
+
+      // 若已存在，则更新 DOM 内容
+      try {
+        label.unload = themeOptions.createElement(label.el, { id, theme, data }, themeOptions);
+        if (!notCreateElement || show) {
+          this.container.appendChild(label.el);
+        }
+      } catch (err) {
+        console.error(`Error updating label element for id "${id}":`, err);
+      }
+    }
+
+    // 存储坐标用于后续位置更新
+    label.el.dataset.lon = String(lon);
+    label.el.dataset.lat = String(lat);
+    label.el.dataset.height = String(height);
+
+    label.el.style.zIndex = style?.zIndex || '1';
+    label.el.style.display = show ? 'block' : 'none';
+    if (show) {
+      this.activeIds.add(id);
+    }
+  }
+
+  /**
+   * 批量添加标签
+   */
+  addBatch(items: Array<{ data: any; options: LabelOptions }>) {
+    for (const { data, options } of items) {
+      this.add(data, options);
+    }
+  }
+
+  /**
+   * 根据 ID 批量移除标签
+   */
+  removeByIds(ids: string[]) {
+    for (const id of ids) {
+      const label = this.labels.get(id);
+      if (label) {
+        this.unloadByLabel(label);
+        this.labels.delete(id);
+        this.activeIds.delete(id);
+      }
+    }
+  }
+
+  unloadByLabel(label: LabelInstance) {
+    label.el.remove();
+    if (label?.unload && typeof label.unload === 'function') label?.unload();
+    label.unload = null;
+  }
+
+  /**
+   * 移除所有标签
+   */
+  removeAll() {
+    for (const label of this.labels.values()) {
+      this.unloadByLabel(label);
+    }
+    this.labels.clear();
+    this.activeIds.clear();
+  }
+
+  /**
+   * 更新标签的数据并刷新内容
+   */
+  update(id: string, newData: any) {
+    const label = this.labels.get(id);
+    if (!label) {
+      console.warn(`Label with id "${id}" not found for update.`);
+      return;
+    }
+
+    const theme = this.themes[label.theme];
+    if (!theme) {
+      console.warn(`Theme "${label.theme}" not registered.`);
+      return;
+    }
+
+    try {
+      theme.createElement(label.el, { id, theme: label.theme, data: newData }, theme);
+    } catch (err) {
+      console.error(`Failed to update label "${id}":`, err);
+    }
+  }
+
+  /**
+   * 根据 ID 批量隐藏标签
+   */
+  hideByIds(ids: string[]) {
+    for (const id of ids) {
+      const label = this.labels.get(id);
+      if (label) {
+        if (label.notCreateElement) {
+          this.unloadByLabel(label);
+        }
+        label.el.style.display = 'none';
+        this.activeIds.delete(id);
+      }
+    }
+  }
+
+  /**
+   * 隐藏所有标签
+   */
+  hideAll() {
+    for (const label of this.labels.values()) {
+      if (label.notCreateElement) {
+        this.unloadByLabel(label);
+      }
+      label.el.style.display = 'none';
+      this.activeIds.delete(label.id);
+    }
+  }
+
+  /**
+   * 条件过滤隐藏标签
+   */
+  hideFilter(filter: (data: any) => boolean) {
+    for (const label of this.labels.values()) {
+      if (!filter(label.data)) continue;
+      if (label.notCreateElement) {
+        this.unloadByLabel(label);
+      }
+      label.el.style.display = 'none';
+      this.activeIds.delete(label.id);
+    }
+  }
+
+  /**
+   * 根据 ID 显示标签
+   */
+  showByIds(ids: string[]) {
+    for (const id of ids) {
+      const label = this.labels.get(id);
+      if (label) {
+        if (label.notCreateElement || !label.el.parentNode) {
+          this.container.appendChild(label.el);
+        }
+        if (!label.unload) {
+          try {
+            const themeOptions = this.themes[label.theme];
+            if (!themeOptions) {
+              console.warn(`Theme "${label.theme}" not registered`);
+              return;
+            }
+            label.unload =
+              themeOptions.createElement(
+                label.el,
+                { id, theme: label.theme, data: label.data },
+                themeOptions,
+              ) || {};
+          } catch (err) {
+            console.error(`Error creating label element for theme "${label.theme}":`, err);
+            return;
+          }
+        }
+
+        label.el.style.display = 'block';
+        this.activeIds.add(id);
+      }
+    }
+  }
+
+  /**
+   * 检查标签是否存在
+   */
+  has(id: string): boolean {
+    return this.labels.has(id);
+  }
+
+  /**
+   * 清空活跃 ID 列表（不影响 DOM）
+   */
+  reset() {
+    for (const id of this.activeIds.values()) {
+      let label = this.labels.get(id);
+      label && this.unloadByLabel(label);
+    }
+    this.activeIds.clear();
+  }
+
+  /**
+   * 清理当前未活跃的标签（隐藏而不移除 DOM）
+   */
+  cleanup() {
+    for (const [id, label] of this.labels.entries()) {
+      if (!this.activeIds.has(id)) {
+        label.el.style.display = 'none';
+      }
+    }
+  }
+
+  /**
+   * 经纬度 -> 自动地形高度修正 -> Cartesian3 -> 屏幕坐标
+   */
+  async toWindowPositionByLonLat(lon: number, lat: number): Promise<any> {
+    const Cesium = this.Cesium;
+    const scene = this.viewer.scene;
+
+    // 1. 经纬度列表
+    const positions = [Cesium.Cartographic.fromDegrees(lon, lat)];
+
+    // 2. 使用 clampToHeightMostDetailed 获取真实地形高度
+    let heightResult;
+    try {
+      heightResult = await scene.clampToHeightMostDetailed(positions);
+    } catch (e) {
+      console.warn('clampToHeightMostDetailed failed, fallback to ellipsoid height.');
+    }
+
+    let finalHeight = 0;
+    if (heightResult && heightResult[0] && heightResult[0].height != null) {
+      finalHeight = heightResult[0].height; // 用户偏好：height[0].height
+    } else {
+      // 如果地形未开启，则 fallback 椭球高度
+      finalHeight = 0;
+    }
+
+    // 3. 生成真实位置 Cartesian3
+    const worldPos = Cesium.Cartesian3.fromDegrees(lon, lat, finalHeight);
+
+    // 4. 转屏幕像素坐标
+    return this.toWindowCoordinates(worldPos);
+  }
+
+  /**
+   * 坐标转换：经纬度 -> 屏幕像素坐标
+   */
+  toWindowCoordinates(position: any): any {
+    const scene = this.viewer.scene;
+    const st = this.Cesium.SceneTransforms;
+    if (typeof st?.wgs84ToWindowCoordinates === 'function') {
+      return st.wgs84ToWindowCoordinates(scene, position);
+    }
+    if (typeof st?.worldToWindowCoordinates === 'function') {
+      return st.worldToWindowCoordinates(scene, position);
+    }
+
+    console.warn('No compatible window coordinate transform function found.');
+    return undefined;
+  }
+
+  /**
+   * 每帧刷新所有活跃标签的位置
+   */
+  private async _update() {
+    const scene = this.viewer.scene;
+
+    for (const id of this.activeIds) {
+      const label = this.labels.get(id);
+      if (!label) continue;
+
+      const lon = parseFloat(label.el.dataset.lon!);
+      const lat = parseFloat(label.el.dataset.lat!);
+      const height = parseFloat(label.el.dataset.height || '0');
+
+      const position = this.Cesium.Cartesian3.fromDegrees(lon, lat, height);
+      const screenPosition = this.toWindowCoordinates(position);
+
+      if (this.Cesium.defined(screenPosition)) {
+        const theme = this.themes[label.theme];
+        const offset = theme.options?.offset || {};
+        const offsetX = offset.x || 0;
+        const offsetY = offset.y || 0;
+
+        label.el.style.left = `${screenPosition.x}px`;
+        label.el.style.top = `${screenPosition.y}px`;
+        label.el.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+        label.el.style.display = 'block';
+      } else {
+        label.el.style.display = 'none';
+      }
+    }
+  }
+
+  /**
+   * 销毁标签池，清理监听器和 DOM
+   */
+  destroy() {
+    this.viewer.scene.postRender.removeEventListener(this._updateFn);
+    // this.container.remove();
+    this.labels.clear();
+    this.activeIds.clear();
+  }
+}

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

@@ -0,0 +1,92 @@
+export enum MarkerEventKey {
+  Click = 'marker:click',
+  DoubleClick = 'marker:dblclick',
+  RightClick = 'marker:rightclick',
+  MouseEnter = 'marker:mouseenter',
+  MouseLeave = 'marker:mouseleave',
+  MouseDown = 'marker:mousedown',
+  MouseUp = 'marker:mouseup',
+}
+
+interface ListenerItem<T = any> {
+  name: string;
+  fn: (data: T, event: Event) => void;
+  once?: boolean;
+}
+
+export { ListenerItem };
+
+export class MarkerEventBus {
+  private listenerMap = new Map<MarkerEventKey, Map<string, ListenerItem>>();
+
+  /**
+   * 添加监听器
+   * @param key 事件 key
+   * @param listener 监听器项
+   * @param overwrite 是否覆盖同名监听器
+   * @returns 是否成功添加
+   */
+  addListener(key: MarkerEventKey, listener: ListenerItem, overwrite: boolean = false): boolean {
+    let map = this.listenerMap.get(key);
+    if (!map) {
+      map = new Map();
+      this.listenerMap.set(key, map);
+    }
+
+    if (map.has(listener.name)) {
+      if (overwrite) {
+        console.warn(
+          `[MarkerEventBus] Overwriting listener "${listener.name}" for event "${key}".`,
+        );
+        map.set(listener.name, listener);
+        return true;
+      } else {
+        console.warn(
+          `[MarkerEventBus] Listener "${listener.name}" for event "${key}" already exists. Use overwrite=true to replace it.`,
+        );
+        return false;
+      }
+    }
+
+    map.set(listener.name, listener);
+    return true;
+  }
+
+  /**
+   * 移除某个 key 的所有监听器
+   */
+  removeListenerByKey(key: MarkerEventKey): boolean {
+    const existed = this.listenerMap.has(key);
+    this.listenerMap.set(key, new Map());
+    return existed;
+  }
+
+  /**
+   * 移除某个 key 下的指定名字的监听器
+   */
+  removeListenerByKeyAndName(key: MarkerEventKey, name: string): boolean {
+    const map = this.listenerMap.get(key);
+    if (!map) return false;
+    return map.delete(name);
+  }
+
+  /**
+   * 运行监听器
+   */
+  runListener<T = any>(key: MarkerEventKey, data: T, e: Event) {
+    const map = this.listenerMap.get(key);
+    if (!map) return;
+
+    for (const [name, listener] of map.entries()) {
+      try {
+        listener.fn(data, e);
+      } catch (err) {
+        console.error(`Error in listener "${name}" for event "${key}":`, err);
+      }
+
+      if (listener.once) {
+        map.delete(name);
+      }
+    }
+  }
+}

package/plugins/cesium-core/src/components/Material/MaterialManager.ts

@@ -0,0 +1,129 @@
+interface RegisterOptions {
+  themeKey: string;
+  material: any;
+  force?: boolean; // 可选，默认 false
+  category?: string; // 可选，默认 'default'
+}
+
+export class MaterialManager {
+  private categoryMap: Map<string, Map<string, any>> = new Map();
+
+  private CategoryGet = {} as { [key: string]: Function };
+  constructor() {}
+
+  registerCategoryGet(category: string, fn: Function): void {
+    if (!category) return console.warn('分类不能为空');
+    this.CategoryGet[category] = fn;
+  }
+  /**
+   * 注册材质
+   */
+  register(options: RegisterOptions): void {
+    const { themeKey, material, force = false, category = 'default' } = options;
+
+    if (!this.categoryMap.has(category)) {
+      this.categoryMap.set(category, new Map());
+    }
+    const materialMap = this.categoryMap.get(category)!;
+
+    if (materialMap.has(themeKey)) {
+      if (!force) {
+        console.warn(
+          `[MaterialManager] 已存在 themeKey '${themeKey}' 在分类 '${category}'，如需覆盖请设置 force = true`,
+        );
+        return;
+      } else {
+        console.info(`[MaterialManager] themeKey '${themeKey}' 在分类 '${category}' 已被覆盖`);
+      }
+    }
+    materialMap.set(themeKey, material);
+  }
+
+  /**
+   * 获取材质
+   */
+  get({
+    themeKey,
+    category,
+    options,
+  }: {
+    themeKey: string;
+    category?: string;
+    options?: any;
+  }): any | undefined {
+    category = category || 'default';
+    if (this.CategoryGet[category]) {
+      return this.CategoryGet[category]({
+        themeKey,
+        materialMap: this.categoryMap,
+        options: options || {},
+      });
+    }
+    return this.categoryMap.get(category)?.get(themeKey);
+  }
+
+  /**
+   * 是否存在
+   */
+  has(themeKey: string, category: string = 'default'): boolean {
+    return this.categoryMap.get(category)?.has(themeKey) ?? false;
+  }
+
+  /**
+   * 移除材质
+   */
+  remove(themeKey: string, category: string = 'default'): void {
+    const materialMap = this.categoryMap.get(category);
+    if (!materialMap) return;
+
+    const material = materialMap.get(themeKey);
+    if (material?.destroy) {
+      material.destroy();
+    }
+    materialMap.delete(themeKey);
+
+    if (materialMap.size === 0) {
+      this.categoryMap.delete(category);
+    }
+  }
+
+  /**
+   * 获取某分类下的所有 keys
+   */
+  keys(category: string = 'default'): string[] {
+    return [...(this.categoryMap.get(category)?.keys() || [])];
+  }
+
+  /**
+   * 清空某个分类
+   */
+  clearCategory(category: string = 'default'): void {
+    const materialMap = this.categoryMap.get(category);
+    if (!materialMap) return;
+
+    for (const material of materialMap.values()) {
+      material?.destroy?.();
+    }
+    materialMap.clear();
+    this.categoryMap.delete(category);
+  }
+
+  /**
+   * 清空所有
+   */
+  clearAll(): void {
+    for (const materialMap of this.categoryMap.values()) {
+      for (const material of materialMap.values()) {
+        material?.destroy?.();
+      }
+    }
+    this.categoryMap.clear();
+  }
+
+  /**
+   * 获取所有分类
+   */
+  categories(): string[] {
+    return [...this.categoryMap.keys()];
+  }
+}