leiting-bim 2.1.35 → 2.1.37

package/plugins/plugins/cesium-vue/src/components/marker-bubble/src/MarkerBubble.vue

@@ -0,0 +1,235 @@
+<template>
+  <div :class="bem.b('bubble')">
+    <div ref="el" :style="nameTransform">
+      <div :class="bem.be('bubble', 'name')" v-if="props.text" :style="props.textStyle">
+        {{ props.text }}
+      </div>
+    </div>
+    <div :class="bem.be('bubble', 'line')" :style="lineStyle"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  import { markerBubbleProps } from './markerBubble';
+  import { computed, ref } from 'vue';
+  import { useElementSize, useDraggable, useMouseInElement } from '@vueuse/core';
+  defineOptions({ name: `${prefix}-marker` });
+  const props = defineProps(markerBubbleProps);
+  const bem = createNamespace('marker');
+
+  const emit = defineEmits(['setOtherOffset']);
+  const el = ref();
+  const { width, height } = useElementSize(el);
+  const draggable = ref(false);
+  const lineStyle = computed(() => {
+    let otherOffsetX = props.otherOffset?.x || 0;
+    let otherOffsetY = props.otherOffset?.y || 0;
+    if (isMove.value && (props.isCanDraggable || draggable.value)) {
+      otherOffsetX = currX.value || 0;
+      otherOffsetY = currY.value || 0;
+    }
+
+    let XF = (props.pixelOffset?.x || 0) + otherOffsetX;
+    let YF = (props.pixelOffset?.y || 0) + otherOffsetY;
+    let X = 0;
+    let Y = 0;
+    let XL = X + XF;
+    let XM = X + XF + width.value / 2;
+    let XR = X + XF + width.value;
+    let YT = Y + YF;
+    let YM = Y + YF + height.value / 2;
+    let YB = Y + YF + height.value;
+    let DX1 = 0;
+    let DY1 = 0;
+    let DX2 = 0;
+    let DY2 = 0;
+    let arrowW = 0;
+    let arrowH = 0;
+    let arrowXF = 0;
+    let arrowYF = 0;
+    let interval = 24;
+    let PML = 4;
+    let borderRadius = 4;
+    let EDGE = '';
+    let directionX = '';
+    let directionY = '';
+    //计算动态点位
+    if (X < XL && Y >= YT && Y <= YB) {
+      //点在矩形左边
+      DX1 = XL;
+      DX2 = XL;
+      let PY = Y < YM ? YT : YM;
+      DY1 = PY + PML;
+      DY2 = PY + PML + Math.min(interval, height.value / 2 - PML - borderRadius);
+      // DY1 = PY + PML;
+      // DY2 = PY + PML + interval;
+      EDGE = 'left';
+    } else if (X > XR && Y >= YT && Y <= YB) {
+      //点在矩形右边
+      DX1 = XR;
+      DX2 = XR;
+      let PY = Y < YM ? YT : YM;
+      DY1 = PY + PML;
+      DY2 = PY + PML + Math.min(interval, height.value / 2 - PML - borderRadius);
+      // DY1 = PY + PML;
+      // DY2 = PY + PML + interval;
+      EDGE = 'right';
+    } else if (Y < YT) {
+      //点在矩形上方
+      DY1 = YT;
+      DY2 = YT;
+      let PX = X < XM ? XL : XM;
+      DX1 = PX + PML;
+      DX2 = PX + PML + Math.min(interval, width.value / 2 - PML - borderRadius);
+      // DX1 = PX + PML;
+      // DX2 = PX + PML + interval;
+      EDGE = 'top';
+    } else if (Y > YB) {
+      //点在矩形下方
+      DY1 = YB;
+      DY2 = YB;
+      let PX = X < XM ? XL : XM;
+      DX1 = PX + PML;
+      DX2 = PX + PML + Math.min(interval, width.value / 2 - PML - borderRadius);
+      // DX1 = PX + PML;
+      // DX2 = PX + PML + interval;
+      EDGE = 'bottom';
+    } else {
+      DX1 = 0;
+      DX2 = 0;
+      DY1 = 0;
+      DY2 = 0;
+    }
+    //计算箭头容器大小与偏移量
+    if (X >= DX1 && X <= DX2) {
+      arrowW = Math.abs(X - DX1) + Math.abs(X - DX2);
+      arrowXF = -Math.abs(X - DX1);
+      directionX = 'mid';
+    } else {
+      arrowW = Math.max(Math.abs(X - DX1), Math.abs(X - DX2));
+      arrowXF = X < DX1 ? 0 : -arrowW;
+      directionX = X < DX1 ? 'left' : 'right';
+    }
+
+    if (Y >= DY1 && Y <= DY2) {
+      arrowH = Math.abs(Y - DY1) + Math.abs(Y - DY2);
+      arrowYF = -Math.abs(Y - DY1);
+      directionY = 'mid';
+    } else {
+      arrowH = Math.max(Math.abs(Y - DY1), Math.abs(Y - DY2));
+      arrowYF = Y < DY1 ? 0 : -arrowH;
+      directionY = Y < DY1 ? 'top' : 'bottom';
+    }
+    //计算剖切路径
+    let p1x = 0 as Number | String;
+    let p1y = 0 as Number | String;
+    let p2x = 0 as Number | String;
+    let p2y = 0 as Number | String;
+    let p3x = 0 as Number | String;
+    let p3y = 0 as Number | String;
+
+    if (EDGE == 'top' || EDGE == 'bottom') {
+      p1y = EDGE == 'top' ? 0 : '100%';
+      p2y = EDGE == 'top' ? '100%' : 0;
+      p3y = EDGE == 'top' ? '100%' : 0;
+      if (directionX == 'left') {
+        p1x = 0;
+        p2x = DX1 + 'px';
+        p3x = '100%';
+      } else if (directionX == 'right') {
+        p1x = '100%';
+        p2x = 0;
+        p3x = Math.abs(DX2 - DX1) + 'px';
+      } else if (directionX == 'mid') {
+        p1x = Math.abs(X - DX1) + 'px';
+        p2x = 0;
+        p3x = '100%';
+      }
+    }
+
+    if (EDGE == 'left' || EDGE == 'right') {
+      p1x = EDGE == 'left' ? 0 : '100%';
+      p2x = EDGE == 'left' ? '100%' : 0;
+      p3x = EDGE == 'left' ? '100%' : 0;
+      if (directionY == 'top') {
+        p1y = 0;
+        p2y = DY1 + 'px';
+        p3y = '100%';
+      } else if (directionY == 'bottom') {
+        p1y = '100%';
+        p2y = 0;
+        p3y = Math.abs(DY2 - DY1) + 'px';
+      } else if (directionY == 'mid') {
+        p1y = Math.abs(Y - DY1) + 'px';
+        p2y = 0;
+        p3y = '100%';
+      }
+    }
+    let clipPath = `polygon(${p1x} ${p1y}, ${p2x} ${p2y},${p3x} ${p3y})`;
+    return {
+      ...props.lineStyle,
+      width: arrowW + 'px',
+      height: arrowH + 'px',
+      clipPath: clipPath,
+      transform: `translate(${-XF + arrowXF + otherOffsetX}px  , ${
+        -YF + arrowYF + otherOffsetY
+      }px)`,
+    };
+  });
+  let isMouseOver = false;
+  const oldX = ref(0);
+  const oldY = ref(0);
+  const currX = ref(0);
+  const currY = ref(0);
+  const isMove = ref(false);
+  const nameTransform = computed(() => {
+    if (isMove.value && (props.isCanDraggable || draggable.value)) {
+      return {
+        width: `max-content`,
+        transform: `translate(${currX.value}px, ${currY.value}px)`,
+      };
+    } else {
+      return {
+        width: `max-content`,
+        transform: `translate(${props.otherOffset?.x || 0}px, ${props.otherOffset?.y || 0}px)`,
+      };
+    }
+  });
+  const { elementPositionX, elementPositionY } = useMouseInElement(el);
+  useDraggable(el, {
+    initialValue: { x: elementPositionX.value, y: elementPositionY.value },
+    onStart: () => {
+      oldX.value = elementPositionX.value;
+      oldY.value = elementPositionY.value;
+      setTimeout(() => {
+        if (props.onCanDraggable) {
+          draggable.value = props.onCanDraggable();
+        }
+        isMove.value = true;
+      });
+    },
+    onMove: (position) => {
+      if ((props.isCanDraggable || draggable.value) && isMove.value) {
+        currX.value = position.x - oldX.value + (props.otherOffset?.x || 0);
+        currY.value = position.y - oldY.value + (props.otherOffset?.y || 0);
+        console.log({
+          x: currX.value,
+          y: currY.value,
+        });
+      }
+    },
+    onEnd: (position) => {
+      if (position.x == 0 && position.y == 0) return;
+      if (position.x == oldX.value && position.y == oldY.value) return;
+      if (props.isCanDraggable || draggable.value) {
+        currX.value = position.x - oldX.value + (props.otherOffset?.x || 0);
+        currY.value = position.y - oldY.value + (props.otherOffset?.y || 0);
+        emit('setOtherOffset', {
+          x: position.x - oldX.value + (props.otherOffset?.x || 0),
+          y: position.y - oldY.value + (props.otherOffset?.y || 0),
+        });
+      }
+      isMove.value = false;
+    },
+  });
+</script>

