leiting-bim 2.1.36 → 2.1.39

package/plugins/cesium-vue/src/components/marker-manage/src/components/MarkerManage.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+  import { onMounted, onUnmounted, watch, inject, unref, Ref } from 'vue';
+  import { markerManageProps, MarkerManageOptions } from '../type/markerManage';
+  import { MarkerManage } from '../core/MarkerManage';
+
+  const props = defineProps(markerManageProps);
+  const emits = defineEmits(['register', 'load', 'marker-event']);
+  const leitingMethods = inject('leitingMethods') as Ref<any>;
+  let markerManager: MarkerManage | null = null;
+
+  const init = (options: Partial<MarkerManageOptions> = {}) => {
+    if (markerManager) return markerManager;
+
+    const finalOptions = {
+      ...props,
+      ...options,
+      Cesium: options.Cesium || props.Cesium,
+      viewer: options.viewer || props.viewer,
+      runListener: (key: string, data: any, ...args: any[]) => {
+        emits('marker-event', { key, data, args });
+      },
+    };
+
+    if (!finalOptions.Cesium || !finalOptions.viewer) {
+      // console.warn('MarkerManage: Cesium or viewer not provided yet');
+      return null;
+    }
+
+    markerManager = new MarkerManage(finalOptions as any);
+    if (options.methods) {
+      options.methods.setTagTheme = markerManager.setTagTheme.bind(markerManager);
+      options.methods.setMaterial = markerManager.setMaterial.bind(markerManager);
+      options.methods.setEntityList = markerManager.set.bind(markerManager);
+      options.methods.addComItem = markerManager.add.bind(markerManager);
+      options.methods.deleteComItem = markerManager.delete.bind(markerManager);
+      options.methods.updateComItem = markerManager.update.bind(markerManager);
+      options.methods.getEntityByID = markerManager.getById.bind(markerManager);
+      options.methods.getOptions = markerManager.getOptions.bind(markerManager);
+    }
+    emits('load', markerManager);
+
+    return markerManager;
+  };
+
+  const methods = {
+    init,
+    set: (list: any) => markerManager?.set(list),
+    add: (data: any) => markerManager?.add(data),
+    update: (data: any[], immediately?: boolean) => markerManager?.update(data, immediately),
+    getById: (id: string) => markerManager?.getById(id),
+    getOptions: () => markerManager?.getOptions(),
+    delete: (data: string[] | string) => markerManager?.delete(data),
+    setMarkerAggregationEnabled: (enabled: boolean, count?: number) =>
+      markerManager?.setMarkerAggregationEnabled(enabled, count),
+    setDebugCurrentGridsEnabled: (enabled: boolean) =>
+      markerManager?.setDebugCurrentGridsEnabled(enabled),
+    initThemes: (data: any) => markerManager?.initThemes(data),
+    setTagTheme: (data: any) => markerManager?.setTagTheme(data),
+    setMaterial: (data: any) => markerManager?.setMaterial(data),
+  };
+
+  defineExpose(methods);
+  emits('register', methods);
+  function load() {
+    if (markerManager) return markerManager;
+    const methods = unref(leitingMethods) as any;
+    const Cesium = methods?.getCesium?.();
+    const viewer = methods?.getViewer?.();
+    if (Cesium && viewer) {
+      init({ Cesium, viewer, methods });
+    } else if (props.Cesium && props.viewer) {
+      init({ methods });
+    }
+  }
+
+  onMounted(() => {
+    load();
+  });
+
+  watch(
+    () => [props.Cesium, props.viewer],
+    ([newCesium, newViewer]) => {
+      if (newCesium && newViewer && !markerManager) {
+        load();
+      }
+    },
+  );
+  watch(
+    () => leitingMethods?.value,
+    (nv, ov) => {
+      /* ... */
+      load();
+    },
+    { deep: false },
+  );
+  onUnmounted(() => {
+    // markerManager?.destroy();
+    // Assuming destroy exists or cleanup is handled
+  });
+
+  // Watch for props changes if needed, but usually init is once.
+</script>
+
+<template>
+  <slot></slot>
+</template>