package/plugins/plugins/cesium-vue/src/components/marker-bubble/src/markerBubble.ts

@@ -0,0 +1,35 @@
+import { ExtractPropTypes } from 'vue';
+export const markerBubbleProps = {
+  text: { type: String, default: '文字' },
+  textStyle: {
+    type: Object,
+    default: () => {},
+  },
+  lineStyle: {
+    type: Object,
+    default: () => {},
+  },
+  isCanDraggable: {
+    type: Boolean,
+    default: false,
+  },
+  onCanDraggable: {
+    type: Function,
+  },
+  pixelOffset: {
+    type: Object,
+    default: () => {
+      x: 0;
+      y: 0;
+    },
+  },
+  otherOffset: {
+    type: Object,
+    default: () => {
+      x: 0;
+      y: 0;
+    },
+  },
+} as const;
+
+export type MarkerBubbleProps = ExtractPropTypes<typeof markerBubbleProps>;

package/plugins/plugins/cesium-vue/src/components/marker-default/index.ts

@@ -0,0 +1,12 @@
+import { withInstall } from '@report-components/utils/with-install';
+import _MarkerDefault from './src/MarkerDefault.vue';
+export * from './src/markerDefault';
+
+const CxMarkerDefault = withInstall(_MarkerDefault);
+export default CxMarkerDefault;
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CxMarkerDefault: typeof CxMarkerDefault;
+  }
+}