package/plugins/cesium-vue/src/components/marker-manage/src/config/theme.ts

@@ -0,0 +1,8 @@
+import { ThemeInterface } from '../type/markerManage';
+
+export const tagTheme: ThemeInterface[] = [];
+export const tagClusterComName = [];
+export const lineTheme: ThemeInterface[] = [];
+export const polygonTheme = [];
+export const wallTheme = [];
+export const cardTheme = [];

package/plugins/cesium-vue/src/components/marker-manage/src/core/MarkerManage.ts

@@ -0,0 +1,466 @@
+import { h, markRaw, render } from 'vue';
+import {
+  HtmlOverlayLabelPool,
+  MarkerEventBus,
+  MarkerEventKey,
+  MaterialManager,
+} from '@report-components/cesium-core';
+import CxCardCarousel from '../../../card-carousel';
+import CxMarkerDefault from '../../../marker-default';
+import CxMarkerHtml from '../../../marker-html';
+import { MarkerManagerCore } from './MarkerManagerCore';
+import type { MarkerManageOptions } from '../type/markerManage';
+import { omit } from 'lodash-es';
+import { ReportListenerKey } from '../type/markerManage';
+import { isFunction } from 'lodash-es';
+import { createLineTheme, createPolygonTheme, createWallTheme } from '../utils/themeTool';
+
+interface MarkerManageOptionsExtend extends Partial<MarkerManageOptions> {
+  labelId?: string;
+  cardId?: string;
+  tagThemeConfig?: any[];
+  lineThemeConfig?: any[];
+  cardThemeConfig?: any[];
+  runListener?: Function;
+  MaterialManager?: MaterialManager;
+  Cesium: any;
+  viewer: any;
+}
+
+export class MarkerManage extends MarkerManagerCore {
+  constructor(opt: MarkerManageOptionsExtend) {
+    const {
+      labelId = 'report-marker',
+      cardId = 'report-marker',
+      tagThemeConfig = [],
+      lineThemeConfig = [],
+      cardThemeConfig = [],
+      runListener = () => {},
+      MaterialManager: materialManager = new MaterialManager(),
+      aggregatorOptions,
+    } = opt;
+
+    // Merge default themes with provided ones
+    const finalTagThemeConfig = [...tagThemeConfig];
+    const finalLineThemeConfig = [...lineThemeConfig];
+    const finalCardThemeConfig = [...cardThemeConfig];
+
+    // Merge default aggregator options
+    const finalAggregatorOptions = {
+      clusterTheme: 'Tag1007',
+      pointTheme: 'Tag1001',
+      centralPointMode: 'firstPoint',
+      debugCurrentGrids: false,
+      ...(aggregatorOptions || {}),
+    };
+
+    const options = {
+      ...opt,
+      labelId,
+      cardId,
+      MaterialManager: materialManager,
+      aggregatorOptions: finalAggregatorOptions,
+      eventBus: new MarkerEventBus(),
+    };
+
+    super(options as any);
+
+    // Ensure opt has all extended props
+    this.opt = { ...this.opt, ...options } as any;
+
+    // Initialize listeners
+    this.initTagListener(this.instance.eventBus, this.opt as any);
+
+    // Load themes
+    this.loadTabThemeConfig(finalTagThemeConfig);
+    this.loadLineThemeConfig(finalLineThemeConfig);
+    this.loadCardThemeConfig(finalCardThemeConfig);
+    this.initDefaultLineMaterials();
+    this.initDefaultTagTheme();
+  }
+
+  initDefaultTagTheme() {
+    this.setTagTheme({
+      comType: 4,
+      data: {
+        theme: 'default',
+        options: {
+          textStyle: {
+            width: 'max-content',
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            borderRadius: '5px',
+            padding: '4px 8px',
+          },
+        },
+      },
+    });
+  }
+
+  initDefaultLineMaterials() {
+    const Cesium = (this.opt as any).Cesium;
+    if (!Cesium) return;
+
+    const defaultMaterials = {
+      themeBeUnderConstructionRailway: {
+        material: new Cesium.PolylineDashMaterialProperty({
+          color: Cesium.Color.fromCssColorString('white'),
+          gapColor: Cesium.Color.fromCssColorString('black'),
+          dashLength: 50.0,
+          dashPattern: parseInt('1111111111111110', 2),
+        }),
+      },
+      themeRailway: {
+        material: new Cesium.PolylineDashMaterialProperty({
+          color: Cesium.Color.BLACK,
+          gapColor: Cesium.Color.WHITE,
+          dashLength: 48, //短划线长度
+        }),
+      },
+      themeNewRailway: {
+        material: new Cesium.PolylineOutlineMaterialProperty({
+          color: Cesium.Color.RED,
+          outlineWidth: 0,
+          outlineColor: Cesium.Color.BLACK,
+        }),
+      },
+      themePlanningRailway: {
+        material: new Cesium.PolylineOutlineMaterialProperty({
+          color: Cesium.Color.fromCssColorString('rgb(162, 83, 188)'),
+          outlineWidth: 0,
+          outlineColor: Cesium.Color.BLACK,
+        }),
+      },
+      themePlanLine: {
+        material: new Cesium.PolylineOutlineMaterialProperty({
+          color: Cesium.Color.fromCssColorString('rgb(5,11,233)'),
+          outlineWidth: 0,
+          outlineColor: Cesium.Color.BLACK,
+        }),
+      },
+      themeExpressway: {
+        material: new Cesium.PolylineOutlineMaterialProperty({
+          color: Cesium.Color.fromCssColorString('rgb(255,255, 0)'),
+          outlineWidth: 6,
+          outlineColor: Cesium.Color.fromCssColorString('rgb(102, 176 ,8)'),
+        }),
+      },
+      themeNationalHighway: {
+        material: new Cesium.PolylineOutlineMaterialProperty({
+          color: Cesium.Color.fromCssColorString('rgb(160 ,119, 0)'),
+          outlineWidth: 6,
+          outlineColor: Cesium.Color.fromCssColorString('rgb(68 ,33, 24)'),
+        }),
+      },
+      themeProvincialRoad: {
+        material: new Cesium.PolylineOutlineMaterialProperty({
+          color: Cesium.Color.fromCssColorString('rgb(160 ,119, 0)'),
+          outlineWidth: 6,
+          outlineColor: Cesium.Color.fromCssColorString('rgb(68 ,33, 24)'),
+        }),
+      },
+      themeCityBoundary: {
+        material: new Cesium.PolylineDashMaterialProperty({
+          color: Cesium.Color.fromCssColorString('rgb(162, 83, 188)'),
+          gapColor: Cesium.Color.fromCssColorString('0000'),
+          dashLength: 50.0,
+          dashPattern: parseInt('1111111111100100', 2),
+        }),
+      },
+      themeProvincialBoundaries: {
+        material: new Cesium.PolylineDashMaterialProperty({
+          // color: Cesium.Color.fromCssColorString('rgb(162, 83, 188)'),
+          color: Cesium.Color.fromCssColorString('rgb(162, 83, 188)'),
+          gapColor: Cesium.Color.fromCssColorString('0000'),
+          dashLength: 50.0,
+          dashPattern: parseInt('1111111100100100', 2),
+        }),
+      },
+    };
+
+    Object.entries(defaultMaterials).forEach(([key, value]: [string, any]) => {
+      if (this.MaterialManager.has(key, 'polyline')) return;
+      this.MaterialManager.register({
+        themeKey: key,
+        material: value.material,
+        category: 'polyline',
+      });
+    });
+  }
+
+  // Initialize dynamic themes from data
+  public initThemes(data: any) {
+    if (!data) return;
+
+    if (data.tag) {
+      this.loadTabThemeConfig(data.tag);
+    }
+    if (data.card) {
+      this.loadCardThemeConfig(data.card);
+    }
+
+    const Cesium = (this.opt as any).Cesium;
+    const materialManager = this.instance.materialManager || (this.opt as any).MaterialManager;
+
+    if (data.line?.length > 0) {
+      for (let item of data.line) {
+        createLineTheme({
+          options: item,
+          Cesium: Cesium,
+          MaterialManager: materialManager,
+        });
+      }
+    }
+    if (data.polygon?.length > 0) {
+      for (let item of data.polygon) {
+        createPolygonTheme({
+          options: item,
+          Cesium: Cesium,
+          MaterialManager: materialManager,
+        });
+      }
+    }
+    if (data.wall?.length > 0) {
+      for (let item of data.wall) {
+        createWallTheme({
+          options: item,
+          Cesium: Cesium,
+          MaterialManager: materialManager,
+        });
+      }
+    }
+  }
+
+  extractOnEvents(props: any) {
+    const events: { [key: string]: Function } = {};
+    for (const key in props) {
+      if (key.startsWith('on') && typeof props[key] === 'function') {
+        events[key] = props[key]; // 直接保留
+      }
+    }
+    return events;
+  }
+
+  //注册标记主题
+  loadTabThemeConfig(themeList: any[]) {
+    themeList.forEach((item) => {
+      this.setTagTheme(item);
+    });
+  }
+
+  //注册默认的线配置
+  loadLineThemeConfig(themeList: any[]) {
+    // let { Cesium } = this.opt;
+    themeList.forEach((item) => {
+      if (this.MaterialManager.has(item.data.theme, 'polyline')) return;
+      if (item.material) {
+        this.MaterialManager.register({
+          themeKey: item.data.theme,
+          material: item.material,
+          category: 'polyline',
+        });
+      }
+    });
+  }
+
+  loadCardThemeConfig(themeList: any[]) {
+    let labelPool = this.instance.cardPool;
+    themeList.forEach((item) => {
+      labelPool.registerTheme(item.data.theme, {
+        createElement(container: any, label: any) {
+          let data = label.data.data;
+          let vNode: any;
+
+          if (item.comType == 1) {
+            vNode = h(markRaw(CxCardCarousel), {
+              data: data || {},
+              imgSrc: item.data.img,
+              styleConfig: {
+                paddingTop: '50px',
+                paddingRight: '18px',
+                paddingBottom: '10px',
+                paddingLeft: '95px',
+                backgroundColor: 'rgba(0,0,0,0)',
+                borderRadius: 0,
+                width: '682px',
+                height: '445px',
+              },
+              titleConfig: {
+                show: true,
+                width: '600px',
+                height: '50px',
+                left: '79px',
+                top: '0px',
+              },
+              bgClass: [item.data.theme],
+            });
+          } else if (item.comType == 3) {
+            vNode = h(markRaw(CxCardCarousel), {
+              data: data || {},
+              imgSrc: item.data.img,
+              styleConfig: {
+                paddingTop: '55px',
+                paddingRight: '12px',
+                paddingBottom: '17px',
+                paddingLeft: '83px',
+                backgroundColor: 'rgba(0,0,0,0)',
+                borderRadius: 0,
+                width: '365px',
+                height: '353px',
+              },
+              titleConfig: {
+                show: true,
+                width: '285px',
+                height: '50px',
+                left: '79px',
+                top: '0px',
+              },
+              bgClass: [item.data.theme],
+              // titleConfig: themeOptions.options.titleConfig,
+              // pageInfoConfig: themeOptions.options.pageInfoConfig,
+            });
+          }
+
+          render(vNode, container);
+          return () => {
+            return render(null, container);
+          };
+        },
+        options: {
+          offset: item.data.pixelOffset,
+          ...(item.data || {}),
+        },
+      });
+    });
+  }
+
+  //注册主题
+  setTagTheme(options: any) {
+    let { labelPool } = this.instance;
+    labelPool.registerTheme(options.data.theme, {
+      createElement(container: any, label: any) {
+        let info = label.data?.billboard?.[0];
+        const newObj = omit(info, ['position', 'options']);
+        let vNode: any;
+        let props = {
+          ...newObj,
+          text: info?.options?.text,
+          isFullLink: options?.isFullLink ?? false,
+          img: options?.data?.options?.img,
+          textStyle: options?.data?.options?.textStyle,
+        };
+        if (label.data?.gridKey) {
+          vNode = h(markRaw(CxMarkerDefault), {
+            text: label.data?.count,
+            isFullLink: options.isFullLink ?? false,
+            img: options?.data.options.img,
+            textStyle: {
+              display: 'block !important',
+              'font-size': `12px !important`,
+              minWidth: '20px',
+              maxWidth: 'max-content',
+              position: 'absolute',
+              left: '63%',
+              top: '-8px',
+              background: '#f00',
+              'border-radius': '50%',
+              height: '20px',
+              'line-height': '20px',
+              'text-align': 'center',
+              color: 'white',
+            },
+          });
+        } else if (options.comType == 4) {
+          vNode = h(markRaw(CxMarkerHtml), props);
+        } else {
+          vNode = h(markRaw(CxMarkerDefault), props);
+        }
+
+        render(vNode, container);
+        return () => {
+          return render(null, container);
+        };
+      },
+      options: {
+        offset: options?.data?.pixelOffset || {},
+      },
+    });
+  }
+
+  //标记监听事件
+  private initTagListener(eventBus: MarkerEventBus, options: MarkerManageOptionsExtend) {
+    let { viewer, tagListeningOptions } = options;
+    // const eventBus = new MarkerEventBus(); // Already created in core
+    eventBus.addListener(MarkerEventKey.Click, {
+      name: 'marker:click',
+      fn: (info: any) => {
+        options.runListener?.(ReportListenerKey.标记左键点击, info.data);
+        if (isFunction(info.data?.onClick)) {
+          info.data?.onClick(info.data);
+        }
+        if (info.data?.cameraPoint && info.data?.billboard[0]?.isFlyToCameraPoint) {
+          viewer?.camera?.flyTo({
+            duration: 1,
+            ...info.data?.cameraPoint,
+          });
+        }
+      },
+    });
+    eventBus.addListener(MarkerEventKey.MouseEnter, {
+      name: 'marker:mouseenter',
+      fn: (info: any) => {
+        let Cesium = (this.opt as any).Cesium;
+        let offset = { x: 0, y: 0 };
+        try {
+          if (info.data?.billboard?.[0]?.position?.length > 2) {
+            let p = info.data?.billboard[0]?.position;
+            let position = Cesium.Cartesian3.fromDegrees(p[0], p[1], p[3] || 0);
+            let f = this.instance.labelPool.toWindowCoordinates(position);
+            offset.x = f.x;
+            offset.y = f.y;
+          }
+        } catch (e) {
+          console.log(e);
+        }
+        options.runListener?.(ReportListenerKey.标记移入, info.data, offset);
+      },
+    });
+    eventBus.addListener(MarkerEventKey.MouseLeave, {
+      name: 'marker:mouseleave',
+      fn: (info: any) => {
+        let Cesium = (this.opt as any).Cesium;
+        let offset = { x: 0, y: 0 };
+        try {
+          if (info.data?.billboard?.[0]?.position?.length > 2) {
+            let p = info.data?.billboard[0]?.position;
+            let position = Cesium.Cartesian3.fromDegrees(p[0], p[1], p[3] || 0);
+            let f = this.instance.labelPool.toWindowCoordinates(position);
+            offset.x = f.x;
+            offset.y = f.y;
+          }
+        } catch (e) {
+          console.log(e);
+        }
+        options.runListener?.(ReportListenerKey.标记移出, info.data, offset);
+      },
+    });
+    tagListeningOptions?.forEach((item) => {
+      eventBus.addListener(item.key, item.ListenerItem, item.overwrite);
+    });
+    // return eventBus;
+  }
+
+  // 兼容旧模式的材质注册
+  setMaterial(options: any) {
+    const { type, material, materialKey, cover } = options;
+    // 统一转为小写，例如 Polyline -> polyline
+    const category = type ? type.toLowerCase() : 'default';
+
+    this.MaterialManager.register({
+      themeKey: materialKey,
+      // 兼容传入的是 { material: ... } 结构或者直接是材质对象
+      material: material?.material || material,
+      force: cover,
+      category: category,
+    });
+  }
+}