package/plugins/plugins/cesium-vue/src/components/marker-default/src/MarkerDefault.vue

@@ -0,0 +1,19 @@
+<template>
+  <div :class="bem.b('default')">
+    <span :class="textClass" v-if="props.text" :style="props.textStyle">{{ props.text }}</span>
+    <div>
+      <img :src="img" :class="[bem.be('default', 'img'),'tag-img']" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  import { markerDefaultProps } from './markerDefault';
+  import { computed } from 'vue';
+  defineOptions({ name: `${prefix}-marker-default` });
+  const textClass = computed(() => {
+    return props.textStyle ? [bem.be('default', 'custom'),'tag-text'] : [bem.be('default', 'name'),'tag-text'];
+  });
+  const props = defineProps(markerDefaultProps);
+  const bem = createNamespace('marker');
+</script>

package/plugins/plugins/cesium-vue/src/components/marker-default/src/markerDefault.ts

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from 'vue';
+export const markerDefaultProps = {
+  text: { type: String, default: '' },
+  img: { type: String, default: '' },
+  suffix: { type: String, default: '.png' },
+  textStyle: {
+    type: Object,
+    default: () => {},
+  },
+} as const;
+
+export type MarkerDefaultProps = ExtractPropTypes<typeof markerDefaultProps>;

package/plugins/plugins/cesium-vue/src/components/marker-html/index.ts

@@ -0,0 +1,12 @@
+import { withInstall } from '@report-components/utils/with-install';
+import _MarkerHtml from './src/MarkerHtml.vue';
+export * from './src/markerHtml';
+
+const CxMarkerHtml = withInstall(_MarkerHtml);
+export default CxMarkerHtml;
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CxMarkerDefault: typeof CxMarkerHtml;
+  }
+}

package/plugins/plugins/cesium-vue/src/components/marker-html/src/MarkerHtml.vue

@@ -0,0 +1,21 @@
+<template>
+  <div :class="bem.b('html')">
+    <div
+      :class="bem.be('html', 'custom')"
+      v-if="props.text"
+      :style="props.textStyle"
+      v-html="props.text"
+    ></div>
+    <div>
+      <img :src="img" :class="bem.be('html', 'img')" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { createNamespace, prefix } from '@report-components/utils/create';
+  import { markerHTMLProps } from './markerHtml';
+  defineOptions({ name: `${prefix}-marker-html` });
+
+  const props = defineProps(markerHTMLProps);
+  const bem = createNamespace('marker');
+</script>

package/plugins/plugins/cesium-vue/src/components/marker-html/src/markerHtml.ts

@@ -0,0 +1,12 @@
+import { ExtractPropTypes } from 'vue';
+export const markerHTMLProps = {
+  text: { type: String, default: '' },
+  img: { type: String, default: '' },
+  suffix: { type: String, default: '.png' },
+  textStyle: {
+    type: Object,
+    default: () => {},
+  },
+} as const;
+
+export type MarkerHTMLProps = ExtractPropTypes<typeof markerHTMLProps>;

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

@@ -0,0 +1,14 @@
+import { withInstall } from '@report-components/utils/with-install';
+import _MarkerManage from './src/components/MarkerManage.vue';
+export * from './src/type/markerManage';
+export * from './src/core/MarkerManagerCore';
+export * from './src/core/MarkerManage';
+
+const CxMarkerManage = withInstall(_MarkerManage);
+export default CxMarkerManage;
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    CxMarkerManage: typeof CxMarkerManage;
+  }
+}

package/plugins/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/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 = [];