大屏添加cesium

src/main.ts

@@ -9,6 +9,13 @@ import App from './App.vue';
 import store from './store';
 import router from './router';
 
+// tree
+import '../public/tree/zTreeStyle/zTreeStyle.css';
+import '../public/tree/jquery.ztree.core.js';
+import '../public/tree/jquery.ztree.excheck.js';
+import '../public/tree/jquery.ztree.exedit.js';
+import '../public/tree/jquery.ztree.exhide.js';
+
 // 自定义指令
 import directive from './directive';
 
@@ -42,6 +49,9 @@ VXETable.setConfig({
 
 // 修改 el-dialog 默认点击遮照为不关闭
 import { ElDialog } from 'element-plus';
+import bus from './utils/bus';
+import $message from '@/plugins/modal';
+import { EventBusPlugin } from './utils/busSetup';
 ElDialog.props.closeOnClickModal.default = false;
 
 const app = createApp(App);
@@ -51,9 +61,12 @@ app.use(ElementIcons);
 app.use(router);
 app.use(store);
 app.use(i18n);
+app.use(bus);
 app.use(VXETable);
 app.use(plugins);
 // 自定义指令
 directive(app);
-
+app.use(EventBusPlugin);
 app.mount('#app');
+app.config.globalProperties.$message = $message;
+export default app;

src/utils/bus.ts

@@ -0,0 +1,22 @@
+import mitt from 'mitt';
+
+const emitter = mitt();
+
+export default {
+  install(app) {
+    // 发送事件
+    app.config.globalProperties.$sendChanel = (event, payload) => {
+      emitter.emit(event, payload);
+    };
+
+    // 监听事件（返回取消函数）
+    app.config.globalProperties.$recvChanel = (event, handler) => {
+      emitter.on(event, handler);
+
+      // 可选：返回解绑函数，方便使用
+      return () => {
+        emitter.off(event, handler);
+      };
+    };
+  }
+};

src/utils/busSetup.ts

@@ -0,0 +1,88 @@
+import mitt, { type Emitter, type EventType, type Handler } from 'mitt';
+
+// 事件总线类
+class EventBus {
+  private emitter: Emitter;
+
+  constructor() {
+    this.emitter = mitt();
+  }
+
+  /**
+   * 监听事件
+   * @param type 事件类型
+   * @param handler 事件处理函数
+   */
+  on<T = any>(type: EventType, handler: Handler<T>) {
+    this.emitter.on(type, handler);
+    return this; // 支持链式调用
+  }
+
+  /**
+   * 监听一次事件
+   * @param type 事件类型
+   * @param handler 事件处理函数
+   */
+  once<T = any>(type: EventType, handler: Handler<T>) {
+    const wrapper: Handler<T> = (payload) => {
+      handler(payload);
+      this.off(type, wrapper);
+    };
+    this.on(type, wrapper);
+    return this;
+  }
+
+  /**
+   * 触发事件
+   * @param type 事件类型
+   * @param payload 传递的数据
+   */
+  emit<T = any>(type: EventType, payload?: T) {
+    this.emitter.emit(type, payload);
+    return this;
+  }
+
+  /**
+   * 移除事件监听
+   * @param type 事件类型
+   * @param handler 事件处理函数（不传则移除该类型所有监听）
+   */
+  off<T = any>(type: EventType, handler?: Handler<T>) {
+    this.emitter.off(type, handler);
+    return this;
+  }
+
+  /**
+   * 清除所有事件监听
+   */
+  clear() {
+    this.emitter.all.clear();
+    return this;
+  }
+
+  /**
+   * 在组件卸载时自动清除事件监听
+   * @param instance 组件实例
+   * @param type 事件类型
+   * @param handler 事件处理函数
+   */
+  onWithCleanup<T = any>(instance: { cleanup: (fn: () => void) => void }, type: EventType, handler: Handler<T>) {
+    this.on(type, handler);
+    instance.cleanup(() => {
+      this.off(type, handler);
+    });
+    return this;
+  }
+}
+
+// 创建单例实例
+export const bus = new EventBus();
+
+// 提供Vue插件形式使用
+export const EventBusPlugin = {
+  install(app: any) {
+    app.config.globalProperties.$bus = bus;
+  }
+};
+
+export default bus;

src/views/largeScreen/components/api/index.ts

@@ -0,0 +1,91 @@
+import { pa } from 'element-plus/es/locale/index.mjs';
+import request from './request';
+import request_yewu from '@/utils/request';
+// 获取树形结构
+export const getMarkerList = () => {
+  return request({
+    url: '/source/list',
+    method: 'get'
+  });
+};
+// 添加其他资源 /source/addOtherSource
+export const addOtherSource = async (data) => {
+  return await request({
+    url: '/source/addOtherSource',
+    method: 'post',
+    data
+  }).then((res) => {
+    if (res.code == 200)
+      ElMessage({
+        message: '添加成功',
+        type: 'success'
+      });
+  });
+};
+// 删除资源
+export const deleteSource = (data) => {
+  return request({
+    url: '/source/delete',
+    method: 'post',
+    data
+  })
+};
+//路径规划 /graphhopper/route
+export const routePlan = (data) => {
+  return request({ url: '/graphhopper/route', method: 'post', data });
+};
+// 编辑节点
+export const updateInfo = (data) => {
+  console.log(data);
+  // 摄像头编辑走业务接口，其他的走地图接口
+  if (data.params && data.params.entityType && data.params.entityType == 'monitor') {
+    const deviceData = {
+      deviceSerial: data.id,
+      deviceName: data.sourceName,
+      detail: JSON.stringify(data.params)
+    };
+    return request_yewu({ url: '/project/big/screen/device', method: 'put', data: deviceData });
+  } else {
+    return request({ url: '/source/update', method: 'post', data });
+  }
+};
+//模型库-获取模型类型
+export const getModelTypeList = () => {
+  return request({
+    url: '/modelLibrary/modelTypeList',
+    method: 'get'
+  });
+};
+//根据模型类型查看模型列表
+export const getModelList = (data: any) => {
+  return request({
+    url: `/modelLibrary/modelList`,
+    method: 'post',
+    headers: {
+      'content-type': 'application/x-www-form-urlencoded'
+    },
+    data: data
+  });
+};
+// 获取资源列表
+export const getSousceList = (params: any) => {
+  return request({
+    url: `/webSource/list`,
+    method: 'get',
+    headers: {
+      'content-type': 'application/x-www-form-urlencoded'
+    },
+    params:params
+  })
+};
+// 加载地图数据
+export const loadMapData = (data: any) => {
+  return request({
+    url: `/graphhopper/loadMap`,
+    method: 'post',
+    headers: {
+      'content-type': 'application/x-www-form-urlencoded'
+    },
+    data,
+  })
+};

src/views/largeScreen/components/api/request.ts

@@ -0,0 +1,61 @@
+import axios, { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+import { HttpStatus } from '@/enums/RespEnum';
+const service = axios.create({
+  baseURL: import.meta.env.VITE_APP_MAP_API,
+  timeout: 50000
+});
+const tokenStorage = useStorage<null | string>('Map-Token', null);
+// 请求拦截器
+service.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    config.headers['Authorization'] = tokenStorage.value; // 让每个请求携带自定义token 请根据实际情况自行修改
+    return config;
+  },
+  (error: any) => {
+    return Promise.reject(error);
+  }
+);
+// 响应拦截器
+service.interceptors.response.use(
+  (res: AxiosResponse) => {
+    // 未设置状态码则默认成功状态
+    const code = res.data.code || HttpStatus.SUCCESS;
+    const getToken = () => {
+      service({
+        url: '/user/login',
+        method: 'post',
+        data: {
+          'username': 'admin',
+          'password': 'admin123'
+        }
+      }).then((res) => {
+        console.log('登录返回值', res);
+        if (res.code == 200) {
+          tokenStorage.value = res.data.token;
+          window.location.reload();
+        }
+      });
+    };
+    
+    if (code === 401) {
+      getToken();
+    }else if (code == 20000) {
+      getToken();
+    } else {
+      return Promise.resolve(res.data);
+    }
+  },
+  (error: any) => {
+    let { message } = error;
+    if (message == 'Network Error') {
+      message = '后端接口连接异常';
+    } else if (message.includes('timeout')) {
+      message = '系统接口请求超时';
+    } else if (message.includes('Request failed with status code')) {
+      message = '系统接口' + message.substr(message.length - 3) + '异常';
+    }
+    ElMessage({ message: message, type: 'error', duration: 5 * 1000 });
+    return Promise.reject(error);
+  }
+);
+export default service;

src/views/largeScreen/components/centerPage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="centerPage">
-    <div class="centerPage_list">
+    <div class="centerPage_list" v-if="isFull">
       <div class="card">
         <div class="title">今日总发电量</div>
         <div class="value">
@@ -89,17 +89,25 @@
         <div class="target">目标: 12560吨</div>
       </div>
     </div>
-    <div class="centerPage_map">
-      <div ref="mapRef" class="map-container" style="width: 100%; height: 98%" />
+    <div class="centerPage_map" :style="{height: isFull ? '80%' : '100%'}">
+      <!-- <div ref="mapRef" class="map-container" style="width: 100%; height: 98%" /> -->
+       <newMapEarth :isHide="isFull" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { getPowerStationOverview } from '@/api/large';
+import newMapEarth from './newMap/index.vue';
 import * as echarts from 'echarts';
 import china from '@/assets/china.json';
 const data = ref<any>({});
+const props = defineProps({
+  isFull: {
+    type: Boolean,
+    default: true,
+  }
+});
 
 // 地图容器引用
 const mapRef = ref<HTMLDivElement | null>(null);
@@ -114,116 +122,116 @@ const handleResize = () => {
 };
 
 // 初始化地图
-const initEcharts = () => {
-  if (!mapRef.value) {
-    console.error('未找到地图容器元素');
-    return;
-  }
+// const initEcharts = () => {
+//   if (!mapRef.value) {
+//     console.error('未找到地图容器元素');
+//     return;
+//   }
 
-  // 注册地图
-  echarts.registerMap('china', china as any);
+//   // 注册地图
+//   echarts.registerMap('china', china as any);
 
-  // 地图数据
-  const mapData: any = [{ name: '田东县', value: 1, itemStyle: { color: '#fff' } }];
+//   // 地图数据
+//   const mapData: any = [{ name: '田东县', value: 1, itemStyle: { color: '#fff' } }];
 
-  // 散点数据
-  // 散点数据 - 使用图片标记并调整名称位置
-  const scatterData: any[] = [
-    {
-      name: '田东光伏智慧生态工地开发项目',
-      value: [107.15, 23.63],
-      // 使用图片作为标记（注意：需替换为你的图片实际路径）
-      symbol: 'diamond',
-      // 标记颜色
-      itemStyle: {
-        color: '#0166d6'
-      },
-      // 图片标记大小（宽, 高）
-      symbolSize: [20, 20],
-      // 名称样式设置
-      label: {
-        show: true,
-        formatter: '{b}', // 显示名称
-        position: 'top', // 名称在图片上方
-        color: '#fff',
-        fontSize: 12,
-        // 可选：添加文字背景以增强可读性
-        backgroundColor: 'rgba(3, 26, 52, 0.7)',
-        padding: [3, 6],
-        borderRadius: 3
-      }
-    }
-  ];
-  // 初始化新实例，强制清除缓存
-  myChart = echarts.init(mapRef.value, null, {
-    renderer: 'canvas', // 明确指定渲染器
-    useDirtyRect: false // 禁用脏矩形渲染，避免样式缓存
-  });
-  // 配置项
-  const option: any = {
-    roam: true, // 关键配置：允许鼠标滚轮缩放和拖拽平移
-    geo: {
-      type: 'map',
-      map: 'china',
-      zoom: 5,
-      center: [107.15, 23.63],
-      label: {
-        show: false,
-        color: '#fff'
-      },
-      itemStyle: {
-        areaColor: '#031a34', // 地图区域底色
-        borderColor: '#1e3a6e', // 区域边框颜色
-        borderWidth: 1
-      }
-    },
-    tooltip: {
-      trigger: 'item',
-      formatter: function (params: any) {
-        return params.name + (params.value ? `：${params.value}` : '');
-      }
-    },
-    series: [
-      {
-        type: 'map',
-        map: 'china',
-        geoIndex: 0,
-        // 关键：在series级别定义emphasis，优先级最高
-        emphasis: {
-          areaColor: '#fff', // 强制设置hover颜色
-          label: {
-            show: true,
-            color: '#fff'
-          },
-          itemStyle: {
-            areaColor: '#02417e' // 重复设置确保生效
-          }
-        },
-        // 确保没有使用默认样式
-        select: {
-          itemStyle: {
-            areaColor: '#02417e'
-          }
-        },
-        data: mapData
-      },
-      {
-        type: 'scatter',
-        coordinateSystem: 'geo',
-        data: scatterData
-      }
-    ]
-  };
+//   // 散点数据
+//   // 散点数据 - 使用图片标记并调整名称位置
+//   const scatterData: any[] = [
+//     {
+//       name: '田东光伏智慧生态工地开发项目',
+//       value: [107.15, 23.63],
+//       // 使用图片作为标记（注意：需替换为你的图片实际路径）
+//       symbol: 'diamond',
+//       // 标记颜色
+//       itemStyle: {
+//         color: '#0166d6'
+//       },
+//       // 图片标记大小（宽, 高）
+//       symbolSize: [20, 20],
+//       // 名称样式设置
+//       label: {
+//         show: true,
+//         formatter: '{b}', // 显示名称
+//         position: 'top', // 名称在图片上方
+//         color: '#fff',
+//         fontSize: 12,
+//         // 可选：添加文字背景以增强可读性
+//         backgroundColor: 'rgba(3, 26, 52, 0.7)',
+//         padding: [3, 6],
+//         borderRadius: 3
+//       }
+//     }
+//   ];
+//   // 初始化新实例，强制清除缓存
+//   myChart = echarts.init(mapRef.value, null, {
+//     renderer: 'canvas', // 明确指定渲染器
+//     useDirtyRect: false // 禁用脏矩形渲染，避免样式缓存
+//   });
+//   // 配置项
+//   const option: any = {
+//     roam: true, // 关键配置：允许鼠标滚轮缩放和拖拽平移
+//     geo: {
+//       type: 'map',
+//       map: 'china',
+//       zoom: 5,
+//       center: [107.15, 23.63],
+//       label: {
+//         show: false,
+//         color: '#fff'
+//       },
+//       itemStyle: {
+//         areaColor: '#031a34', // 地图区域底色
+//         borderColor: '#1e3a6e', // 区域边框颜色
+//         borderWidth: 1
+//       }
+//     },
+//     tooltip: {
+//       trigger: 'item',
+//       formatter: function (params: any) {
+//         return params.name + (params.value ? `：${params.value}` : '');
+//       }
+//     },
+//     series: [
+//       {
+//         type: 'map',
+//         map: 'china',
+//         geoIndex: 0,
+//         // 关键：在series级别定义emphasis，优先级最高
+//         emphasis: {
+//           areaColor: '#fff', // 强制设置hover颜色
+//           label: {
+//             show: true,
+//             color: '#fff'
+//           },
+//           itemStyle: {
+//             areaColor: '#02417e' // 重复设置确保生效
+//           }
+//         },
+//         // 确保没有使用默认样式
+//         select: {
+//           itemStyle: {
+//             areaColor: '#02417e'
+//           }
+//         },
+//         data: mapData
+//       },
+//       {
+//         type: 'scatter',
+//         coordinateSystem: 'geo',
+//         data: scatterData
+//       }
+//     ]
+//   };
 
-  // 设置配置项
-  myChart.setOption(option);
-};
+//   // 设置配置项
+//   myChart.setOption(option);
+// };
 
 // 组件挂载时初始化
 onMounted(() => {
   // 确保DOM渲染完成
   nextTick(() => {
-    initEcharts();
+    // initEcharts();
     window.addEventListener('resize', handleResize);
   });
 });
@@ -241,6 +249,7 @@ const getDataList = () => {
     console.log(res);
     if (res.code == 200) {
       data.value = res.data;
+      console.log('data.value',data.value);
     }
   });
 };

src/views/largeScreen/components/header.vue

@@ -35,12 +35,28 @@
           <img src="@/assets/large/setting.png" alt="设置图标" />
           <span>管理系统</span>
         </div>
+        <div class="change" @click="emit('changePage')">
+          <el-icon size="20" v-if="!isFull">
+            <Expand />
+          </el-icon>
+          <el-icon size="20" v-else>
+            <Fold />
+          </el-icon>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref, onUnmounted, defineEmits } from 'vue';
+const props = defineProps({
+  isFull: {
+    type: Boolean,
+    default: false
+  },
+});
+const emit = defineEmits(['changePage']);
 const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
 const date = ref({
   ymd: '',

src/views/largeScreen/components/newMap/MapSource.ts

@@ -0,0 +1,47 @@
+import { useTreeNode } from './treeNode';
+import { initMapData } from './initMapData';
+import { addOtherSource } from '@/views/largeScreen/components/api';
+
+export const addMapSource = async ({ type, id, sourceName = '未命名对象', opt = {} }) => {
+  console.log(type, sourceName, opt);
+  const { cusAddNodes } = useTreeNode();
+  // id不存在则重新赋值
+  if (!id) {
+    id = new window['YJ'].Tools().randomString();
+  }
+  // 渲染到地球获取实例参数
+  const options: any = await initMapData(type, opt, null);
+  // 获取选中的节点，当最后一个节点为文件夹则取他的id作为新增节点的父节点Id，否则取该节点的父节点ID
+  const selectedNodes = window['treeObj'].getSelectedNodes();
+  const node = selectedNodes && selectedNodes[selectedNodes.length - 1];
+  console.log(node);
+  let parentId;
+  if (node) parentId = node.sourceType === 'directory' ? node.id : node.parentId;
+  // 某些类型资源删除部分属性
+  if (options) {
+    delete options.host;
+    switch (type) {
+      case 'rendezvous':
+      case 'attackArrow':
+      case 'pincerArrow':
+        delete options.label.ground;
+        delete options.label.position;
+        break;
+      case 'path':
+        delete options.label.text;
+        break;
+    }
+  }
+  const newnode: any = {
+    id: id,
+    sourceName: sourceName,
+    sourceType: type,
+    // isShow: 1,
+    parentId: parentId,
+    // "treeIndex": 0,
+    params: options
+  };
+  console.log('newnode', newnode);
+  addOtherSource(newnode);
+  cusAddNodes(window['treeObj'], newnode.parentId, [newnode]);
+};

src/views/largeScreen/components/newMap/bottomBtn/index.vue

@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { addMapSource } from '../MapSource';
+import { getCurrentInstance } from 'vue';
+
+// 获取组件实例
+const instance = getCurrentInstance();
+const bottomMenuList = ref([
+  {
+    sourceName: '贴地文字',
+    key: 'groundText',
+    sourceType: 'groundText',
+    className: 'public',
+    fun: () => {
+      instance.proxy['$sendChanel']('openDialog', ['addGroundText']);
+    }
+  },
+  {
+    sourceName: '立体文字',
+    key: 'standText',
+    sourceType: 'standText',
+    className: 'public',
+    fun: () => {
+      instance.proxy['$sendChanel']('openDialog', ['addStandText']);
+    }
+  },
+  {
+    sourceName: '点标注',
+    key: 'DrawPoint',
+    sourceType: 'point',
+    className: 'public',
+    fun: () => {
+      drawEntity('DrawPoint', 'point', '点标注');
+    }
+  },
+  {
+    sourceName: '线标注',
+    key: 'DrawPolyline',
+    sourceType: 'line',
+    className: 'public',
+    fun: () => {
+      drawEntity('DrawPolyline', 'line', '线标注');
+    }
+  },
+  {
+    sourceName: '曲线标注',
+    key: 'DrawPolyline',
+    sourceType: 'curve',
+    className: 'public',
+    fun: () => {
+      drawEntity('DrawPolyline', 'curve', '曲线标注', 2, { curve: true });
+    }
+  },
+  {
+    sourceName: '面标注',
+    key: 'DrawPolygon',
+    sourceType: 'panel',
+    className: 'public',
+    fun: () => {
+      drawEntity('DrawPolygon', 'panel', '面标注', 3);
+    }
+  },
+  {
+    sourceName: '圆标注',
+    key: 'DrawCircle',
+    sourceType: 'circle',
+    className: 'public',
+    fun: () => {
+      drawEntity('DrawCircle', 'circle', '圆标注');
+    }
+  },
+  {
+    sourceName: '矩形',
+    key: 'DrawRect',
+    sourceType: 'rectangle',
+    className: 'public',
+    fun: () => {
+      drawEntity('DrawRect', 'rectangle', '矩形', 3);
+    }
+  },
+  {
+    sourceName: '集结地',
+    key: 'DrawAssemble',
+    sourceType: 'rendezvous',
+    className: 'public',
+    fun: () => {
+      drawEntity('DrawAssemble', 'rendezvous', '集结地', 3);
+    }
+  },
+  {
+    sourceName: '箭头',
+    key: 'DrawAttackArrow',
+    sourceType: 'attackArrow',
+    className: 'public',
+    fun: () => {
+      drawEntity('DrawAttackArrow', 'attackArrow', '箭头', 3);
+    }
+  },
+
+  {
+    sourceName: '钳形箭头',
+    key: 'DrawPincerArrow',
+    sourceType: 'pincerArrow',
+    className: 'public',
+    fun: () => {
+      drawEntity('DrawPincerArrow', 'pincerArrow', '钳形箭头', 5);
+    }
+  }
+  // {
+  //   sourceName: "锁定",
+  //   key: "lock",
+  //   sourceType: "unLock",
+  //   className: "public",
+  // },
+]);
+const drawEntity = (drawFunc, type, name, leastPointNum = 2, drawFuncParam = undefined) => {
+  console.log('drawEntity');
+  let Draw = new window['YJ'].Draw[drawFunc](window['Earth1'], drawFuncParam);
+  Draw.start(async (a, position) => {
+    console.log(position);
+    // 多个坐标的（>1）
+    let points = ['line', 'curve', 'panel', 'rectangle', 'rendezvous', 'attackArrow', 'pincerArrow'].includes(type);
+    // 返回值不单是坐标的
+    let params = ['circle'].includes(type);
+    if (!position || (points && position.length < leastPointNum)) {
+      if (points)
+        ElMessage({
+          message: '至少需要绘制' + leastPointNum + '个坐标！',
+          type: 'warning'
+        });
+      return;
+    }
+    let id = new window['YJ'].Tools().randomString();
+    let opt = {
+      id,
+      name: name
+    };
+    if (points) {
+      opt['positions'] = position;
+    } else if (params) {
+      opt['center'] = position.center;
+      opt['radius'] = position.radius;
+    } else opt['position'] = position;
+    await addMapSource({
+      type,
+      id,
+      sourceName: name,
+      opt
+    });
+  });
+};
+const addMarker = (item: any) => {
+  item.fun();
+};
+</script>
+
+<template>
+  <div class="bottomBtn">
+    <div class="animate__animated bottomMenu">
+      <div class="bottom_box" v-for="(item, i) of bottomMenuList" :key="i" @click="addMarker(item)" :title="item.sourceType">
+        <svg-icon :icon-class="item.sourceType" :size="20" color="rgba(0, 255, 255, 1)"></svg-icon>
+        <div class="span">{{ item.sourceName }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.bottomBtn {
+  display: flex;
+  .bottomMenu {
+    display: flex;
+    height: 44px;
+    .bottom_box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 6vw;
+      height: 100%;
+      background: url('@/assets/images/map/bottom.png') no-repeat;
+      background-size: 100% 100%;
+      margin-right: 10px;
+      cursor: pointer;
+
+      .icon_bj {
+        font-size: 1.1rem;
+        // padding: 5px 20px;
+        position: relative;
+        margin: 0 5px 0;
+      }
+
+      .icon_bj:hover {
+        transition-duration: 0.5s;
+        transform: scale(0.8);
+      }
+
+      > .span {
+        color: #fff;
+        font-family: 黑体;
+        font-size: 1rem;
+        max-width: 4.5vw;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-family: 'alimamashuheiti';
+        font-weight: 400;
+        text-shadow: 0px 0px 9px #1476ff;
+        box-sizing: border-box;
+        padding-left: 0.5rem;
+      }
+
+      @media screen and (max-width: 1550px) {
+        .icon_bj {
+          padding: 5px 15px;
+          margin: 0 5px 4px;
+        }
+
+        .span {
+          font-size: 16px;
+        }
+      }
+
+      @media (min-width: 1550px) and (max-width: 1680px) {
+        .icon_bj {
+          padding: 8px 18px;
+          margin: 0 5px 0px;
+        }
+
+        .span {
+          font-size: 16px;
+        }
+      }
+      &:hover {
+        background: url('@/assets/images/map/bottom1.png') no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+</style>

src/views/largeScreen/components/newMap/dialog/CircleObject.vue

@@ -0,0 +1,367 @@
+<template>
+  <Dialog ref="baseDialog" :title="title+'属性'" left="180px" top="100px" className="polygon" :closeCallback="closeCallback">
+    <template #content>
+      <span class="custom-divider"></span>
+      <div class="div-item">
+        <div class="row" style="align-items: flex-start;">
+          <div class="col">
+            <span class="label">名称</span>
+            <input class="input" maxlength="40" type="text" v-model="entityOptions.name">
+          </div>
+          <div class="col" style="flex: 0 0 60%;">
+            <div class="row">
+              <div class="col input-select-unit-box">
+                <span class="label" style="margin-right: 0px;">投影面积:</span>
+                <input class="input input-text" readonly type="text" v-model="area">
+                <el-select v-model="areaUnit">
+                    <el-option label="平方米" value="m2"></el-option>
+                    <el-option label="平方千米" value="km2"></el-option>
+                    <el-option label="亩" value="mu"></el-option>
+                    <el-option label="公顷" value="ha"></el-option>
+                  </el-select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="div-item">
+        <div class="row">
+          <el-tabs v-model="activeName">
+            <!-- <el-tab-pane label="属性信息" name="1">
+              <attribute :entityOptions="entityOptions"></attribute>
+            </el-tab-pane> -->
+            <el-tab-pane label="空间信息" name="2">
+              <div class="row">
+                <div class="col height-mode-box">
+                  <span class="label" style="flex: 0 0 56px;">高度模式</span>
+                  <el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px"
+                    v-model="heightMode" @change="heightModeChange" placeholder="请选择">
+                    <el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key">
+                    </el-option>
+                  </el-select>
+                </div>
+                <div class="col">
+                  <span class="label">Z值统一增加</span>
+                  <div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }">
+                    <input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height">
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                  </div>
+                  <button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm"
+                    :disabled="heightMode == 2">应用</button>
+                </div>
+              </div>
+              <div class="row">
+                <div class="table spatial-info-table">
+                  <div class="table-head">
+                    <div class="tr">
+                      <div class="th"></div>
+                      <div class="th">经度（X）</div>
+                      <div class="th">纬度（Y）</div>
+                      <div class="th">高度（Z）</div>
+                    </div>
+                  </div>
+                  <div class="table-body">
+                    <div class="tr">
+                      <div class="td">圆心坐标</div>
+                      <div class="td lng align-center" @dblclick="inputDblclick($event, 1, 'lng')">
+                        <input class="input" @blur="inputBlurCallBack($event, 1, 'lng', 8)" type="number"
+                          v-model="entityOptions.center.lng" min="-180" max="180" v-if="activeTd.index == 1 && activeTd.name == 'lng'">
+                        <span style="pointer-events: none;" v-else>{{ entityOptions.center.lng.toFixed(8) }}</span>
+                      </div>
+                      <div class="td lat align-center" @dblclick="inputDblclick($event, 1, 'lat')">
+                        <input class="input" @blur="inputBlurCallBack($event, 1, 'lat', 8)" type="number"
+                          v-model="entityOptions.center.lat" min="-180" max="180" v-if="activeTd.index == 1 && activeTd.name == 'lat'">
+                        <span style="pointer-events: none;" v-else>{{ entityOptions.center.lat.toFixed(8) }}</span>
+                      </div>
+                      <div class="td alt align-center" @dblclick="inputDblclick($event, 1, 'alt')">
+                        <input class="input" @blur="inputBlurCallBack($event, 1, 'alt', 2)" type="number"
+                          v-model="entityOptions.height" min="-9999999" max="999999999"
+                          v-if="activeTd.index == 1 && activeTd.name == 'alt'">
+                        <span style="pointer-events: none;" v-else>{{ entityOptions.height.toFixed(2) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="面风格" name="3">
+              <div class="row">
+                <div class="col">
+                  <span class="label">面颜色</span>
+                  <div class="color" ref="colorRef"></div>
+                </div>
+                <div class="col">
+                  <span class="label">描边颜色</span>
+                  <div class="lineColor" ref="lineColorRef"></div>
+                </div>
+                <div class="col">
+                  <span class="label">描边宽度</span>
+                  <div class="input-number input-number-unit-2">
+                    <input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth">
+                    <span class="unit">px</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="标签风格" name="4">
+              <labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+      <span class="custom-divider"></span>
+    </template>
+    <template #footer>
+      <div style="position: absolute; left: 24px; display: flex;">
+        <button @click="nodeEdit"><svg class="icon-edit">
+            <use xlink:href="#yj-icon-edit"></use>
+          </svg>二次编辑</button>
+        <button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
+            <use xlink:href="#yj-icon-py"></use>
+          </svg>平移</button>
+      </div>
+      <button @click="remove">删除</button>
+      <button @click="confirm">确定</button>
+      <button @click="close">关闭</button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { inject } from "vue";
+import { updateInfo, deleteSource} from '@/views/largeScreen/components/api'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import Dialog from './baseDialog.vue'
+// import attribute from './attribute.vue'
+import labelStyle from './labelStyle.vue'
+import { useTreeNode } from '../treeNode'
+
+const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
+
+const title = ref('圆')
+const baseDialog: any = ref(null);
+const eventBus: any = inject("bus");
+const options = ref({});
+const colorRef = ref(null)
+const lineColorRef = ref(null)
+// eventBus.on("openPolygonEdit", () => {
+//   baseDialog.value?.open()
+// });
+
+const area = ref(0)
+const areaUnit = ref('m2')
+const height = ref(10)
+const heightModeData = ref([
+  {
+    name: '海拔高度',
+    value: '海拔高度',
+    key: 0
+  },
+  {
+    name: '相对地表',
+    value: '相对地表',
+    key: 1
+  },
+  {
+    name: '依附模型',
+    value: '依附模型',
+    key: 2
+  }
+])
+
+const activeName = ref('2')
+const activeTd = ref({
+  index: -1,
+  name: ''
+})
+const center = ref({})
+const heightMode = ref(0)
+const entityOptions: any = ref({});
+let originalOptions: any
+let that: any
+
+const open = async (id: any, type: any) => {
+  that = window['Earth1'].entityMap.get(id)
+  originalOptions = structuredClone(that.options)
+  entityOptions.value = that
+  heightMode.value = entityOptions.value.heightMode
+  area.value = entityOptions.value.areaByMeter
+  center.value = structuredClone(that.options.center)
+  that.areaChangeCallBack = () => {
+    switch (areaUnit.value) {
+      case 'm2'://平方米
+        area.value = entityOptions.value.areaByMeter
+        break
+      case 'km2'://平方千米
+        area.value = Number((entityOptions.value.areaByMeter / 1000000).toFixed(8))
+        break
+      case 'mu'://亩
+        area.value = Number(
+          (entityOptions.value.areaByMeter / 666.6666667).toFixed(4)
+        )
+        break
+      case 'ha'://公顷
+        area.value = Number((entityOptions.value.areaByMeter / 10000).toFixed(6))
+        break
+      default:
+        area.value = entityOptions.value.areaByMeter
+    }
+  }
+  heightModeChange(heightMode.value)
+  baseDialog.value?.open()
+
+  await nextTick()
+  let colorPicker = new window['YJColorPicker']({
+    el: colorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.color,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: color => {
+      entityOptions.value.color = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.color = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  let linecolorPicker = new window['YJColorPicker']({
+    el: lineColorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.lineColor,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: color => {
+      entityOptions.value.lineColor = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.lineColor = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+}
+
+const heightModeChange = (val) => {
+  that.heightMode = heightMode.value
+}
+
+const heightConfirm = () => {
+  if (entityOptions.value.operate.positionEditing) {
+    that.positionEditing = false
+    entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
+  }
+  else {
+    that.closeNodeEdit(this)
+    that.heightMode = that.heightMode
+    setTimeout(() => {
+      entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
+    }, 100);
+  }
+}
+const inputDblclick = async (event, i, anme) => {
+  if(heightMode.value == 2) {
+    return
+  }
+  activeTd.value = {
+    index: i,
+    name: anme
+  }
+  await nextTick()
+  let inputElm = event.target.getElementsByClassName('input')[0]
+  if (inputElm) {
+    inputElm.focus()
+  }
+}
+const inputBlurCallBack = (event, i, name, digit = 2) => {
+  activeTd.value = {
+    index: -1,
+    name: ''
+  }
+}
+
+const translate = () => {
+  that.openPositionEditing(() => {
+    entityOptions.value.options.center = structuredClone(that.options.center)
+  })
+}
+
+const closeCallback = () => {
+  entityOptions.value.originalOptions = structuredClone(originalOptions)
+  that.positionEditing = false
+  entityOptions.value.closeNodeEdit()
+  entityOptions.value.reset()
+  // eventBus.emit("destroyComponent")
+}
+
+const nodeEdit = () => {
+  that.nodeEdit((e, center, areaByMeter) => {
+    entityOptions.value.options.center = structuredClone(center)
+  })
+}
+
+const confirm = () => {
+  originalOptions = structuredClone(that.options)
+  baseDialog.value?.close()
+  let params = structuredClone(that.options)
+  delete params.host
+  let params2 = {
+    "id": params.id,
+    "sourceName": params.name,
+    "params": params,
+    "isShow": params.show ? 1 : 0,
+  }
+  updateInfo(params2)
+  cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
+}
+const close = () => {
+  baseDialog.value?.close()
+}
+
+const remove = () => {
+  close()
+  ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(async () => {
+        let selectNodes = getSelectedNodes(window['treeObj'])
+        let source_ids = cusRemoveNode(window['treeObj'], selectNodes)
+        const res = await deleteSource({ ids: source_ids })
+        if (res.code == 0 || res.code == 200) {
+          ElMessage({
+            message: '删除成功',
+            type: 'success'
+          })
+          that.remove()
+        } else {
+          ElMessage({
+            message: res.msg || '删除失败',
+            type: 'error'
+          })
+        }
+      })
+      .catch(() => {
+      })
+}
+
+watch(
+  () => areaUnit.value,
+  (val) => {
+    if ((entityOptions.value.areaByMeter || entityOptions.value.areaByMeter == 0) && that) {
+      that.areaChangeCallBack()
+    }
+  },
+  { immediate: true }
+);
+
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/largeScreen/components/newMap/dialog/FlyRoam.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import Dialog from './baseDialog.vue';
+
+import { ref, reactive, getCurrentInstance } from 'vue';
+import { addOtherSource } from '@/views/largeScreen/components/api';
+import { useTreeNode } from '../treeNode';
+const { cusAddNodes } = useTreeNode();
+let show: any = ref(false);
+const baseDialog: any = ref(null);
+let flyRoam: any = reactive([]);
+// 获取组件实例
+const instance = getCurrentInstance();
+instance.proxy['$recvChanel']('flyRoamDialog', () => {
+  show.value = true;
+  baseDialog.value?.open();
+  setTimeout(() => {
+    flyRoam = window['YJ'].Global.FlyRoam.open(window['Earth1'], { repeat: Infinity }, {}, draw);
+  }, 100);
+});
+const draw = (data) => {
+  if (data.points.length != 0) {
+    let selectedNodes = window['treeObj'].getSelectedNodes();
+    let node = selectedNodes && selectedNodes[selectedNodes.length - 1];
+    let parentId;
+    if (node) {
+      if (node.sourceType === 'directory') {
+        parentId = node.id;
+      } else {
+        parentId = node.parentId;
+      }
+    }
+    let id = new window['YJ'].Tools().randomString();
+    let paramsData: any = {
+      params: data,
+      id,
+      sourceName: '漫游路径',
+      sourceType: 'roam',
+      parentId: parentId
+    };
+
+    addOtherSource(paramsData);
+    paramsData.isShow = true;
+    paramsData.params = JSON.stringify(paramsData.params);
+    cusAddNodes(window['treeObj'], paramsData.parentId, [paramsData]);
+    baseDialog.value?.close();
+  } else {
+    ElMessage({
+      message: '请添加数据',
+      type: 'warning'
+    });
+  }
+
+  console.log(data);
+};
+</script>
+
+<template>
+  <Dialog ref="baseDialog" class="fly-roam" title="飞行漫游" width="382px" left="180px" top="100px" :closeCallback="closeCallBack">
+    <template #content v-if="show">
+      <span class="custom-divider"></span>
+      <div class="div-item">
+        <div class="row">
+          <div class="col" style="flex: 0 0 205px">
+            <span class="label">名称</span>
+            <input class="input" type="text" name="name" />
+          </div>
+          <div class="col">
+            <input
+              type="checkbox"
+              name="repeat"
+              style="width: 16px; line-height: 15px; height: 15px; cursor: pointer; width: auto; margin-right: 5px"
+            />
+            <span class="label">循环播放</span>
+          </div>
+        </div>
+      </div>
+      <span class="custom-divider"></span>
+
+      <div class="div-item">
+        <div class="row">
+          <div class="col">
+            <button class="afreshPlay">
+              <svg class="icon-play"><use xlink:href="#yj-icon-play"></use></svg>全局播放
+            </button>
+            <button class="cease" style="margin-left: 10px">
+              <svg-icon name="stop" :size="12" color="rgba(255, 255, 255, 1)"></svg-icon>结束播放
+            </button>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col" style="flex: 0 0 200px">
+            <input
+              type="checkbox"
+              name="isTotalTime"
+              style="width: 16px; line-height: 15px; height: 15px; cursor: pointer; width: auto; margin-right: 5px"
+            />
+            <span class="label">设置总时长</span>
+            <div class="input-number input-number-unit-3">
+              <input class="input total-time" type="number" title="" min="0" max="999999.99" step="0.01" name="totalTime" value="0" />
+              <span class="unit" style="top: 6px">s</span>
+              <span class="arrow"></span>
+            </div>
+          </div>
+        </div>
+        <div class="table">
+          <div class="table-head">
+            <div class="tr">
+              <div class="th">序号</div>
+              <div class="th">时长(s)</div>
+              <div class="th">操作</div>
+            </div>
+          </div>
+          <div class="table-body">
+            <div class="table-empty">
+              <div class="empty-img"></div>
+              <p>暂无数据</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span class="custom-divider"></span>
+    </template>
+    <template #footer>
+      <div style="position: absolute; left: 24px; display: flex">
+        <button class="add-point">
+          <svg class="icon-add"><use xlink:href="#yj-icon-add"></use></svg>增加视点
+        </button>
+      </div>
+      <button class="saveRoam" @click="draw">保存</button>
+      <button @click="close">取消</button>
+    </template>
+  </Dialog>
+</template>
+
+<style scoped lang="scss">
+.afreshPlay {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
+    linear-gradient(180deg, rgba(27, 248, 195, 0.2) 0%, rgba(27, 248, 195, 0) 100%) !important;
+  border: 1px solid rgba(27, 248, 195, 1) !important;
+}
+.cease {
+  background: linear-gradient(180deg, rgba(241, 108, 85, 0.2) 0%, rgba(241, 108, 85, 0) 100%), rgba(0, 0, 0, 0.5) !important;
+  border: 1px solid rgba(241, 108, 85, 1) !important;
+}
+::v-deep .content input.YJ-custom-checkbox[type='checkbox'] {
+  border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
+  background-color: rgba(0, 0, 0, 0.5) !important;
+}
+</style>

src/views/largeScreen/components/newMap/dialog/RoutePlanning.vue

@@ -0,0 +1,258 @@
+<script setup lang="ts">
+import Dialog from './baseDialog.vue';
+import { ref, reactive, getCurrentInstance } from 'vue';
+import { routePlan,getSousceList,loadMapData } from '@/views/largeScreen/components/api';
+// 获取组件实例
+const instance = getCurrentInstance();
+const baseDialog: any = ref(null);
+let svgHover: any = reactive([false, false]);
+//属性
+let startLng: any = ref(null);
+let startLat: any = ref(null);
+let endLng: any = ref(null);
+let endLat: any = ref(null);
+
+var routePlanning: any = reactive([]);
+
+instance.proxy['$recvChanel']('routePlanningDialog', () => {
+  baseDialog.value?.open();
+  startLng.value = null;
+  startLat.value = null;
+  endLng.value = null;
+  endLat.value = null;
+  setTimeout(() => {
+    //加载路网数据
+    let host = import.meta.env.VITE_APP_MAP_API; // 'http://192.168.110.232:8848';
+    // if (!window['routePlanning']) {
+    routePlanning = new window['YJ'].Obj.RoutePlanning(window['Earth1'], {
+      gps: false,
+      host
+    });
+
+    window['routePlanning'] = routePlanning;
+
+    getPbf();
+    // routePlanning.Dialog.queryCallBack = (v) => {
+    //   routePlan({
+    //     startLng: startLng.value,
+    //     startLat: startLat.value,
+    //     endLng: endLng.value,
+    //     endLat: endLat.value,
+    //     waypoints: []
+    //   }).then((res) => {
+    //     console.log('查询路线API的结果', res);
+    //     if (res.code == 200) routePlanning.createRoute(res.data.pathPoints);
+    //     else {
+    //       console.log(instance);
+    //       instance.proxy['$message'].warning(res['message']);
+    //     }
+    //   });
+    // };
+    // } else routePlanning = window['routePlanning'];
+  }, 200);
+});
+
+// 获取pbf数据
+const getPbf = async () => {
+  let res = await getSousceList({type:'pbf'})
+  console.log(res);
+  if (res.code == 200) {
+    let pbfurl = res.data[1].path
+    let res2 = await loadMapData({path:pbfurl})    
+  }
+}
+
+// 拾取起点坐标
+const pickStartPos = () => {
+  routePlanning.pickStartPos((position) => {
+    console.log(position, 'position');
+    startLng.value = position.lng;
+    startLat.value = position.lat;
+  });
+};
+// 拾取终点坐标
+const pickEndPos = () => {
+  routePlanning.pickEndPos((position) => {
+    endLng.value = position.lng;
+    endLat.value = position.lat;
+  });
+};
+const changeStartLng = () => {
+  routePlanning.startLng = startLng.value;
+};
+const inputStartLng = () => {
+  let dom: any = document.getElementById('startLng');
+  if (startLng.value < dom.min * 1) {
+    startLng.value = dom.min * 1;
+  } else if (startLng.value > dom.max * 1) {
+    startLng.value = dom.max * 1;
+  }
+};
+const changeStartLat = () => {
+  routePlanning.startLat = startLat.value;
+};
+const inputStartLat = () => {
+  let dom: any = document.getElementById('startLat');
+  if (startLat.value < dom.min * 1) {
+    startLat.value = dom.min * 1;
+  } else if (startLat.value > dom.max * 1) {
+    startLat.value = dom.max * 1;
+  }
+};
+const changeEndLng = () => {
+  routePlanning.endLng = endLng.value;
+};
+const inputEndLng = () => {
+  let dom: any = document.getElementById('endLng');
+  if (endLng.value < dom.min * 1) {
+    endLng.value = dom.min * 1;
+  } else if (endLng.value > dom.max * 1) {
+    endLng.value = dom.max * 1;
+  }
+};
+const changeEndLat = () => {
+  routePlanning.endLat = endLat.value;
+};
+const inputEndLat = () => {
+  let dom: any = document.getElementById('endLat');
+  if (endLat.value < dom.min * 1) {
+    endLat.value = dom.min * 1;
+  } else if (endLat.value > dom.max * 1) {
+    endLat.value = dom.max * 1;
+  }
+};
+// 查询路线
+const routeQuery = () => {
+  routePlan({
+    startLng: startLng.value,
+    startLat: startLat.value,
+    endLng: endLng.value,
+    endLat: endLat.value,
+    waypoints: []
+  }).then((res) => {
+    console.log('查询路线API的结果', res);
+    if (res.code == 200){
+      routePlanning.createRoute(res.data.pathPoints);
+    }else{
+      instance.proxy['$message'].warning(res['message']);
+    }
+  });
+};
+const close = (e) => {
+  clearRoute();
+  // baseDialog.value?.close();
+};
+const clearRoute = () => {
+  console.log('clearRoute');
+  routePlanning.clear();
+};
+</script>
+
+<template>
+  <Dialog :closeCallback="close" ref="baseDialog" title="路径规划" left="180px" top="100px" width="527px" class="RoutePlanning">
+    <template #content>
+      <!--      <div class="row" style="align-items: flex-start">-->
+      <!--        <div class="col start-col">-->
+      <!--          <button class="crossPoint" @mouseenter="svgHover[0] = true" @mouseleave="svgHover[0] = false">-->
+      <!--            <svg-icon class-name="add" :size="12" :color="svgHover[0] ? 'rgba(0, 255, 255, 1)' : 'rgba(255, 255, 255, 1)'"></svg-icon>-->
+      <!--            途径点-->
+      <!--          </button>-->
+      <!--          <button class="crossPoint" @mouseenter="svgHover[1] = true" @mouseleave="svgHover[1] = false" style="margin-left: 10px">-->
+      <!--            <svg-icon class-name="add" :size="12" :color="svgHover[1] ? 'rgba(0, 255, 255, 1)' : 'rgba(255, 255, 255, 1)'"></svg-icon>避让点-->
+      <!--          </button>-->
+      <!--        </div>-->
+      <!--      </div>-->
+      <div class="row">
+        <p class="lable-left-line">路径规划</p>
+      </div>
+      <div class="row">
+        <div class="col" style="flex: 0 0 50px">
+          <span class="label">起点</span>
+        </div>
+        <div class="col">
+          <span class="label">经度</span>
+          <input
+            class="input"
+            id="startLng"
+            type="number"
+            title=""
+            min="-180"
+            max="180"
+            @model="startLng"
+            v-model="startLng"
+            @change="changeStartLng"
+            @input="inputStartLng"
+          />
+        </div>
+        <div class="col">
+          <span class="label">纬度</span>
+          <input
+            class="input"
+            id="startLat"
+            type="number"
+            title=""
+            min="-90"
+            max="90"
+            @model="startLat"
+            v-model="startLat"
+            @change="changeStartLat"
+            @input="inputStartLat"
+          />
+        </div>
+        <div class="col" style="flex: 0 0 80px">
+          <button class="end-pick-btn" @click="pickStartPos" style="margin-left: 10px">拾取</button>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col" style="flex: 0 0 50px">
+          <span class="label">终点</span>
+        </div>
+        <div class="col">
+          <span class="label">经度</span>
+          <input
+            class="input"
+            id="endLng"
+            type="number"
+            title=""
+            min="-180"
+            max="180"
+            @model="endLng"
+            v-model="endLng"
+            @change="changeEndLng"
+            @input="inputEndLng"
+          />
+        </div>
+        <div class="col">
+          <span class="label">纬度</span>
+          <input
+            class="input"
+            id="endLat"
+            type="number"
+            title=""
+            min="-180"
+            max="180"
+            @model="endLat"
+            v-model="endLat"
+            @change="changeEndLat"
+            @input="inputEndLat"
+          />
+        </div>
+        <div class="col" style="flex: 0 0 80px">
+          <button class="end-pick-btn" @click="pickEndPos" style="margin-left: 10px">拾取</button>
+        </div>
+      </div>
+      <span class="custom-divider"></span>
+    </template>
+    <template #footer>
+      <button id="routeQuery" @click="routeQuery">
+        <svg class="icon-query"><use xlink:href="#yj-icon-query"></use></svg>查询
+      </button>
+      <button id="clearRoute" @click="clearRoute">
+        <svg class="icon-route"><use xlink:href="#yj-icon-route"></use></svg>清除路线
+      </button>
+      <button @click="close">取消</button>
+    </template>
+  </Dialog>
+</template>
+
+<style scoped lang="scss"></style>

src/views/largeScreen/components/newMap/dialog/addGroundText.vue

@@ -0,0 +1,80 @@
+<template>
+  <Dialog ref="baseDialog" title="贴地文字" left="calc(50% - 160px)" top="calc(50% - 120px)">
+    <template #content>
+      <textarea style="height: 76px; width: 270px" v-model="text"></textarea>
+    </template>
+    <template #footer>
+      <button @click="confirm">确定</button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, inject } from 'vue';
+import { addOtherSource } from '@/views/largeScreen/components/api';
+import Dialog from './baseDialog.vue';
+import { initMapData } from '../initMapData';
+import { useTreeNode } from '../treeNode';
+
+const { cusAddNodes } = useTreeNode();
+
+const baseDialog: any = ref(null);
+const eventBus: any = inject('bus');
+const text = ref('');
+// eventBus.on('openStandTextAdd', () => {
+//   baseDialog.value?.open();
+// });
+const open = () => {
+  baseDialog.value?.open();
+};
+const confirm = () => {
+  baseDialog.value?.close();
+  let name = text.value;
+  text.value = '';
+  let Draw = new window['YJ'].Draw.DrawPolyline(window['Earth1'], { number: 2 });
+  Draw.start(async (a, positions) => {
+    if (!positions || positions.length < 2) {
+      return;
+    }
+    let id = new window['YJ'].Tools().randomString();
+    let options: any = await initMapData(
+      'groundText',
+      {
+        id: id,
+        text: name,
+        positions: positions
+      },
+      null
+    );
+    delete options.host;
+    delete options.positions;
+    let selectedNodes = window['treeObj'].getSelectedNodes();
+    let node = selectedNodes && selectedNodes[selectedNodes.length - 1];
+    let parentId;
+    if (node) {
+      if (node.sourceType === 'directory') {
+        parentId = node.id;
+      } else {
+        parentId = node.parentId;
+      }
+    }
+    let params: any = {
+      id: id,
+      sourceName: name,
+      sourceType: 'groundText',
+      parentId: parentId,
+      // "treeIndex": 0,
+      params: options
+    };
+    addOtherSource(params);
+    params.params = JSON.stringify(params.params);
+    params.isShow = true;
+    cusAddNodes(window['treeObj'], params.parentId, [params]);
+  });
+};
+defineExpose({
+  open
+});
+</script>
+
+<style scoped lang="scss"></style>

src/views/largeScreen/components/newMap/dialog/addStandText.vue

@@ -0,0 +1,80 @@
+<template>
+  <Dialog ref="baseDialog" title="立体文字" left="calc(50% - 160px)" top="calc(50% - 120px)">
+    <template #content>
+      <textarea style="height: 76px; width: 270px" v-model="text"></textarea>
+    </template>
+    <template #footer>
+      <button @click="confirm">确定</button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, inject } from 'vue';
+import { addOtherSource } from '@/views/largeScreen/components/api';
+import Dialog from './baseDialog.vue';
+import { initMapData } from '../initMapData';
+import { useTreeNode } from '../treeNode';
+
+const { cusAddNodes } = useTreeNode();
+const eventBus: any = inject('bus');
+
+const baseDialog: any = ref(null);
+const text = ref('');
+
+const open = () => {
+  baseDialog.value?.open();
+};
+const confirm = () => {
+  baseDialog.value?.close();
+  let name = text.value;
+  text.value = '';
+  let Draw = new window['YJ'].Draw.DrawPolyline(window['Earth1']);
+  Draw.start(async (a, positions) => {
+    if (!positions || positions.length < 2) {
+      return;
+    }
+    let id = new window['YJ'].Tools().randomString();
+    let options: any = await initMapData(
+      'standText',
+      {
+        id: id,
+        name: name,
+        text: name,
+        positions: positions
+      },
+      null
+    );
+    delete options.host;
+    console.log('options', options);
+    let selectedNodes = window['treeObj'].getSelectedNodes();
+    let node = selectedNodes && selectedNodes[selectedNodes.length - 1];
+    let parentId;
+    if (node) {
+      if (node.sourceType === 'directory') {
+        parentId = node.id;
+      } else {
+        parentId = node.parentId;
+      }
+    }
+
+    let params: any = {
+      id: id,
+      sourceName: name,
+      sourceType: 'standText',
+      parentId: parentId,
+      // "treeIndex": 0,
+      params: options
+    };
+    addOtherSource(params);
+    params.params = JSON.stringify(params.params);
+    params.isShow = true;
+    cusAddNodes(window['treeObj'], params.parentId, [params]);
+  });
+};
+defineExpose({
+  open
+});
+</script>
+
+<style scoped lang="scss"></style>

src/views/largeScreen/components/newMap/dialog/attackArrow.vue

@@ -0,0 +1,375 @@
+<template>
+  <Dialog ref="baseDialog" :title="title + '属性'" left="180px" top="100px" className="attackArrow"
+    :closeCallback="closeCallback">
+    <template #content>
+      <span class="custom-divider"></span>
+      <div class="div-item">
+        <div class="row" style="align-items: flex-start;">
+          <div class="col">
+            <span class="label">名称</span>
+            <input class="input" maxlength="40" type="text" v-model="entityOptions.name">
+          </div>
+          <div class="col" style="flex: 0 0 60%;">
+            <div class="row">
+              <div class="col input-select-unit-box">
+                <span class="label" style="margin-right: 0px;">投影面积:</span>
+                <input class="input input-text" readonly type="text" v-model="area">
+                <el-select v-model="areaUnit">
+                  <el-option label="平方米" value="m2"></el-option>
+                  <el-option label="平方千米" value="km2"></el-option>
+                  <el-option label="亩" value="mu"></el-option>
+                  <el-option label="公顷" value="ha"></el-option>
+                </el-select>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col">
+            <span class="label">动画时长</span>
+            <div class="input-number input-number-unit-3">
+              <input class="input" type="number" title="" min="500" max="9999999" v-model="entityOptions.spreadTime">
+              <span class="unit">ms</span>
+              <span class="arrow"></span>
+            </div>
+          </div>
+          <div class="col" style="flex: 0 0 60%;">
+            <div class="row">
+              <div class="col">
+                <span class="label">动画</span>
+                <input class="btn-switch" type="checkbox" v-model="entityOptions.spreadState">
+              </div>
+              <div class="col">
+                <span class="label">动画重复</span>
+                <input class="btn-switch" type="checkbox" v-model="entityOptions.loop">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="div-item">
+        <div class="row">
+          <el-tabs v-model="activeName">
+            <!-- <el-tab-pane label="属性信息" name="1">
+              <attribute :entityOptions="entityOptions"></attribute>
+            </el-tab-pane> -->
+            <el-tab-pane label="空间信息" name="2">
+              <div class="row">
+                <div class="col height-mode-box">
+                  <span class="label" style="flex: 0 0 56px;">高度模式</span>
+                  <el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px"
+                    v-model="heightMode" @change="heightModeChange" placeholder="请选择">
+                    <el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key">
+                    </el-option>
+                  </el-select>
+                </div>
+                <div class="col">
+                  <span class="label">Z值统一增加</span>
+                  <div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }">
+                    <input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height">
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                  </div>
+                  <button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm"
+                    :disabled="heightMode == 2">应用</button>
+                </div>
+              </div>
+              <div class="row">
+                <div class="table spatial-info-table">
+                  <div class="table-head">
+                    <div class="tr">
+                      <div class="th"></div>
+                      <div class="th">经度（X）</div>
+                      <div class="th">纬度（Y）</div>
+                      <div class="th">高度（Z）</div>
+                    </div>
+                  </div>
+                  <div class="table-body">
+                    <div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
+                      <div class="td">{{ i + 1 }}</div>
+                      <div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
+                        <input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
+                          v-model="item.lng" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lng'">
+                        <span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span>
+                      </div>
+                      <div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
+                        <input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number"
+                          v-model="item.lat" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lat'">
+                        <span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span>
+                      </div>
+                      <div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
+                        <input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
+                          v-model="entityOptions.height" min="-9999999" max="999999999"
+                          v-if="activeTd.index == i && activeTd.name == 'alt'">
+                        <span style="pointer-events: none;" v-else>{{ (entityOptions.height).toFixed(2) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="面风格" name="3">
+              <div class="row">
+                <div class="col">
+                  <span class="label">面颜色</span>
+                  <div class="color" ref="colorRef"></div>
+                </div>
+                <div class="col">
+                  <span class="label">描边颜色</span>
+                  <div class="lineColor" ref="lineColorRef"></div>
+                </div>
+                <div class="col">
+                  <span class="label">描边宽度</span>
+                  <div class="input-number input-number-unit-2">
+                    <input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth">
+                    <span class="unit">px</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="标签风格" name="4">
+              <labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+      <span class="custom-divider"></span>
+    </template>
+    <template #footer>
+      <div style="position: absolute; left: 24px; display: flex;">
+        <button @click="nodeEdit"><svg class="icon-edit">
+            <use xlink:href="#yj-icon-edit"></use>
+          </svg>二次编辑</button>
+        <button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
+            <use xlink:href="#yj-icon-py"></use>
+          </svg>平移</button>
+      </div>
+      <button @click="remove">删除</button>
+      <button @click="confirm">确定</button>
+      <button @click="close">关闭</button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { inject } from "vue";
+import { updateInfo } from '@/views/largeScreen/components/api';
+import Dialog from './baseDialog.vue'
+import attribute from './attribute.vue'
+import labelStyle from './labelStyle.vue'
+import { useTreeNode } from '../treeNode'
+
+const { cusUpdateNode } = useTreeNode()
+
+const title = ref('箭头')
+const baseDialog: any = ref(null);
+const eventBus: any = inject("bus");
+const options = ref({});
+const colorRef = ref(null)
+const lineColorRef = ref(null)
+// eventBus.on("openPolygonEdit", () => {
+//   baseDialog.value?.open()
+// });
+
+const area = ref(0)
+const areaUnit = ref('m2')
+const height = ref(10)
+const heightModeData = ref([
+  {
+    name: '海拔高度',
+    value: '海拔高度',
+    key: 0
+  },
+  {
+    name: '相对地表',
+    value: '相对地表',
+    key: 1
+  },
+  {
+    name: '依附模型',
+    value: '依附模型',
+    key: 2
+  }
+])
+
+const activeName = ref('2')
+const activeTd = ref({
+  index: -1,
+  name: ''
+})
+const positions = ref([])
+const heightMode = ref(0)
+const entityOptions: any = ref({});
+let originalOptions: any
+let that: any
+
+const open = async (id: any, type: any) => {
+  if(type && type === 'pincerArrow') {
+    title.value = '双箭头'
+  }
+  that = window['Earth1'].entityMap.get(id)
+  originalOptions = structuredClone(that.options)
+  entityOptions.value = that
+  heightMode.value = entityOptions.value.heightMode
+  area.value = entityOptions.value.areaByMeter
+  positions.value = structuredClone(that.options.positions)
+  that.areaChangeCallBack = () => {
+    switch (areaUnit.value) {
+      case 'm2'://平方米
+        area.value = entityOptions.value.areaByMeter
+        break
+      case 'km2'://平方千米
+        area.value = Number((entityOptions.value.areaByMeter / 1000000).toFixed(8))
+        break
+      case 'mu'://亩
+        area.value = Number(
+          (entityOptions.value.areaByMeter / 666.6666667).toFixed(4)
+        )
+        break
+      case 'ha'://公顷
+        area.value = Number((entityOptions.value.areaByMeter / 10000).toFixed(6))
+        break
+      default:
+        area.value = entityOptions.value.areaByMeter
+    }
+  }
+  let spreadState = entityOptions.value.spreadState
+  heightModeChange(heightMode.value)
+  setTimeout(() => {
+    entityOptions.value.spreadState = spreadState
+  }, 50);
+  baseDialog.value?.open()
+
+  await nextTick()
+  let colorPicker = new window['YJColorPicker']({
+    el: colorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.color,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: color => {
+      entityOptions.value.color = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.color = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  let linecolorPicker = new window['YJColorPicker']({
+    el: lineColorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.lineColor,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: color => {
+      entityOptions.value.lineColor = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.lineColor = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+}
+
+const heightModeChange = (val) => {
+  that.heightMode = heightMode.value
+}
+
+const heightConfirm = () => {
+  if (entityOptions.value.operate.positionEditing) {
+    that.positionEditing = false
+    entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
+  }
+  else {
+    that.closeNodeEdit(this)
+    that.heightMode = that.heightMode
+    setTimeout(() => {
+      entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
+    }, 100);
+  }
+}
+const inputDblclick = async (event, i, anme) => {
+  if (heightMode.value == 2) {
+    return
+  }
+  activeTd.value = {
+    index: i,
+    name: anme
+  }
+  await nextTick()
+  let inputElm = event.target.getElementsByClassName('input')[0]
+  if (inputElm) {
+    inputElm.focus()
+  }
+}
+const inputBlurCallBack = (event, i, name, digit = 2) => {
+  activeTd.value = {
+    index: -1,
+    name: ''
+  }
+}
+
+const translate = () => {
+  entityOptions.value.spreadState = false
+  that.openPositionEditing(() => {
+    entityOptions.value.options.positions = structuredClone(that.options.positions)
+  })
+}
+
+const closeCallback = () => {
+  entityOptions.value.originalOptions = structuredClone(originalOptions)
+  that.positionEditing = false
+  entityOptions.value.closeNodeEdit()
+  entityOptions.value.reset()
+  // eventBus.emit("destroyComponent")
+}
+
+const nodeEdit = () => {
+  entityOptions.value.spreadState = false
+  that.nodeEdit((e, positions, areaByMeter) => {
+    entityOptions.value.options.positions = structuredClone(positions)
+  })
+}
+
+const confirm = () => {
+  originalOptions = structuredClone(that.options)
+  let params = structuredClone(that.options)
+  baseDialog.value?.close()
+  delete params.host
+  let params2 = {
+    "id": params.id,
+    "sourceName": params.name,
+    "params": params,
+    "isShow": params.show ? 1 : 0,
+  }
+  updateInfo(params2)
+  cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
+}
+const close = () => {
+  baseDialog.value?.close()
+}
+
+watch(
+  () => areaUnit.value,
+  (val) => {
+    if ((entityOptions.value.areaByMeter || entityOptions.value.areaByMeter == 0) && that) {
+      that.areaChangeCallBack()
+    }
+  },
+  { immediate: true }
+);
+
+const remove = () => {
+  that.remove()
+  close()
+}
+
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/largeScreen/components/newMap/dialog/attribute.vue

@@ -0,0 +1,439 @@
+<template>
+  <div class="attribute">
+    <div class="row">
+      <div class="col attribute-select-box">
+        <span class="label" style="line-height: 32px">内容类型</span>
+        <el-select style="width: 175px" v-model="attributeType" @change="attributeChange" placeholder="请选择">
+          <el-option v-for="item in attributeSelect" :key="item.key" :label="item.name" :value="item.key">
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+    <div class="attribute-content attribute-content-richText" v-show="attributeType === 'richText'">
+      <div class="row">
+        <div class="col">
+          <span class="label">编辑内容</span>
+          <button @click="openRichTextEditor">打开文本编辑器</button>
+        </div>
+      </div>
+    </div>
+    <div class="row attribute-content attribute-content-link" v-show="attributeType === 'link'">
+      <div class="col">
+        <span class="label">添加链接</span>
+        <div style="flex: 1; position: relative">
+          <input class="input link_add" type="text" v-model="addlinkInput" />
+          <i class="link_add_btn" @click="_addLink"></i>
+        </div>
+      </div>
+    </div>
+    <div class="attribute-content attribute-content-link" v-show="attributeType === 'link'">
+      <div class="table">
+        <div class="table-head">
+          <div class="tr">
+            <div class="th">名称</div>
+            <div class="th">链接</div>
+            <div class="th">操作</div>
+          </div>
+        </div>
+        <div class="table-body" v-if="attribute.link && attribute.link.content && attribute.link.content.length > 0">
+          <div class="tr" v-for="(item, index) in attribute.link.content">
+            <div class="td" v-if="linkEditActive.index === index">
+              <input class="input" type="text" v-model="linkEditActive.name" />
+            </div>
+            <div class="td" v-else>{{ item.name }}</div>
+            <div class="td" v-if="linkEditActive.index === index">
+              <textarea class="input link-edit" type="text" v-model="linkEditActive.url"></textarea>
+            </div>
+            <div class="td" v-else>{{ item.url }}</div>
+            <div class="td" v-if="linkEditActive.index === index">
+              <button @click="linkConfirmEdit(index)">确认</button>
+              <button @click="linkCancelEdit">取消</button>
+            </div>
+            <div class="td" v-else>
+              <button @click="linkEdit(index, item)">编辑</button>
+              <button @click="linkDelete(index)">删除</button>
+            </div>
+          </div>
+        </div>
+        <div class="table-empty" v-else>
+          <div class="empty-img"></div>
+          <p>暂无数据</p>
+        </div>
+      </div>
+    </div>
+    <div class="attribute-content attribute-content-camera" v-show="attributeType === 'camera'">
+      <div class="row">
+        <div class="col">
+          <span class="label">编辑内容</span>
+          <input class="input" type="text" v-model="cameraName" style="width: 100px" />
+          <button class="select btn" @click="cameraSelect">搜索</button>
+        </div>
+      </div>
+      <div>
+        <div class="table camera-table">
+          <div class="table-head">
+            <div class="tr">
+              <div class="th">操作</div>
+              <div class="th">设备名称</div>
+              <div class="th" style="width: 80px; flex: 0 80px; min-width: 80px">设备类型</div>
+              <div class="th" style="width: 126px; flex: 0 126px; min-width: 126px">设备IP</div>
+              <div class="th" style="width: 80px; flex: 0 80px; min-width: 80px">设备端口</div>
+              <div class="th" style="width: 80px; flex: 0 80px; min-width: 80px">用户名</div>
+              <div class="th">密码</div>
+            </div>
+          </div>
+          <div class="table-body" style="display: none">
+            <div class="tr">
+              <div class="td">
+                <input type="checkbox" value="2" />
+                <span>绑定</span>
+              </div>
+              <div class="td">设备名称</div>
+              <div class="td">设备类型</div>
+              <div class="td">设备IP</div>
+              <div class="td">设备端口</div>
+              <div class="td">用户名</div>
+              <div class="td">密码</div>
+            </div>
+          </div>
+          <div class="table-empty">
+            <div class="empty-img"></div>
+            <p>暂无数据</p>
+          </div>
+        </div>
+      </div>
+      <div class="" row>
+        <ul class="pagination"></ul>
+      </div>
+    </div>
+    <div class="attribute-content attribute-content-isc" v-show="attributeType === 'isc'">
+      <!-- <div class="row">
+                    <div class="col">
+                        <span class="label">编辑内容</span>
+                        <input class="input" type="text" @model="ISCName" style="width: 100px;">
+                        <button class="select btn" @click="ISCSelect">搜索</button>
+                    </div>
+                </div> -->
+      <div>
+        <div class="table isc-table">
+          <div class="table-head">
+            <div class="tr">
+              <div class="th" style="width: 74px; flex: 0 74px; min-width: 74px">操作</div>
+              <div class="th">设备名称</div>
+              <div class="th" style="width: 180px; flex: 0 180px; min-width: 180px">设备状态</div>
+            </div>
+          </div>
+          <div class="table-body" style="display: none">
+            <div class="tr">
+              <div class="td">
+                <input type="checkbox" value="2" />
+                <span>绑定</span>
+              </div>
+              <div class="td">设备名称</div>
+              <div class="td" style="width: 180px; flex: 0 180px; min-width: 180px">设备状态</div>
+            </div>
+          </div>
+          <div class="table-empty">
+            <div class="empty-img"></div>
+            <p>暂无数据</p>
+          </div>
+        </div>
+      </div>
+      <div class="" row>
+        <ul class="pagination"></ul>
+      </div>
+    </div>
+    <div class="row attribute-content attribute-content-vr" v-show="attributeType === 'vr'">
+      <div class="col">
+        <span class="label">添加链接</span>
+        <div style="flex: 1; position: relative">
+          <input class="input vr_add" type="text" v-model="addvrInput" />
+          <i class="vr_add_btn" @click="_addRr"></i>
+        </div>
+      </div>
+    </div>
+    <div class="attribute-content attribute-content-vr" v-show="attributeType === 'vr'">
+      <div class="table">
+        <div class="table-head">
+          <div class="tr">
+            <div class="th">名称</div>
+            <div class="th">链接</div>
+            <div class="th">操作</div>
+          </div>
+        </div>
+        <div class="table-body" v-if="attribute.vr && attribute.vr.content && attribute.vr.content.length > 0">
+          <div class="tr" v-for="(item, index) in attribute.vr.content">
+            <div class="td" v-if="vrEditActive.index === index">
+              <input class="input" type="text" v-model="vrEditActive.name" />
+            </div>
+            <div class="td" v-else>{{ item.name }}</div>
+            <div class="td" v-if="vrEditActive.index === index">
+              <textarea class="input link-edit" type="text" v-model="vrEditActive.url"></textarea>
+            </div>
+            <div class="td" v-else>{{ item.url }}</div>
+            <div class="td" v-if="vrEditActive.index === index">
+              <button @click="vrConfirmEdit(index)">确认</button>
+              <button @click="vrCancelEdit">取消</button>
+            </div>
+            <div class="td" v-else>
+              <button @click="vrEdit(index, item)">编辑</button>
+              <button @click="vrDelete(index)">删除</button>
+            </div>
+          </div>
+        </div>
+        <div class="table-empty" v-else>
+          <div class="empty-img"></div>
+          <p>暂无数据</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { inject } from 'vue'
+
+let ipcRenderer;
+if (window && window.process && window.process.type === 'renderer') {
+  ipcRenderer = require('electron').ipcRenderer
+}
+
+const baseDialog: any = ref(null)
+const eventBus: any = inject('bus')
+const attributeType = ref('richText')
+
+const props = defineProps({
+  entityOptions: {
+    type: Object,
+    default: {}
+  }
+})
+
+const attribute = ref(props.entityOptions.options.attribute)
+if(!props.entityOptions.options.richTextContent) 
+{
+  props.entityOptions.options.richTextContent = ''
+}
+const richTextContent = ref(props.entityOptions.options.richTextContent)
+
+let attributeSelect = ref([
+  {
+    name: '富文本',
+    value: '富文本',
+    key: 'richText'
+  },
+  {
+    name: '链接',
+    value: '链接',
+    key: 'link'
+  }
+])
+
+if (props.entityOptions.type === 'BillboardObject') {
+  attributeSelect.value.push(
+    // {
+    //   name: 'IP摄像头',
+    //   value: 'IP摄像头',
+    //   key: 'camera'
+    // },
+    // {
+    //   name: 'ISC摄像头',
+    //   value: 'ISC摄像头',
+    //   key: 'isc'
+    // },
+    // {
+    //   name: '传感器',
+    //   value: '传感器',
+    //   key: 'sensor'
+    // },
+    {
+      name: '全景图',
+      value: '全景图',
+      key: 'vr'
+    },
+    // {
+    //   name: '物资',
+    //   value: '物资',
+    //   key: 'goods'
+    // },
+  )
+}
+
+
+
+const cameraName = ref('')
+const addlinkInput = ref('')
+const addvrInput = ref('')
+const linkEditActive: any = ref({})
+const vrEditActive: any = ref({})
+
+const openRichTextEditor = () => {
+  eventBus.emit('openRichText', props.entityOptions.name, richTextContent.value, (val: any) => {
+    richTextContent.value = val
+    props.entityOptions.options.richTextContent = richTextContent.value
+  })
+}
+const _addLink = async () => {
+  if (addlinkInput.value) {
+    let link = {
+      name: '链接',
+      url: addlinkInput.value
+    }
+    attribute.value.link.content.push(link)
+    addlinkInput.value = ''
+  } else {
+    const options = {
+      properties: ['openFile', 'multiSelections'], // 允许选择多个文件
+      filters: [
+        { name: '图片', extensions: ['jpg', 'jpeg', 'png', 'webp', 'svg', 'bmp'] },
+        { name: '音视频', extensions: ['mp4', 'mp3'] },
+        { name: 'pdf', extensions: ['pdf'] },
+      ]
+    };
+    if (ipcRenderer) {
+      ipcRenderer.send('open-directory-dialog', options);
+      // 监听主进程返回的结果
+      ipcRenderer.once('selectedItem', (event, filePaths) => {
+        if (filePaths.length > 0) {
+          filePaths.forEach((item) => {
+            attribute.value.link.content.push({
+              name: '链接',
+              url: item
+            })
+          })
+        }
+      });
+    }
+    else {
+      // const pickerOpts = {
+      //   types: [
+      //     {
+      //       description: '图片',
+      //       accept:
+      //       {
+      //         'image/jpg': ['.jpg', '.jpeg'],
+      //         'image/gif': ['.gif'],
+      //         'image/webp': ['.webp'],
+      //         'image/png': ['.png'],
+      //         'image/svg+xml': ['.svg'],
+      //         'image/x-ms-bmp': ['.bmp'],
+      //       }
+      //     },
+      //     {
+      //       description: '音视频',
+      //       accept:
+      //       {
+      //         'video/mp4': ['.mp4'],
+      //         'audio/mpeg': ['.mp3'],
+      //       }
+      //     },
+      //     {
+      //       description: 'pdf',
+      //       accept:
+      //       {
+      //         'application/pdf': ['.pdf'],
+      //       }
+      //     }
+      //   ],
+      //   excludeAcceptAllOption: true,
+      //   multiple: true
+      // };
+      // if ((window as any).showOpenFilePicker) {
+      //   const fileHandles = await (window as any).showOpenFilePicker(pickerOpts);
+      //   // const files = await Promise.all(fileHandles.map(fileHandle => fileHandle.getFile()));
+      //   // const dataTransfer = new DataTransfer();
+      //   // handleFileImgInput(files, parentId, 'vr')
+      // }
+    }
+
+    // $sendElectronChanel('open-directory-dialog', (a: any,b: any)=>{
+    //   console.log(a,b)
+    // })
+
+  }
+}
+const linkEdit = (index: any, item: { name: any; url: any; }) => {
+  let active = {
+    index: index,
+    name: item.name,
+    url: item.url
+  }
+  linkEditActive.value = active
+}
+const linkDelete = (index: any) => {
+  attribute.value.link.content.splice(index, 1)
+}
+const linkConfirmEdit = (index: string | number) => {
+  attribute.value.link.content[index] = {
+    name: linkEditActive.value.name,
+    url: linkEditActive.value.url
+  }
+  linkEditActive.value = {}
+}
+const linkCancelEdit = () => {
+  linkEditActive.value = {}
+}
+const cameraSelect = () => { }
+const _addRr = () => {
+  if (addvrInput.value) {
+    let link = {
+      name: '全景图',
+      url: addvrInput.value
+    }
+    attribute.value.vr.content.push(link)
+    addvrInput.value = ''
+  } else {
+    const options = {
+      properties: ['openFile', 'multiSelections'],
+      filters: [
+        { name: '全景图', extensions: ['jpg'] },
+      ]
+    };
+    ipcRenderer.send('open-directory-dialog', options);
+    // 监听主进程返回的结果
+    ipcRenderer.once('selectedItem', (event, filePaths) => {
+      if (filePaths.length > 0) {
+        filePaths.forEach((item) => {
+          attribute.value.link.content.push({
+            name: '全景图',
+            url: item
+          })
+        })
+      }
+    });
+    // document.getElementById('fileInputlink')?.click()
+    // eventBus.emit('defineClickAddLinkCb', (list: any[]) => {
+    //   list.forEach((item: { previewUrl: any; }) => {
+    //     attribute.value.vr.content.push({
+    //       name: '全景图',
+    //       url: item.previewUrl
+    //     })
+    //   })
+    // })
+  }
+}
+
+const vrEdit = (index: any, item: { name: any; url: any; }) => {
+  let active = {
+    index: index,
+    name: item.name,
+    url: item.url
+  }
+  vrEditActive.value = active
+}
+const vrDelete = (index: any) => {
+  attribute.value.vr.content.splice(index, 1)
+}
+const vrConfirmEdit = (index: string | number) => {
+  attribute.value.vr.content[index] = vrEditActive.value
+  vrEditActive.value = {}
+}
+const vrCancelEdit = () => {
+  vrEditActive.value = {}
+}
+const goodsFilter = () => { }
+const attributeChange = () => { }
+</script>
+
+<style scoped lang="scss"></style>

src/views/largeScreen/components/newMap/dialog/baseDialog.vue

@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { ref, watch, onMounted, nextTick } from 'vue';
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: String,
+    default: ''
+  },
+  height: {
+    type: String,
+    default: ''
+  },
+  top: {
+    type: String,
+    default: ''
+  },
+  left: {
+    type: String,
+    default: ''
+  },
+  id: {
+    type: String,
+    default: ''
+  },
+  bodyId: {
+    type: String,
+    default: ''
+  },
+  clearAnimation: {
+    type: Boolean,
+    default: false
+  },
+  fix: {
+    type: Boolean,
+    default: false
+  },
+  className: {
+    type: String
+  },
+  nofold: {
+    type: Boolean,
+    default: false
+  },
+  isfold: {
+    type: Boolean,
+    default: false
+  },
+  noClose: {
+    type: Boolean,
+    default: false
+  },
+  show: {
+    type: Boolean,
+    default: false
+  },
+  closeCallback: {
+    type: Function,
+    default: () => {}
+  }
+});
+// 内部状态
+const first = ref(false);
+const dialogVisible = ref(false);
+const FontChart = ref(undefined);
+const callback = ref(undefined);
+const baseDialog = ref(null);
+const titleBox = ref(null);
+const dialogContent = ref(null);
+const tableData = ref([]);
+// 方法定义
+const open = (data) => {
+  if (!first.value) {
+    first.value = true;
+    dialogVisible.value = true;
+    nextTick(() => {
+      moveDiv();
+    });
+  }
+  dialogVisible.value = true;
+  nextTick(() => {
+    // setTimeout(() => {
+    //   openPosition()
+    // }, 0)
+    if (baseDialog.value) {
+      baseDialog.value.style.width = props.width;
+      baseDialog.value.style.height = props.height;
+      baseDialog.value.style.top = props.top;
+      baseDialog.value.style.left = props.left;
+      baseDialog.value.style.position = props.fix ? 'fixed' : 'absolute';
+    }
+  });
+};
+
+const close = () => {
+  dialogVisible.value = false;
+  if (props.clearAnimation) {
+    // 假设mapService是全局可用的
+    // window.mapService?.removeAnimation();
+  }
+  callback.value && callback.value();
+
+  props.closeCallback && props.closeCallback();
+};
+
+const moveDiv = () => {
+  let x = 0;
+  let y = 0;
+  let l = 0;
+  let t = 0;
+
+  const oClickDiv = baseDialog.value;
+  const oMoveDiv = titleBox.value;
+  if (oClickDiv) {
+    // console.log(oMoveDiv);
+    oMoveDiv.onmousedown = (e) => {
+      // 获取对话框尺寸
+      const oMoveDivHeight = baseDialog.value.offsetHeight;
+      const oMoveDivWidth = baseDialog.value.offsetWidth;
+
+      x = e.clientX;
+      y = e.clientY;
+
+      const leftPx = window.getComputedStyle(baseDialog.value).left;
+      const topPx = window.getComputedStyle(baseDialog.value).top;
+
+      l = parseFloat(leftPx);
+      t = parseFloat(topPx);
+
+      // 获取视口大小
+      const container = props.bodyId ? document.getElementById(props.bodyId) : document.body;
+      const windowHeight = container.clientHeight;
+      const windowWidth = container.clientWidth;
+
+      // 鼠标移动事件处理
+      const handleMouseMove = (e) => {
+        e.preventDefault();
+        const nx = e.clientX;
+        const ny = e.clientY;
+
+        // 计算新位置
+        let newLeft = nx - (x - l);
+        let newTop = ny - (y - t);
+
+        // 边界检查
+        if (newLeft < 0) {
+          newLeft = 0;
+        } else if (newLeft + oMoveDivWidth > windowWidth) {
+          newLeft = windowWidth - oMoveDivWidth;
+        }
+
+        if (newTop <= 0) {
+          newTop = 0;
+        } else if (newTop + oMoveDivHeight > windowHeight) {
+          newTop = windowHeight - oMoveDivHeight;
+        }
+
+        // 更新位置
+        if (baseDialog.value) {
+          baseDialog.value.style.left = newLeft + 'px';
+          baseDialog.value.style.top = newTop + 'px';
+          baseDialog.value.style.bottom = 'unset';
+          baseDialog.value.style.right = 'unset';
+        }
+      };
+
+      // 鼠标抬起事件处理
+      const handleMouseUp = () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+      };
+
+      // 添加事件监听
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    };
+  }
+};
+
+const openPosition = () => {
+  const oMoveDiv = baseDialog.value;
+  if (!oMoveDiv) return;
+
+  // 获取对话框尺寸
+  const oMoveDivHeight = oMoveDiv.offsetHeight;
+  const oMoveDivWidth = oMoveDiv.offsetWidth;
+
+  // 获取当前位置
+  const leftPx = parseFloat(window.getComputedStyle(oMoveDiv).left);
+  const topPx = parseFloat(window.getComputedStyle(oMoveDiv).top);
+
+  // 获取视口大小
+  const container = props.bodyId ? document.getElementById(props.bodyId) : document.body;
+  const windowHeight = container.clientHeight;
+  const windowWidth = container.clientWidth;
+
+  // 边界检查
+  let newLeft = leftPx;
+  let newTop = topPx;
+
+  if (newLeft < 0) {
+    newLeft = 0;
+  } else if (newLeft + oMoveDivWidth > windowWidth) {
+    newLeft = windowWidth - oMoveDivWidth;
+  }
+
+  if (newTop - 10 <= 0) {
+    newTop = -10;
+  } else if (newTop + oMoveDivHeight > windowHeight) {
+    newTop = windowHeight - oMoveDivHeight;
+  }
+
+  // 更新位置
+  oMoveDiv.style.left = newLeft + 'px';
+  oMoveDiv.style.top = newTop + 'px';
+};
+
+// 暴露公共方法
+defineExpose({
+  open,
+  close,
+  moveDiv,
+  openPosition
+});
+</script>
+
+<template>
+  <div class="YJ-custom-base-dialog" :class="className" ref="baseDialog" :id="id" v-if="dialogVisible" v-show="dialogVisible">
+    <div class="title-box" ref="titleBox">
+      <span class="title">{{ title }}</span
+      ><span class="close-box" @click="close"><span class="close"></span><i>✕</i></span>
+    </div>
+    <div class="content" style="padding: 0 24px 0 24px">
+      <div>
+        <slot name="content"></slot>
+      </div>
+    </div>
+    <div class="foot">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.YJ-custom-base-dialog {
+  ::v-deep .el-tabs {
+    width: 100%;
+    .el-tabs__item {
+      padding: 0 8px;
+      color: #fff;
+    }
+    .el-tabs__item:nth-child(2) {
+      padding-left: 0;
+    }
+    .el-tabs__item.is-active,
+    .el-tabs__item:hover {
+      color: #fff;
+    }
+    .el-tabs__active-bar {
+      background-color: rgb(0, 255, 255);
+    }
+    .el-tabs__nav-wrap:after {
+      background-color: rgba(204, 204, 204, 0.2);
+    }
+  }
+}
+</style>

src/views/largeScreen/components/newMap/dialog/billboardObject.vue

@@ -0,0 +1,450 @@
+<script setup lang="ts">
+import { ref, inject } from 'vue';
+import { updateInfo } from '@/views/largeScreen/components/api';
+import Dialog from './baseDialog.vue';
+import { initMapData } from '../initMapData';
+import { useTreeNode } from '../treeNode';
+const { cusUpdateNode, getSelectedNodes } = useTreeNode();
+const baseDialog: any = ref(null);
+const text = ref('');
+const entityOptions: any = ref({});
+const coordinate = ref('EPSG:4326');
+const x = ref();
+const y = ref();
+const z = ref();
+const heightMode = ref(0);
+const height = ref(0);
+
+let entity;
+let originalOptions;
+const open = async (id) => {
+  console.log('open');
+  console.log(id);
+  console.log(window['Earth1'].entityMap.get(id));
+  entity = window['Earth1'].entityMap.get(id);
+  originalOptions = structuredClone(entity.options);
+  entityOptions.value = entity;
+  x.value = entity.lng;
+  y.value = entity.lat;
+  z.value = entity.alt;
+  console.log('entityOptions', entityOptions);
+  baseDialog.value?.open();
+  await nextTick();
+};
+const translate = () => {
+  entity.openPositionEditing(() => {
+    changAlt();
+  });
+};
+const changeName = (e) => {
+  entityOptions.value.labelText = e.target.value;
+};
+const changAlt = () => {
+  heightModeChange(heightMode.value);
+  // coordinateChange();
+};
+const heightModeChange = (val) => {
+  switch (val) {
+    case 0:
+    case '0':
+      height.value = entityOptions.value.alt;
+      entityOptions.value.alt = entityOptions.value.alt;
+      break;
+    case 1:
+    case '1':
+      if (window['Earth1'].viewer.scene.terrainProvider.availability) {
+        window['Cesium']
+          .sampleTerrainMostDetailed(window['Earth'].viewer.scene.terrainProvider, [
+            window['Cesium'].Cartographic.fromDegrees(entityOptions.value.lng, entityOptions.value.lat)
+          ])
+          .then((position) => {
+            height.value = entityOptions.value.alt - Number(position[0].height.toFixed(2));
+          });
+      } else {
+        height.value = entityOptions.value.alt;
+      }
+      break;
+    case 2:
+    case '2':
+      break;
+    case 3:
+    case '3':
+      const objectsToExclude: any[] = [];
+      for (let [key, value] of window['Earth'].entityMap) {
+        if (value.type === 'RadarScanStereoscopic' && value.entity) {
+          objectsToExclude.push((value as any).entity);
+        }
+      }
+      entityOptions.value.getClampToHeight(entityOptions.value.options.position, objectsToExclude).then((h) => {
+        height.value = Number(h.toFixed(2));
+        entityOptions.value.alt = Number(h.toFixed(2));
+      });
+      break;
+  }
+  entity.heightMode = val;
+};
+const changLng = () => {
+  // projConvert();
+  // coordinateChange();
+};
+const changLat = () => {
+  // projConvert();
+  // coordinateChange();
+};
+const coordinateChange = () => {
+  let position = window['Earth1'].proj.convert(
+    [
+      {
+        x: entityOptions.value.lng,
+        y: entityOptions.value.lat,
+        z: entityOptions.value.alt
+      }
+    ],
+    'EPSG:4326',
+    coordinate.value
+  ).points;
+  x.value = position[0].x;
+  y.value = position[0].y;
+  z.value = position[0].z;
+};
+const confirm = () => {
+  originalOptions = structuredClone(entity.options);
+
+  let params = structuredClone(entity.options);
+  delete params.host;
+  let params2 = {
+    id: params.id,
+    sourceName: params.name,
+    params: params,
+    isShow: params.show ? 1 : 0
+  };
+  updateInfo(params2).then((res) => {
+    console.log('updateInfo', res);
+    baseDialog.value?.close();
+    if (res.code === 200) {
+      cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) });
+    }
+  });
+};
+const close = () => {
+  baseDialog.value?.close();
+};
+const closeCallback = () => {
+  entityOptions.value.originalOptions = structuredClone(originalOptions);
+  entity.positionEditing = false;
+  entity.reset();
+  // eventBus?.emit('destroyComponent');
+};
+
+defineExpose({
+  open,
+  close
+});
+</script>
+
+<template>
+  <Dialog ref="baseDialog" title="点标注" left="180px" top="100px" :className="'billboard-object'" :closeCallback="closeCallback">
+    <template #content>
+      <span class="custom-divider"></span>
+      <div class="div-item">
+        <div class="row">
+          <div class="col">
+            <span class="label" style="flex: unset">名称</span>
+            <input class="input" type="text" v-model="entityOptions.name" @change="changeName" />
+          </div>
+          <div class="col"></div>
+        </div>
+      </div>
+      <span class="custom-divider"></span>
+      <div class="div-item">
+        <div class="row">
+          <div style="width: 46%">
+            <div class="row">
+              <p class="lable-left-line">WGS84坐标</p>
+            </div>
+            <div class="row" style="margin-bottom: 5px">
+              <div class="col">
+                <span class="label">经度</span>
+                <input class="input" type="number" title="" min="-180" max="180" v-model="entityOptions.lng" @change="changLng" />
+              </div>
+            </div>
+            <div class="row" style="margin-bottom: 5px">
+              <div class="col">
+                <span class="label">纬度</span>
+                <input class="input" type="number" title="" min="-90" max="90" v-model="entityOptions.lat" @change="changLat" />
+              </div>
+            </div>
+            <div class="row">
+              <div class="col">
+                <span class="label">海拔高度</span>
+                <div class="input-number input-number-unit-1 alt-box" :class="{ disabled: heightMode == 2 || heightMode === 3 }">
+                  <input class="input" type="number" title="" min="-9999999" max="999999999" v-model="entityOptions.alt" @change="changAlt" />
+                  <span class="unit">m</span>
+                  <span class="arrow"></span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!--          <div style="width: 50%">
+            <div class="row coordinate-select-box">
+              <div class="lable-left-line">
+                转换坐标选择
+                <el-select
+                  class="input input-select coordinate-select"
+                  style="width: 155px; margin-left: 20px"
+                  v-model="coordinate"
+                  @change="coordinateChange"
+                  placeholder="请选择"
+                >
+                  <el-option v-for="item in epsg_map" :key="item.epsg" :label="item.name" :value="item.epsg"> </el-option>
+                </el-select>
+              </div>
+            </div>
+            <div class="row" style="margin-bottom: 5px">
+              <div class="col">
+                <span class="label">X轴:</span>
+                <input style="border: none; background: none" class="input convert-x" readonly v-model="x" />
+              </div>
+            </div>
+            <div class="row" style="margin-bottom: 5px">
+              <div class="col">
+                <span class="label">Y轴:</span>
+                <input style="border: none; background: none" class="input convert-y" readonly v-model="y" />
+              </div>
+            </div>
+            <div class="row">
+              <div class="col">
+                <span class="label">Z轴:</span>
+                <input style="border: none; background: none" class="input convert-z" readonly v-model="z" />
+              </div>
+            </div>
+          </div>-->
+        </div>
+      </div>
+      <!--  <span class="custom-divider"></span>
+      <div class="div-item">
+        <div class="row">
+          <div class="col" style="flex: 0 0 120px">
+            <span class="label">视野缩放</span>
+            <input class="btn-switch" type="checkbox" v-model="entityOptions.scaleByDistance" />
+          </div>
+          <div class="col">
+            <span class="label">最近距离</span>
+            <div class="input-number input-number-unit-1">
+              <input class="input" type="number" title="" min="1" max="99999999" v-model="entityOptions.near" />
+              <span class="unit">m</span>
+              <span class="arrow"></span>
+            </div>
+          </div>
+          <div class="col">
+            <span class="label">最远距离</span>
+            <div class="input-number input-number-unit-1">
+              <input class="input" type="number" title="" min="1" max="99999999" v-model="entityOptions.far" />
+              <span class="unit">m</span>
+              <span class="arrow"></span>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="属性信息" name="1">
+              <attribute :entityOptions="entityOptions"></attribute>
+            </el-tab-pane>
+            <el-tab-pane label="空间信息" name="2">
+              <div class="row">
+                <div class="col height-mode-box">
+                  <span class="label" style="flex: 0 0 56px">高度模式</span>
+                  <el-select
+                    class="input input-select height-mode-scelect"
+                    style="width: 155px; margin-left: 20px"
+                    v-model="heightMode"
+                    @change="heightModeChange"
+                    placeholder="请选择"
+                  >
+                    <el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key"> </el-option>
+                  </el-select>
+                </div>
+                <div class="col height-box" v-show="heightMode == 0 || heightMode == 1">
+                  <span class="label" style="flex: 0 0 56px">高度</span>
+                  <div class="input-number input-number-unit-1">
+                    <input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height" @change="changHeight" />
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col">
+                  <div class="YJ-custom-checkbox-box" style="display: flex; align-items: center; cursor: pointer" @click="formatChange(1)">
+                    <input type="checkbox" class="YJ-custom-checkbox" v-model="format1" />
+                    <span style="margin-left: 10px; margin-bottom: 1px; user-select: none">小数格式</span>
+                  </div>
+                </div>
+                <div class="col">
+                  <div class="YJ-custom-checkbox-box" style="display: flex; align-items: center; cursor: pointer" @click="formatChange(2)">
+                    <input type="checkbox" class="YJ-custom-checkbox" v-model="format2" />
+                    <span style="margin-left: 10px; margin-bottom: 1px; user-select: none">度分格式</span>
+                  </div>
+                </div>
+                <div class="col">
+                  <div class="YJ-custom-checkbox-box" style="display: flex; align-items: center; cursor: pointer" @click="formatChange(3)">
+                    <input type="checkbox" class="YJ-custom-checkbox" v-model="format3" />
+                    <span style="margin-left: 10px; margin-bottom: 1px; user-select: none">度分秒格式</span>
+                  </div>
+                </div>
+                <div class="col"></div>
+              </div>
+              <div class="row">
+                <div style="flex: 1">
+                  <div class="proj-input-box" v-show="format1">
+                    <div class="row">
+                      <div class="col">
+                        <span style="flex: 0 0 40px">经度</span>
+                        <input class="input lng" readonly :value="entityOptions.lng" />
+                      </div>
+                      <div class="col"></div>
+                    </div>
+                    <div class="row">
+                      <div class="col">
+                        <span style="flex: 0 0 40px">纬度</span>
+                        <input class="input lat" readonly :value="entityOptions.lat" />
+                      </div>
+                      <div class="col"></div>
+                    </div>
+                  </div>
+                  <div class="proj-input-box" style="width: 56%" v-show="format2">
+                    <div class="row">
+                      <div class="col" style="flex-direction: column">
+                        <div class="row" style="margin-bottom: 15px">
+                          <span style="flex: 0 0 40px">经度</span>
+                          <input class="input lng-dm-d" style="flex: 1" readonly :value="lngDmD" />
+                          <span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
+                          <input class="input lng-dm-m" style="flex: 1" readonly :value="lngDmM" />
+                          <span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
+                          <span class="top-line"></span>
+                        </div>
+                        <div class="row">
+                          <span style="flex: 0 0 40px">纬度</span>
+                          <input class="input lat-dm-d" style="flex: 1" readonly :value="latDmD" />
+                          <span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
+                          <input class="input lat-dm-m" style="flex: 1" readonly :value="latDmM" />
+                          <span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
+                          <span class="bottom-line"></span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="proj-input-box" style="width: 70%" v-show="format3">
+                    <div class="row">
+                      <div class="col" style="flex-direction: column">
+                        <div class="row" style="margin-bottom: 15px">
+                          <span style="flex: 0 0 40px">经度</span>
+                          <input class="input lng-dms-d" style="flex: 1" readonly :value="lngDmsD" />
+                          <span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
+                          <input class="input lng-dms-m" style="flex: 1" readonly :value="lngDmsM" />
+                          <span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
+                          <input class="input lng-dms-s" style="flex: 1" readonly :value="lngDmsS" />
+                          <span class="label" style="flex: 0 0 14px; margin: 0 10px">秒</span>
+                          <span class="top-line"></span>
+                        </div>
+                        <div class="row">
+                          <span style="flex: 0 0 40px">纬度</span>
+                          <input class="input lat-dms-d" style="flex: 1" readonly :value="latDmsD" />
+                          <span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
+                          <input class="input lat-dms-m" style="flex: 1" readonly :value="latDmsM" />
+                          <span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
+                          <input class="input lat-dms-s" style="flex: 1" readonly :value="latDmsS" />
+                          <span class="label" style="flex: 0 0 14px; margin: 0 10px">秒</span>
+                          <span class="bottom-line"></span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="标注风格" name="3">
+              <div>
+                <h4>图标设置</h4>
+                <div class="row" style="margin-bottom: 10px">
+                  <div class="col" style="flex: 0 0 80px">
+                    <span class="label" style="flex: none">显隐</span>
+                    <input class="btn-switch" type="checkbox" v-model="entityOptions.billboardShow" />
+                  </div>
+                  <div class="col" style="flex: 0 0 90px">
+                    <span class="label" style="flex: none">图标</span>
+                    <div class="image-box" @click="clickChangeImage">
+                      <img class="image" :src="entityOptions.billboardImage" alt="" />
+                    </div>
+                  </div>
+                  <div class="col" style="flex: 0 0 90px">
+                    <span class="label" style="flex: none">默认图标</span>
+                    <div class="image-box" @click="clickChangeDefaultImage">
+                      <img class="image" :src="entityOptions.billboardDefaultImage" alt="" />
+                    </div>
+                  </div>
+                  <div class="col">
+                    <span class="label">图标倍数</span>
+                    <div class="input-number input-number-unit-2">
+                      <input class="input" type="number" title="" min="0.1" max="99" v-model="entityOptions.billboardScale" />
+                      <span class="unit">倍</span>
+                      <span class="arrow"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <h4>文字设置</h4>
+                <div class="row">
+                  <div class="col" style="flex: 0 0 80px">
+                    <span class="label" style="flex: none">显隐</span>
+                    <input class="btn-switch" type="checkbox" v-model="entityOptions.labelShow" />
+                  </div>
+                  <div class="col font-select-box">
+                    <span class="label" style="flex: none">字体选择</span>
+                    <el-select class="input input-select font-select" style="width: 100px" v-model="entityOptions.labelFontFamily">
+                      <el-option v-for="item in fontList" :key="item.key" :label="item.name" :value="item.key"> </el-option>
+                    </el-select>
+                  </div>
+                  <div class="col">
+                    <span class="label">文字大小</span>
+                    <div class="input-number input-number-unit-2">
+                      <input class="input" type="number" title="" min="1" max="99" v-model="entityOptions.labelFontSize" style="width: 70px" />
+                      <span class="unit">px</span>
+                      <span class="arrow"></span>
+                    </div>
+                  </div>
+                  <div class="col">
+                    <span class="label">文字颜色</span>
+                    <div class="labelColor" ref="labelColorRef"></div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>-->
+    </template>
+    <template #footer>
+      <div style="position: absolute; left: 24px; display: flex">
+        <!--        <button @click="updateHeight">
+          <svg class="icon-updateheigh">
+            <use xlink:href="#yj-icon-updateheight"></use></svg
+          >更新高程
+        </button>-->
+        <button style="margin-left: 10px" @click="translate">平移</button>
+      </div>
+      <!--      <button @click="remove">删除</button>-->
+      <button @click="confirm">确定</button>
+      <button @click="close">关闭</button>
+    </template>
+  </Dialog>
+</template>
+
+<style scoped lang="scss">
+.billboard-object {
+  .YJ-custom-checkbox {
+    pointer-events: none;
+  }
+}
+</style>

src/views/largeScreen/components/newMap/dialog/curvelineObject.vue

@@ -0,0 +1,620 @@
+<template>
+  <Dialog
+    ref="baseDialog"
+    title="曲线标注"
+    left="180px"
+    top="100px"
+    className="polyline"
+    :closeCallback="closeCallback"
+  >
+    <template #content>
+      <span class="custom-divider"></span>
+      <div class="div-item">
+        <div class="row" style="align-items: flex-start">
+          <div class="col">
+            <span class="label">名称</span>
+            <input class="input" maxlength="40" type="text" v-model="entityOptions.name" />
+          </div>
+          <div class="col" style="flex: 0 0 56%">
+            <div>
+              <div class="row">
+                <div class="col input-select-unit-box">
+                  <el-select v-model="entityOptions.wordsName">
+                    <el-option label="空间长度" value="0"></el-option>
+                    <el-option label="投影长度" value="1"></el-option>
+                    <el-option label="地表长度" value="2"></el-option>
+                  </el-select>
+                  <input v-model="length" class="input-text" readonly />
+                  <el-select v-model="lengthUnit">
+                    <el-option label="米" value="m"></el-option>
+                    <el-option label="千米" value="km"></el-option>
+                  </el-select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="div-item">
+        <div class="row">
+          <el-tabs v-model="activeName">
+            <!-- <el-tab-pane label="属性信息" name="1">
+              <attribute :entityOptions="entityOptions"></attribute>
+            </el-tab-pane> -->
+            <el-tab-pane label="空间信息" name="2">
+              <div class="row">
+                <div class="col height-mode-box">
+                  <span class="label" style="flex: 0 0 56px">高度模式</span>
+                  <el-select
+                    class="input input-select height-mode-scelect"
+                    style="width: 155px; margin-left: 20px"
+                    v-model="heightMode"
+                    @change="heightModeChange"
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in heightModeData"
+                      :key="item.key"
+                      :label="item.name"
+                      :value="item.key"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+                <div class="col">
+                  <span class="label">Z值统一增加</span>
+                  <div
+                    class="input-number input-number-unit-1 height-box"
+                    :class="{ disabled: heightMode == 2 }"
+                  >
+                    <input
+                      class="input height"
+                      type="number"
+                      title=""
+                      min="-9999999"
+                      max="999999999"
+                      v-model="height"
+                    />
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                  </div>
+                  <button
+                    class="confirm height-confirm"
+                    style="margin-left: 5px"
+                    @click="heightConfirm"
+                    :disabled="heightMode == 2"
+                  >
+                    应用
+                  </button>
+                </div>
+              </div>
+              <div class="row">
+                <div class="table spatial-info-table">
+                  <div class="table-head">
+                    <div class="tr">
+                      <div class="th"></div>
+                      <div class="th">经度（X）</div>
+                      <div class="th">纬度（Y）</div>
+                      <div class="th">高度（Z）</div>
+                    </div>
+                  </div>
+                  <div class="table-body">
+                    <div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
+                      <div class="td">{{ i + 1 }}</div>
+                      <div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
+                        <input
+                          class="input"
+                          @blur="inputBlurCallBack($event, i, 'lng', 8)"
+                          type="number"
+                          v-model="item.lng"
+                          min="-180"
+                          max="180"
+                          v-if="activeTd.index == i && activeTd.name == 'lng'"
+                        />
+                        <span style="pointer-events: none" v-else>{{ item.lng.toFixed(8) }}</span>
+                      </div>
+                      <div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
+                        <input
+                          class="input"
+                          @blur="inputBlurCallBack($event, i, 'lat', 8)"
+                          type="number"
+                          v-model="item.lat"
+                          min="-180"
+                          max="180"
+                          v-if="activeTd.index == i && activeTd.name == 'lat'"
+                        />
+                        <span style="pointer-events: none" v-else>{{ item.lat.toFixed(8) }}</span>
+                      </div>
+                      <div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
+                        <input
+                          class="input"
+                          @blur="inputBlurCallBack($event, i, 'alt', 2)"
+                          type="number"
+                          v-model="item.alt"
+                          min="-9999999"
+                          max="999999999"
+                          v-if="activeTd.index == i && activeTd.name == 'alt'"
+                        />
+                        <span style="pointer-events: none" v-else>{{ item.alt.toFixed(2) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="线条风格" name="3">
+              <div class="row">
+                <div class="col">
+                  <span class="label">线条颜色</span>
+                  <div class="color" ref="colorRef"></div>
+                </div>
+                <div class="col" style="flex: 0 0 33%">
+                  <span class="label">线条宽度</span>
+                  <div class="input-number input-number-unit-1" style="width: 80px">
+                    <input
+                      class="input"
+                      type="number"
+                      title=""
+                      min="1"
+                      max="999"
+                      v-model="entityOptions.lineWidth"
+                    />
+                    <span class="unit">px</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+                <div class="col input-select-line-type-box" style="flex: 0 0 37%">
+                  <span class="label">线条形式</span>
+                  <el-select
+                    class="input input-select input-select-line-type"
+                    style="margin-left: 20px"
+                    v-model="entityOptions.lineType"
+                    @change="lineTypechange"
+                  >
+                    <el-option
+                      v-for="item in lineTypeData"
+                      :key="item.key"
+                      :label="item.name"
+                      :value="item.key"
+                    >
+                      <i class="yj-custom-icon" :class="item.icon"></i>
+                      {{ item.name }}
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col">
+                  <span class="label">线段缓冲</span>
+                  <input class="btn-switch" type="checkbox" v-model="entityOptions.extend" />
+                </div>
+                <div class="col" style="flex: 0 0 33%">
+                  <span class="label">缓冲宽度</span>
+                  <div class="input-number input-number-unit-1" style="width: 80px">
+                    <input
+                      class="input"
+                      type="number"
+                      title=""
+                      min="0"
+                      data-min="0.01"
+                      max="999999"
+                      v-model="entityOptions.extendWidth"
+                    />
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+                <div class="col" style="flex: 0 0 37%">
+                  <span class="label">缓冲颜色</span>
+                  <div class="extendColor" ref="extendColorRef"></div>
+                </div>
+              </div>
+              <div class="row" v-show="entityOptions.lineType > 2 && entityOptions.lineType < 13">
+                <div class="col">
+                  <span class="label">首尾反向</span>
+                  <input class="btn-switch" type="checkbox" v-model="entityOptions.rotate" />
+                </div>
+                <div class="col" style="flex: 0 0 33%">
+                  <span class="label">流动速率</span>
+                  <div class="input-number input-number-unit-1" style="width: 80px">
+                    <input
+                      class="input"
+                      type="number"
+                      title=""
+                      min="0"
+                      max="999999"
+                      step="1"
+                      v-model="entityOptions.speed"
+                    />
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+                <div class="col" style="flex: 0 0 37%">
+                  <span
+                    class="label lineSpace"
+                    v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
+                    >线条间距</span
+                  >
+                  <div
+                    class="input-number input-number-unit-1 lineSpace"
+                    style="width: 80px"
+                    v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
+                  >
+                    <input
+                      class="input"
+                      type="number"
+                      title=""
+                      min="0"
+                      max="4.5"
+                      step="0.1"
+                      v-model="entityOptions.space"
+                    />
+                    <span class="unit">倍</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col">
+                  <span class="label">首尾相连</span>
+                  <input class="btn-switch" type="checkbox" v-model="entityOptions.noseToTail" />
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="标签风格" name="4">
+              <labelStyle type="线" :entityOptions="entityOptions"></labelStyle>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div style="position: absolute; left: 24px; display: flex">
+        <button @click="nodeEdit">
+          <svg class="icon-edit">
+            <use xlink:href="#yj-icon-edit"></use></svg>二次编辑
+        </button>
+        <button style="margin-left: 10px" @click="translate">平移</button>
+      </div>
+      <button @click="remove">删除</button>
+      <button @click="confirm">确定</button>
+      <button @click="close">关闭</button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, getCurrentInstance } from 'vue'
+import { inject } from 'vue'
+import { updateInfo, deleteSource} from '@/views/largeScreen/components/api'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import Dialog from './baseDialog.vue'
+import { getFontList } from './fontSelect'
+// import attribute from './attribute.vue'
+import labelStyle from './labelStyle.vue'
+import { useTreeNode } from '../treeNode'
+
+const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
+
+const baseDialog: any = ref(null)
+const eventBus: any = inject('bus')
+
+const length = ref(0)
+const lengthUnit = ref('m')
+const fontList = ref(getFontList())
+const height = ref(10)
+const heightModeData = ref([
+  {
+    name: '海拔高度',
+    value: '海拔高度',
+    key: 0
+  },
+  {
+    name: '相对地表',
+    value: '相对地表',
+    key: 1
+  },
+  {
+    name: '依附模型',
+    value: '依附模型',
+    key: 2
+  }
+])
+const lineTypeData = ref([
+  {
+    name: '实线',
+    value: '实线',
+    key: 0,
+    icon: 'line'
+  },
+  {
+    name: '虚线',
+    value: '虚线',
+    key: 1,
+    icon: 'dash-line'
+  },
+  {
+    name: '泛光',
+    value: '泛光',
+    key: 2,
+    icon: 'light-line'
+  },
+  {
+    name: '尾迹光线',
+    value: '尾迹光线',
+    key: 3,
+    icon: 'tail-line'
+  },
+  {
+    name: '多尾迹光线',
+    value: '多尾迹光线',
+    key: 4,
+    icon: 'mult-tail-line'
+  },
+  {
+    name: '流动虚线1',
+    value: '流动虚线1',
+    key: 5,
+    icon: 'flow-dash-line1'
+  },
+  {
+    name: '流动虚线2',
+    value: '流动虚线2',
+    key: 6,
+    icon: 'flow-dash-line2'
+  },
+  {
+    name: '流动箭头1',
+    value: '流动箭头1',
+    key: 7,
+    icon: 'pic-line1'
+  },
+  {
+    name: '流动箭头2',
+    value: '流动箭头2',
+    key: 8,
+    icon: 'pic-line2'
+  },
+  {
+    name: '流动箭头3',
+    value: '流动箭头3',
+    key: 9,
+    icon: 'pic-line3'
+  },
+  {
+    name: '流动箭头4',
+    value: '流动箭头4',
+    key: 10,
+    icon: 'pic-line4'
+  },
+  {
+    name: '流动箭头5',
+    value: '流动箭头5',
+    key: 11,
+    icon: 'pic-line5'
+  },
+  {
+    name: '流动箭头6',
+    value: '流动箭头6',
+    key: 12,
+    icon: 'pic-line6'
+  }
+])
+const activeName = ref('2')
+const activeTd = ref({
+  index: -1,
+  name: ''
+})
+const entityOptions: any = ref({})
+const linePositions = ref([])
+const colorRef = ref(null)
+const extendColorRef = ref(null)
+const heightMode = ref(0)
+
+let originalOptions
+let that
+
+const open = async (id) => {
+  that = window['Earth1'].entityMap.get(id)
+  originalOptions = structuredClone(that.options)
+  entityOptions.value = that
+  heightMode.value = entityOptions.value.heightMode
+  length.value = entityOptions.value.lengthByMeter
+  linePositions.value = structuredClone(that.options.positions)
+  that.lengthChangeCallBack = () => {
+    if (lengthUnit.value == 'km') {
+      length.value = entityOptions.value.lengthByMeter / 1000
+    } else {
+      length.value = entityOptions.value.lengthByMeter
+    }
+  }
+  heightModeChange(heightMode.value)
+  baseDialog.value?.open()
+
+  await nextTick()
+  let colorPicker = new (window as any).YJColorPicker({
+    el: colorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.color,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.color = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.color = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  let extendColorPicker = new (window as any).YJColorPicker({
+    el: extendColorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.extendColor,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.extendColor = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.extendColor = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+}
+const heightModeChange = (val) => {
+  that.heightMode = heightMode.value
+}
+const heightConfirm = () => {
+  that.positionEditing = false
+  for (let i = 0; i < entityOptions.value.options.positions.length; i++) {
+    entityOptions.value.options.positions[i].alt = Number(
+      (entityOptions.value.options.positions[i].alt + Number(height.value)).toFixed(2)
+    )
+  }
+}
+const inputDblclick = async (event, i, anme) => {
+  if (heightMode.value == 2) {
+    return
+  }
+  activeTd.value = {
+    index: i,
+    name: anme
+  }
+  await nextTick()
+  let inputElm = event.target.getElementsByClassName('input')[0]
+  if (inputElm) {
+    inputElm.focus()
+  }
+}
+const inputBlurCallBack = (event, i, name, digit = 2) => {
+  entityOptions.value.options.positions[i][name] = Number(Number(event.target.value).toFixed(digit))
+  entityOptions.value.positionEditing = false
+  activeTd.value = {
+    index: -1,
+    name: ''
+  }
+}
+
+const lineTypechange = () => {}
+const nodeEdit = () => {
+  entityOptions.value.positionEditing = false
+  entityOptions.value.noseToTail = false
+  heightMode.value = 0
+  that.heightMode = 0
+  that.nodeEdit((positions, lenByMeter) => {
+    entityOptions.value.options.positions = structuredClone(positions)
+    if (lengthUnit.value == 'km') {
+      length.value = lenByMeter / 1000
+    } else {
+      length.value = lenByMeter
+    }
+  })
+}
+const translate = () => {
+  that.openPositionEditing(() => {
+    entityOptions.value.options.positions = structuredClone(that.options.positions)
+    if (lengthUnit.value == 'km') {
+      length.value = entityOptions.value.lengthByMeter / 1000
+    } else {
+      length.value = entityOptions.value.lengthByMeter
+    }
+  })
+}
+
+const closeCallback = () => {
+  entityOptions.value.originalOptions = structuredClone(originalOptions)
+  that.positionEditing = false
+  entityOptions.value.closeNodeEdit()
+  entityOptions.value.reset()
+  // eventBus.emit('destroyComponent')
+}
+const confirm = () => {
+  originalOptions = structuredClone(that.options)
+  baseDialog.value?.close()
+  let params = structuredClone(that.options)
+  delete params.host
+  let params2 = {
+    id: params.id,
+    sourceName: params.name,
+    params: params,
+    isShow: params.show ? 1 : 0
+  }
+  updateInfo(params2)
+  cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) })
+}
+const close = () => {
+  baseDialog.value?.close()
+}
+
+const remove = () => {
+  close()
+  ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(async () => {
+        let selectNodes = getSelectedNodes(window['treeObj'])
+        let source_ids = cusRemoveNode(window['treeObj'], selectNodes)
+        const res = await deleteSource({ ids: source_ids })
+        if (res.code == 0 || res.code == 200) {
+          ElMessage({
+            message: '删除成功',
+            type: 'success'
+          })
+          that.remove()
+        } else {
+          ElMessage({
+            message: res.msg || '删除失败',
+            type: 'error'
+          })
+        }
+      })
+      .catch(() => {
+      })
+}
+
+watch(
+  () => lengthUnit.value,
+  (val) => {
+    if (entityOptions.value.lengthByMeter || entityOptions.value.lengthByMeter == 0) {
+      if (lengthUnit.value == 'km') {
+        length.value = entityOptions.value.lengthByMeter / 1000
+      } else {
+        length.value = entityOptions.value.lengthByMeter
+      }
+    }
+  },
+  { immediate: true }
+)
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped lang="scss">
+.polyline {
+  ::v-deep .input-select-unit-box {
+    .el-input-group__prepend {
+      width: 100px;
+    }
+
+    .el-input__wrapper {
+      width: 130px;
+      padding: 0;
+      background: rgba(0, 0, 0, 0.5);
+      box-shadow: unset;
+
+      .el-input__inner {
+        border-radius: 0;
+        background: unset;
+      }
+    }
+
+    .el-input-group__append {
+      width: 75px;
+    }
+  }
+}
+</style>

src/views/largeScreen/components/newMap/dialog/fontSelect.ts

@@ -0,0 +1,51 @@
+let fontData = [
+  {
+    name: '黑体',
+    value: '黑体',
+    font: 'SimHei',
+    key: 0
+  },
+  {
+    name: '思源黑体',
+    value: '思源黑体',
+    font: 'SourceHanSansTi',
+    key: 1
+  },
+  {
+    name: '庞门正道标题体',
+    value: '庞门正道标题体',
+    font: 'PMZDBTTi',
+    key: 2
+  },
+  {
+    name: '数黑体',
+    value: '数黑体',
+    font: 'AlimamaShuHeiTi',
+    key: 3
+  }
+]
+
+function getFontList() {
+  return fontData
+}
+
+// @ts-ignore
+function getFontFamily(key: any) {
+  for (let i = 0; i < fontData.length; i++) {
+    if (fontData[i].key == key) {
+      return fontData[i].font;
+    }
+  }
+
+}
+
+// @ts-ignore
+function getFontFamilyName(key: any) {
+  for (let i = 0; i < fontData.length; i++) {
+    if (fontData[i].key == key) {
+      return fontData[i].name;
+    }
+  }
+}
+
+export { getFontList, getFontFamily, getFontFamilyName }

src/views/largeScreen/components/newMap/dialog/groundText.vue

@@ -0,0 +1,190 @@
+<template>
+    <Dialog ref="baseDialog" title="贴地文字属性" left="180px" top="100px" className="ground-text"
+        :closeCallback="closeCallback">
+        <template #content>
+            <span class="custom-divider"></span>
+            <div class="div-item">
+                <div class="row">
+                    <div class="col">
+                        <span class="label">名称</span>
+                        <textarea v-model="entityOptions.text"></textarea>
+                    </div>
+                    <div class="col">
+                        <span class="label">颜色</span>
+                        <div class="color" ref="colorRef" </div>
+                        </div>
+                    </div>
+                </div>
+                <span class="custom-divider"></span>
+                <div class="div-item">
+                    <div class="row">
+                        <div class="col">
+                            <span class="label">经度</span>
+                            <input class="input" type="number" title="" min="-180" max="180"
+                                v-model="entityOptions.lng">
+                        </div>
+                        <div class="col">
+                            <span class="label">纬度</span>
+                            <input class="input" type="number" title="" min="-90" max="90" v-model="entityOptions.lat">
+                        </div>
+                    </div>
+                </div>
+                <span class="custom-divider"></span>
+                <div class="div-item">
+                    <div class="row">
+                        <div class="col">
+                            <span class="label">旋转角度</span>
+                            <input type="range" max="360" min="0" step="1" v-model="entityOptions.angle">
+                            <div class="input-number input-number-unit"
+                                style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
+                                <input class="input" type="number" title="" min="0" max="360" step="1"
+                                    v-model="entityOptions.angle">
+                                <span class="unit">°</span>
+                                <span class="arrow"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <span class="label">调整大小</span>
+                            <input type="range" max="100000" min="0" step="0.01" v-model="entityOptions.scale">
+                            <div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
+                                <input class="input" type="number" title="" min="0" max="100000" step="0.01"
+                                    v-model="entityOptions.scale">
+                                <span class="arrow"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <span class="label">滚动速度</span>
+                            <input type="range" max="100" min="0" step="1" v-model="entityOptions.speed">
+                            <div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
+                                <input class="input" type="number" title="" min="0" max="100" step="1"
+                                    v-model="entityOptions.speed">
+                                <span class="arrow"></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <span class="custom-divider"></span>
+        </template>
+        <template #footer>
+            <div style="position: absolute; left: 24px; display: flex;">
+                <button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
+                        <use xlink:href="#yj-icon-py"></use>
+                    </svg>平移</button>
+            </div>
+            <button @click="remove">删除</button>
+            <button @click="confirm">确定</button>
+            <button @click="close">关闭</button>
+        </template>
+    </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { inject } from "vue";
+import { updateInfo, deleteSource} from '@/views/largeScreen/components/api'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import Dialog from './baseDialog.vue'
+import { useTreeNode } from '../treeNode'
+const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
+
+const baseDialog: any = ref(null);
+const eventBus: any = inject("bus");
+const text = ref("")
+// eventBus.on("openStandTextAdd", () => {
+//     baseDialog.value?.open()
+// });
+const entityOptions: any = ref({});
+let originalOptions: any
+let that: any
+const colorRef = ref(null)
+const open = async (id: any) => {
+    console.log('id', id)
+    that = window['Earth1'].entityMap.get(id)
+    originalOptions = structuredClone(that.options)
+    entityOptions.value = that
+    baseDialog.value?.open()
+    await nextTick()
+    let colorPicker = new window['YJColorPicker']({
+        el: colorRef.value,
+        size: 'mini', //颜色box类型
+        alpha: true, //是否开启透明度
+        defaultColor: entityOptions.value.color,
+        disabled: false, //是否禁止打开颜色选择器
+        openPickerAni: 'opacity', //打开颜色选择器动画
+        sure: color => {
+            entityOptions.value.color = color
+        }, //点击确认按钮事件回调
+        clear: () => {
+            entityOptions.value.color = 'rgba(255,255,255,1)'
+        } //点击清空按钮事件回调
+    })
+}
+const confirm = () => {
+    originalOptions = structuredClone(that.options)
+    baseDialog.value?.close()
+    let params = structuredClone(that.options)
+    // 删除不必要的属性
+    delete params.host
+    delete params.name
+    let params2 = {
+        "id": params.id,
+        "sourceName": params.text,
+        "params": params,
+        "isShow": params.show ? 1 : 0,
+    }
+    updateInfo(params2)
+    cusUpdateNode({ "id": params.id, "sourceName": params.text, "params": JSON.stringify(params) })
+}
+const close = () => {
+    baseDialog.value?.close()
+}
+const remove = () => {
+  close()
+  ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(async () => {
+        let selectNodes = getSelectedNodes(window['treeObj'])
+        let source_ids = cusRemoveNode(window['treeObj'], selectNodes)
+        const res = await deleteSource({ ids: source_ids })
+        if (res.code == 0 || res.code == 200) {
+          ElMessage({
+            message: '删除成功',
+            type: 'success'
+          })
+          entityOptions.value.remove()
+        } else {
+          ElMessage({
+            message: res.msg || '删除失败',
+            type: 'error'
+          })
+        }
+      })
+      .catch(() => {
+        // 用户点击取消，不执行任何操作
+      })
+}
+const translate = () => {
+    entityOptions.value.positionEditing = true
+}
+
+const closeCallback = () => {
+    entityOptions.value.originalOptions = structuredClone(originalOptions)
+    that.positionEditing = false
+    that.reset()
+    // eventBus?.emit("destroyComponent")
+}
+
+defineExpose({
+    open,
+    close
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/largeScreen/components/newMap/dialog/labelStyle.vue

@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <div class="row">
+      <div class="col">
+        <span class="label">新增{{ type }}标签风格设置</span>
+        <button style="margin-right: 56px">初始风格</button>
+        <button>当前风格</button>
+      </div>
+    </div>
+    <span class="custom-divider"></span>
+    <div class="row"></div>
+    <div class="row">
+      <div class="col">
+        <span class="label" style="margin-right: 42px">标签设置</span>
+        <span class="label">标签显示</span>
+        <input class="btn-switch" type="checkbox" v-model="entityOptions.labelShow" />
+      </div>
+    </div>
+    <div class="row">
+      <div class="col" style="flex: 0 0 114px">
+        <span class="label">视野缩放</span>
+        <input class="btn-switch" type="checkbox" v-model="entityOptions.labelScaleByDistance" />
+      </div>
+      <div class="col">
+        <span class="label">最近距离</span>
+        <div class="input-number input-number-unit-1">
+          <input
+            class="input"
+            type="number"
+            title=""
+            min="1"
+            max="99999999"
+            v-model="entityOptions.labelNear"
+          />
+          <span class="unit">m</span>
+          <span class="arrow"></span>
+        </div>
+      </div>
+      <div class="col">
+        <span class="label">最远距离</span>
+        <div class="input-number input-number-unit-1">
+          <input
+            class="input"
+            type="number"
+            title=""
+            min="1"
+            max="99999999"
+            v-model="entityOptions.labelFar"
+          />
+          <span class="unit">m</span>
+          <span class="arrow"></span>
+        </div>
+      </div>
+    </div>
+    <span class="custom-divider"></span>
+    <div class="row"></div>
+    <div class="row">
+      <div class="col">
+        <span class="label">字体样式</span>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col" style="flex: 0 0 114px">
+        <span class="label">字体颜色</span>
+        <div class="labelColor" ref="labelColorRef"></div>
+      </div>
+      <div class="col">
+        <span class="label">字体大小</span>
+        <div class="input-number input-number-unit-2">
+          <input
+            class="input"
+            type="number"
+            title=""
+            min="1"
+            max="99"
+            v-model="entityOptions.labelFontSize"
+          />
+          <span class="unit">px</span>
+          <span class="arrow"></span>
+        </div>
+      </div>
+      <div class="col font-select-box">
+        <span class="label" style="flex: none">字体选择</span>
+        <el-select class="input input-select font-select" v-model="entityOptions.labelFontFamily">
+          <el-option v-for="item in fontList" :key="item.key" :label="item.name" :value="item.key">
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+    <!-- <div class="row">
+      <div class="col" style="flex: 0 0 114px;">
+        <span class="label">轮廓颜色</span>
+        <div class="outlineColor"></div>
+      </div>
+    </div> -->
+    <div class="row">
+      <div class="col">
+        <span class="label">标签样式</span>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col">
+        <span class="label">引线颜色</span>
+        <div class="labelLineColor" ref="labelLineColorRef"></div>
+      </div>
+      <div class="col">
+          <span class="label">背景颜色</span>
+          <div class="labelBackgroundColorStart" ref="labelBackgroundColorStartRef" style="margin-right: 10px;"></div>
+          <div class="labelBackgroundColorEnd" ref="labelBackgroundColorEndRef"></div>
+      </div>
+      <!-- <div class="col font-select-box">
+        <span class="label" style="flex: none">字体选择</span>
+        <el-select class="input input-select font-select" v-model="entityOptions.labelFontFamily">
+          <el-option v-for="item in fontList" :key="item.key" :label="item.name" :value="item.key">
+          </el-option>
+        </el-select>
+      </div> -->
+    </div>
+    <div class="row">
+      <div class="col">
+        <span class="label">引线宽度</span>
+        <div class="input-number input-number-unit-2">
+          <input
+            class="input"
+            type="number"
+            title=""
+            min="1"
+            max="999"
+            v-model="entityOptions.labelLineWidth"
+          />
+          <span class="unit">px</span>
+          <span class="arrow"></span>
+        </div>
+      </div>
+      <div class="col">
+        <span class="label">引线长度</span>
+        <div class="input-number input-number-unit-2">
+          <input
+            class="input"
+            type="number"
+            title=""
+            min="0"
+            max="999"
+            v-model="entityOptions.labelPixelOffset"
+          />
+          <span class="unit">px</span>
+          <span class="arrow"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { inject } from 'vue'
+import { getFontList } from './fontSelect'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: ''
+  },
+  entityOptions: {
+    type: Object,
+    default: {}
+  }
+})
+const entityOptions = ref(props.entityOptions)
+const fontList = ref(getFontList())
+const labelColorRef = ref(null)
+const labelLineColorRef = ref(null)
+const labelBackgroundColorStartRef = ref(null)
+const labelBackgroundColorEndRef = ref(null)
+
+const fontChange = (val) => {
+  entityOptions.value.labelFontFamily = val
+}
+
+onMounted(() => {
+  new (window as any).YJColorPicker({
+    el: labelColorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.labelColor,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.labelColor = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.labelColor = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  new (window as any).YJColorPicker({
+    el: labelLineColorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.labelLineColor,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.labelLineColor = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.labelLineColor = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  new (window as any).YJColorPicker({
+    el: labelBackgroundColorStartRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.labelBackgroundColorStart,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.labelBackgroundColorStart = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.labelBackgroundColorStart = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  new (window as any).YJColorPicker({
+    el: labelBackgroundColorEndRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.labelBackgroundColorEnd,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.labelBackgroundColorEnd = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.labelBackgroundColorEnd = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/largeScreen/components/newMap/dialog/model.vue

@@ -0,0 +1,547 @@
+<script setup lang="ts">
+import { getCurrentInstance } from 'vue';
+import { getModelList, getModelTypeList, addOtherSource } from '@/views/largeScreen/components/api';
+import { useTreeNode } from '../treeNode';
+const isShowPup = ref(false);
+const categories = ref<any[]>([]);
+const loading = ref(false);
+const { cusAddNodes } = useTreeNode();
+//-----------类型树-----------
+
+interface TypeNode {
+  id: string;
+  label: string;
+  parentId: string | null;
+  children?: TypeNode[];
+}
+let typeArr = {
+  point: '点',
+  line: '线',
+  area: '面'
+};
+const currentTypeId = ref<string>('');
+const typeTreeData = ref<TypeNode[]>([]);
+
+let activeIndex: any = ref(null);
+// 获取组件实例
+const instance = getCurrentInstance();
+instance.proxy['$recvChanel']('open-model', () => {
+  console.log('open-model');
+  isShowPup.value = true;
+  typeList();
+});
+const typeList = async () => {
+  const res: any = await getModelTypeList();
+  if (res.code == 0 || res.code == 200) {
+    console.log('typeList', res);
+    let data = transformNestedJson(res.data, 'name', 'label');
+    typeTreeData.value = data;
+  }
+};
+const transformNestedJson = (data, oldKey, newKey) => {
+  if (Array.isArray(data)) {
+    return data.map((item) => transformNestedJson(item, oldKey, newKey));
+  } else if (data && typeof data === 'object') {
+    const newObj = {};
+    for (const key in data) {
+      // 替换键名
+      const currentKey = key === oldKey ? newKey : key;
+      // 递归处理子元素
+      newObj[currentKey] = transformNestedJson(data[key], oldKey, newKey);
+    }
+    return newObj;
+  }
+  return data;
+};
+const handleTypeClick = (row: TypeNode) => {
+  getModelListByType(row.id);
+  currentTypeId.value = row['$treeNodeId'];
+};
+const getModelListByType = (id) => {
+  let formData = new FormData();
+  formData.append('modelTypeId', id);
+  console.log('formData', formData.get('modelTypeId'));
+  getModelList(formData).then((res) => {
+    categories.value = res.data;
+  });
+};
+const filterNode: any = (value, data) => {
+  if (!value) return true;
+  return data.label.includes(value);
+};
+const modelClick = (index, row) => {
+  activeIndex.value = index;
+  console.log('modelClick', row);
+
+  // 轨迹运动选择模型
+  // if (selectCallback && typeof selectCallback === 'function' && addType.value === 'trajectoryMotion') {
+  //   selectCallback('http://127.0.0.1:8848' + row.data);
+  //   close();
+  //   return;
+  // }
+
+  // if (!isSetting) {
+  //   ElMessage.warning('请先设置模型默认参数');
+  //   return;
+  // }
+
+  isShowPup.value = false;
+  let id = new window['YJ'].Tools().randomString();
+  new window['YJ'].Obj.BatchModel(window['Earth1'], { id, type: typeArr['point'] }, function (data) {
+    console.log(data);
+    renderModel(data, row);
+  });
+  const renderModel = async (option, model) => {
+    let selectedNode = window['treeObj'].getSelectedNodes()[0];
+    // 存在坐标
+    if (option.positions.length > 0) {
+      let id = new window['YJ'].Tools().randomString();
+      let params = {
+        id: id,
+        position: option.positions[0],
+        name: model.modelName,
+        show: true,
+        scale: { x: 1, y: 1, z: 1 },
+        url: getURL(model.modelDataUrl),
+        maximumScale: 1,
+        rotate: {
+          x: 0,
+          y: 0,
+          z: 0
+        }
+      };
+      await new window['YJ'].Obj.Model(window['Earth1'], params);
+      let DbOption: any = {
+        params,
+        id,
+        sourceName: model.modelName,
+        sourceType: 'model',
+        parentId: selectedNode ? (selectedNode.sourceType == 'directory' ? selectedNode.id : selectedNode.parentId) : undefined
+      };
+
+      addOtherSource(DbOption);
+      DbOption.params = JSON.stringify(DbOption.params);
+      DbOption.isShow = true;
+      cusAddNodes(window['treeObj'], DbOption.parentId, [DbOption]);
+    }
+  };
+};
+const getURL = (url) => {
+  // 'http://192.168.110.2:3456';
+  return import.meta.env.VITE_APP_MAP_API + url;
+};
+</script>
+
+<template>
+  <div class="set_pup">
+    <el-dialog :close-on-click-modal="false" v-model="isShowPup" :modal="false" draggable>
+      <template #header>
+        <div class="set_pup_header">
+          <div class="system_title">模型选择</div>
+        </div>
+      </template>
+      <div class="set_detail">
+        <!--        搜索和参数设置-->
+        <!--        <div class="top">
+          <el-input v-model="modelName" class="w-50 m-2" placeholder="请输入模型名称进行搜索" :suffix-icon="Search" />
+          <button @click="setting" class="btn">
+            <svg-icon name="sys_set" class="setIcon" :size="12" color="rgba(255,255,255, 1)" style="margin-right: 5px"></svg-icon>默认模型参数设置
+          </button>
+        </div>-->
+        <div class="content">
+          <!-- 左侧Tab导航 -->
+          <div class="treeCon">
+            <el-tree
+              style="max-width: 600px"
+              :data="typeTreeData"
+              ref="treeRef"
+              node-key="id"
+              @node-click="handleTypeClick"
+              :filter-node-method="filterNode"
+            >
+              <template #default="{ node, data }">
+                <!-- <span> {{ node.label }}</span> -->
+                 <!-- @click.stop="toggleExpand(node)" @click.stop="toggleExpand(node)" -->
+                <span
+                  :class="{
+                    'primary-type': !(node.childNodes.length != 0),
+                    'selected-text': node.id === currentTypeId
+                  }"
+                  
+                  class="allowDrag"
+                >
+                  <svg-icon
+                    :name="node.expanded ? 'arrow' : 'more'"
+                    :size="12"
+                    color="rgba(0, 255, 255, 1)"
+                    style="margin-right: 5px; margin-left: 5px"
+                    v-if="node.childNodes.length != 0"
+                    
+                  ></svg-icon>
+                  {{ node.label }}</span
+                >
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="model-gallery" ref="galleryRef">
+            <div class="model-section">
+              <!-- <h2 class="section-title">{{ categories[Number(currentTypeId)].name }}</h2> -->
+              <div class="model-grid">
+                <div v-for="(model, mIndex) in categories" :key="mIndex" class="model-item" @click="modelClick(mIndex, model)">
+                  <div class="imgbg">
+                    <el-image :src="getURL(model.posterDataUrl)" fit="cover" class="thumbnail">
+                      <!--                      <template #error>-->
+                      <!--                        <div class="image-error">加载失败</div>-->
+                      <!--                      </template>-->
+                    </el-image>
+                  </div>
+
+                  <div class="model-name" :class="{ isactive: activeIndex == mIndex }">
+                    {{ model.modelName }}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-show="loading" class="loading-more">加载中...</div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped lang="scss">
+:root {
+  --color-sdk-base-rgb: 0, 255, 255;
+  --color-sdk-auxiliary: 0, 66, 66;
+  --color-sdk-auxiliary-public: #ffffff;
+  --color-sdk-warning-0: #1bf8c3;
+  --color-sdk-warning-1: #f16c55;
+  --color-sdk-warning-2: #ffa145;
+  --color-sdk-warning-3: #ffdf53;
+  --color-sdk-text-head: #ffffff;
+  --color-sdk-text-head-1: #e6f7ff;
+  --color-sdk-text-head-2: #adf1ff;
+  --color-sdk-gradual: rgb(0, 255, 255) 6.25%, rgb(0, 200, 255) 100%;
+  --color-sdk-bg-gradual: #00ffff33 0%, #00ffff00 100%;
+  --color-sdk-text-shadow: rgba(20, 118, 255, 1);
+}
+.set_pup {
+  position: fixed;
+  width: 40vw;
+  height: 50vh;
+  :deep(.el-dialog) {
+    background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
+    border: 1px solid #00c9ff;
+    padding-left: 0 !important;
+  }
+  :deep(.el-dialog__body) {
+    padding: 0 !important;
+  }
+  :deep(.el-dialog__headerbtn) {
+    height: 30px;
+    width: 30px;
+    border-bottom-left-radius: 80%;
+    background-color: #008989;
+    &:hover {
+      background-color: #00ffff;
+      .el-dialog__close {
+        color: rgba(0, 66, 66, 1); // 悬停时改变关闭图标为红色
+      }
+    }
+  }
+  :deep(.el-dialog__headerbtn .el-dialog__close) {
+    color: #fff;
+  }
+  .set_pup_header {
+    width: 100%;
+    height: 100%;
+    // background-color: #00ffff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 20px;
+    .system_title {
+      background: url('@/assets/images/map/titlebg.png') no-repeat;
+      background-size: 100% 100%;
+      width: 229px;
+      height: 34px;
+      line-height: 34px;
+      text-align: center;
+      font-family: 'alimamashuheiti';
+      font-size: 18px;
+      color: #fff;
+      font-weight: 700;
+    }
+  }
+  .set_detail {
+    box-sizing: border-box;
+    // height: 50vh;
+    :deep(
+        .el-tabs--left .el-tabs__active-bar.is-left,
+        .el-tabs--left .el-tabs__active-bar.is-right,
+        .el-tabs--right .el-tabs__active-bar.is-left,
+        .el-tabs--right .el-tabs__active-bar.is-right
+      ) {
+      width: 3px;
+      background: rgba(0, 255, 255, 1);
+      height: 40px !important;
+    }
+
+    :deep(
+        .el-tabs--left .el-tabs__nav-wrap.is-left::after,
+        .el-tabs--left .el-tabs__nav-wrap.is-right::after,
+        .el-tabs--right .el-tabs__nav-wrap.is-left::after,
+        .el-tabs--right .el-tabs__nav-wrap.is-right::after
+      ) {
+      width: 3px;
+    }
+
+    :deep(.el-tabs__nav-wrap::after) {
+      background: rgba(204, 204, 204, 0.5);
+      border-radius: 4px;
+    }
+
+    // .switchmy {
+    //   display: flex;
+    //   flex-wrap: wrap;
+    //   margin-top: 15px;
+
+    //   .center {
+    //     width: 33%;
+    //     margin-bottom: 15px;
+    //   }
+    // }
+    :deep(.el-tabs__content) {
+      height: 50vh;
+      width: 80%;
+      padding: 0 10px;
+      overflow: hidden;
+      overflow-y: scroll;
+      color: #fff;
+    }
+
+    // 美化滚动条
+    :deep(.el-tabs__content::-webkit-scrollbar) {
+      width: 5px;
+      height: 5px;
+    }
+    :deep(.el-tabs__content::-webkit-scrollbar-thumb) {
+      background-color: #0ff;
+      border-radius: 5px;
+    }
+    :deep(.el-tabs__content::-webkit-scrollbar-track) {
+      background-color: rgba(0, 255, 255, 0.2);
+    }
+    :deep(.el-tabs__item) {
+      width: 8vw;
+      color: #fff !important;
+      font-size: 1.1rem;
+      font-family: 黑体;
+      font-weight: 500;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 3px;
+      box-sizing: border-box;
+    }
+    :deep(.el-tabs__item:hover) {
+      background: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.5) 48.91%, rgba(0, 255, 255, 0) 100%);
+      border: 1px solid;
+      box-sizing: border-box;
+      border-image: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 1) 55.55%, rgba(0, 255, 255, 0) 100%) 1;
+    }
+    :deep(.el-tabs__item.is-active) {
+      background: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.5) 48.91%, rgba(0, 255, 255, 0) 100%) !important;
+      border: 0.1px solid;
+      // box-sizing: border-box;
+      border-image: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 1) 55.55%, rgba(0, 255, 255, 0) 100%) 1 !important;
+    }
+    :deep(.el-tabs__header) {
+      height: 50vh !important;
+      width: 8vw;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+    :deep(.el-tabs__nav-next, .el-tabs__nav-prev) {
+      color: #fff;
+    }
+  }
+  .el-input {
+    width: 300px;
+    margin-left: 30px;
+
+    --el-input-placeholder-color: rgba(173, 241, 255, 1) !important;
+    --el-input-placeholder-font-size: 14px;
+    --el-input-text-color: #fff;
+    --el-input-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
+    --el-input-hover-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
+    --el-input-focus-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
+  }
+  ::v-deep .el-input__wrapper {
+    background-color: rgba(0, 0, 0, 0.5) !important;
+  }
+  .btn {
+    float: right;
+    height: 32px;
+    line-height: 32px;
+    background: rgba(var(--color-sdk-base-rgb), 0.2) !important;
+    border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
+    border-radius: 4px;
+    color: #fff !important;
+    padding: 0 15px;
+  }
+  .btn:hover {
+    color: rgba(var(--color-sdk-base-rgb), 1) !important;
+    border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
+    .setIcon {
+      color: rgba(var(--color-sdk-base-rgb), 1) !important;
+    }
+  }
+
+  .content {
+    margin-top: 20px;
+    height: 400px;
+  }
+}
+.model-container {
+  display: flex;
+  height: 100vh;
+}
+.model-tabs {
+  width: 130px;
+  height: 100%;
+  float: left;
+}
+.treeCon {
+  width: 140px;
+  height: 100%;
+  float: left;
+  border-right: 1px solid rgba(204, 204, 204, 0.2);
+}
+.model-gallery {
+  flex: 1;
+  /* padding: 20px; */
+  overflow-y: auto;
+  height: 100%;
+  width: calc(100% - 160px);
+  float: left;
+  margin-left: 10px;
+}
+.model-section {
+  min-height: 10vh;
+  margin-bottom: 40px;
+}
+.model-grid {
+  display: flex;
+  flex-wrap: wrap;
+  /* justify-content: space-around; */
+  //justify-content: space-between;
+  gap: 10px;
+}
+.model-name {
+  width: 100%;
+  //height: 30px;
+  //line-height: 30px;
+  text-align: center;
+  word-break: break-all;
+  /* overflow-wrap: break-word; */
+  overflow-wrap: break-word;
+  color: rgba(255, 255, 255, 1);
+}
+.isactive {
+  color: rgba(var(--color-sdk-base-rgb), 1) !important;
+}
+.model-item {
+  border-radius: 8px;
+  overflow: hidden;
+  width: 18%;
+  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
+}
+.model-item:hover {
+  cursor: pointer !important;
+  color: rgba(var(--color-sdk-base-rgb), 1) !important;
+  .model-name {
+    color: rgba(var(--color-sdk-base-rgb), 1) !important;
+  }
+}
+
+.imgbg {
+  //width: 70px;
+  //height: 70px;
+  width: 100%;
+  margin: 0 auto;
+  background: url('@/assets/images/map/model-bg.png') no-repeat;
+  background-size: 100% 100%;
+}
+.thumbnail {
+  width: 100%;
+  //width: 66px;
+  //height: 66px;
+  //margin-left: 2px;
+  //margin-top: 2px;
+}
+.loading-more {
+  text-align: center;
+  padding: 20px;
+}
+
+::v-deep .el-tabs__content {
+  display: none !important;
+}
+/* 修改滚动条轨道的颜色 */
+::v-deep ::-webkit-scrollbar-track {
+  background: rgba(var(--color-sdk-base-rgb), 0.1) !important;
+}
+/* 修改滚动条滑块的样式 */
+::v-deep ::-webkit-scrollbar-thumb {
+  background: rgba(var(--color-sdk-base-rgb), 1) !important;
+  border-radius: 10px;
+}
+
+/* 当滑块被激活（用户点击或拖动时） */
+::v-deep ::-webkit-scrollbar-thumb:hover {
+  background: rgba(var(--color-sdk-base-rgb), 1) !important;
+}
+</style>
+<style>
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+/* 定义背景颜色和圆角 */
+::-webkit-scrollbar-thumb {
+  border-radius: 1em;
+  background-color: rgba(50, 50, 50, 0.3);
+}
+/* //定义滚动条轨道 内阴影+圆角 */
+::-webkit-scrollbar-track {
+  border-radius: 1em;
+  background-color: rgba(50, 50, 50, 0.1);
+}
+
+/* tree */
+.el-tree-node__content > .el-tree-node__expand-icon {
+  display: none !important;
+}
+.el-tree {
+  background: transparent !important;
+  --el-tree-node-hover-bg-color: rgba(var(--color-sdk-base-rgb), 0.2) !important;
+  color: rgba(255, 255, 255, 1) !important;
+  /* font-size: 12px !important; */
+  width: 130px;
+  float: left;
+  margin-left: 10px;
+}
+::v-deep .el-text {
+  color: rgba(255, 255, 255, 1) !important;
+  font-size: 12px !important;
+}
+.selected-text {
+  color: rgba(var(--color-sdk-base-rgb), 1) !important; /* Element UI主色，可自定义 */
+}
+::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
+  border-right: 1px solid rgba(var(--color-sdk-base-rgb), 0.2) !important;
+}
+</style>

src/views/largeScreen/components/newMap/dialog/modelObject.vue

@@ -0,0 +1,573 @@
+<template>
+  <Dialog ref="baseDialog" :title="title + '属性'" left="180px" top="100px" className="polygon"
+    :closeCallback="closeCallback">
+    <template #content>
+      <span class="custom-divider"></span>
+      <div class="div-item">
+        <div class="row" style="align-items: flex-start">
+          <div class="col">
+            <span class="label">名称</span>
+            <input class="input" maxlength="40" type="text" v-model="entityOptions.name" />
+          </div>
+          <div class="col">
+            <span class="label">颜色</span>
+            <div class="color" ref="colorRef"></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="div-item">
+        <div class="row" style="align-items: flex-start">
+          <div class="col">
+            <span class="label">经度</span>
+            <input class="input" type="number" title="" min="-180" max="180" v-model="entityOptions.lng" />
+          </div>
+          <div class="col">
+            <span class="label">最大比例</span>
+            <div class="input-number input-number-unit-1">
+              <input class="input height" type="number" title="" min="0.1" max="99999"
+                v-model="entityOptions.maximumScale" />
+              <span class="unit">倍</span>
+              <span class="arrow"></span>
+            </div>
+          </div>
+        </div>
+        <div class="row" style="align-items: flex-start">
+          <div class="col">
+            <span class="label">纬度</span>
+            <input class="input" type="number" title="" min="-90" max="90" v-model="entityOptions.lat" />
+          </div>
+          <div class="col">
+            <span class="label">最小像素</span>
+            <div class="input-number input-number-unit-1">
+              <input class="input" type="number" title="" min="1" max="99999"
+                v-model="entityOptions.minimumPixelSize" />
+              <span class="unit">px</span>
+              <span class="arrow"></span>
+            </div>
+          </div>
+        </div>
+        <div class="row" style="align-items: flex-start">
+          <div class="col">
+            <span class="label">高度</span>
+            <div class="input-number input-number-unit-1">
+              <input class="input height" type="number" title="" min="-99999" max="9999999"
+                v-model="entityOptions.alt" />
+              <span class="unit">m</span>
+              <span class="arrow"></span>
+            </div>
+          </div>
+          <div class="col">
+            <span class="label">固定大小</span>
+            <input class="btn-switch" type="checkbox" v-model="entityOptions.scaleByDistance" />
+          </div>
+        </div>
+      </div>
+
+      <div class="div-item">
+        <div class="row">
+          <el-tabs v-model="activeName">
+            <!-- <el-tab-pane label="属性信息" name="1">
+              <attribute :entityOptions="entityOptions"></attribute>
+            </el-tab-pane> -->
+            <el-tab-pane label="方向信息" name="2">
+              <div class="row">
+                <div class="row">
+                  <p class="lable-left-line">旋转</p>
+                </div>
+                <div class="row">
+                  <div class="col">
+                    <span class="label">x 轴</span>
+                    <input type="range" min="0" max="360" step="0.01" v-model="entityOptions.rotateX" />
+                    <div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
+                      <input style="width: 100px" type="number" title="" min="0" max="360"
+                        v-model="entityOptions.rotateX" />
+                      <span class="unit">°</span>
+                      <span class="arrow"></span>
+                    </div>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col">
+                    <span class="label">y 轴</span>
+                    <input type="range" min="0" max="360" step="0.01" v-model="entityOptions.rotateY" />
+                    <div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
+                      <input style="width: 100px" type="number" title="" min="0" max="360"
+                        v-model="entityOptions.rotateY" />
+                      <span class="unit">°</span>
+                      <span class="arrow"></span>
+                    </div>
+                  </div>
+                </div>
+                <div class="row">
+                  <div class="col">
+                    <span class="label">z 轴</span>
+                    <input type="range" min="0" max="360" step="0.01" v-model="entityOptions.rotateZ" />
+                    <div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
+                      <input style="width: 100px" type="number" title="" min="0" max="360"
+                        v-model="entityOptions.rotateZ" />
+                      <span class="unit">°</span>
+                      <span class="arrow"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="row">
+                  <div class="col" style="flex: 0 0 50px">
+                    <p class="lable-left-line">缩放</p>
+                  </div>
+                  <div class="col">
+                    <el-checkbox v-model="equalSwitch" label="是否等比例缩放" size="large" />
+                  </div>
+                </div>
+                <div class="row" v-if="equalSwitch">
+                  <div class="col">
+                    <span class="label">等比例缩放</span>
+                    <input type="range" min="0" max="99999" step="1" @change="scaleChange"
+                      v-model="entityOptions.scaleX" />
+                    <div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
+                      <input style="width: 100px" type="number" title="" min="0" max="360" @change="scaleChange"
+                        v-model="entityOptions.scaleX" />
+                      <span class="unit">倍</span>
+                      <span class="arrow"></span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="row" v-if="!equalSwitch">
+                  <div class="col">
+                    <span class="label">x 轴</span>
+                    <input type="range" min="0" max="99999" step="0.01" v-model="entityOptions.scaleX" />
+                    <div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
+                      <input style="width: 100px" type="number" title="" min="0" max="360"
+                        v-model="entityOptions.scaleX" />
+                      <span class="unit">°</span>
+                      <span class="arrow"></span>
+                    </div>
+                  </div>
+                </div>
+                <div class="row" v-if="!equalSwitch">
+                  <div class="col">
+                    <span class="label">y 轴</span>
+                    <input type="range" min="0" max="99999" step="0.01" v-model="entityOptions.scaleY" />
+                    <div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
+                      <input style="width: 100px" type="number" title="" min="0" max="360"
+                        v-model="entityOptions.scaleY" />
+                      <span class="unit">°</span>
+                      <span class="arrow"></span>
+                    </div>
+                  </div>
+                </div>
+                <div class="row" v-if="!equalSwitch">
+                  <div class="col">
+                    <span class="label">z 轴</span>
+                    <input type="range" min="0" max="99999" step="0.01" v-model="entityOptions.scaleZ" />
+                    <div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
+                      <input style="width: 100px" type="number" title="" min="0" max="360"
+                        v-model="entityOptions.scaleZ" />
+                      <span class="unit">°</span>
+                      <span class="arrow"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="row">
+                  <p class="lable-left-line">高度</p>
+                </div>
+                <div class="row">
+                  <div class="col">
+                    <span class="label">高度</span>
+                    <input type="range" min="-99999" max="999999" step="0.01" v-model="entityOptions.alt" />
+                    <div class="input-number input-number-unit-1" style="width: auto; margin-left: 10px">
+                      <input style="width: 100px" type="number" title="" min="0" max="360"
+                        v-model="entityOptions.alt" />
+                      <span class="unit">m</span>
+                      <span class="arrow"></span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="标注风格" name="3">
+              <div class="row">
+                <div class="col">
+                  <span class="label">标注开关</span>
+                  <input class="btn-switch" type="checkbox" v-model="entityOptions.labelShow" />
+                </div>
+              </div>
+              <div class="row">
+                <div class="col">
+                  <span class="label">字体颜色</span>
+                  <div class="labelColor" ref="labelColorRef"></div>
+                </div>
+                <div class="col font-select-box">
+                  <span class="label" style="flex: none">字体选择</span>
+                  <el-select class="input input-select font-select" style="width: 100px"
+                    v-model="entityOptions.labelFontFamily">
+                    <el-option v-for="item in fontList" :key="item.key" :label="item.name" :value="item.key">
+                    </el-option>
+                  </el-select>
+                </div>
+                <div class="col">
+                  <span class="label">字体大小</span>
+                  <div class="input-number input-number-unit-2">
+                    <input class="input" type="number" title="" min="1" max="99"
+                      v-model="entityOptions.labelFontSize" />
+                    <span class="unit">px</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col">
+                  <div class="col">
+                    <span class="label">视野缩放</span>
+                    <input class="btn-switch" type="checkbox" v-model="entityOptions.labelScaleByDistance" />
+                  </div>
+                </div>
+                <div class="col">
+                  <span class="label">最近距离</span>
+                  <div class="input-number input-number-unit-2">
+                    <input class="input" type="number" title="" min="1" max="99999999"
+                      v-model="entityOptions.labelNear" />
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+                <div class="col">
+                  <span class="label">最远距离</span>
+                  <div class="input-number input-number-unit-2">
+                    <input class="input" type="number" title="" min="1" max="99999999"
+                      v-model="entityOptions.labelFar" />
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="标签风格" name="4">
+              <div class="row">
+                <div class="col">
+                  <span class="label">引线颜色</span>
+                  <div class="labelLineColor" ref="labelLineColorRef"></div>
+                </div>
+                <div class="col">
+                  <span class="label">背景颜色</span>
+                  <div class="labelBackgroundColorStart" ref="labelBackgroundColorStartRef"></div>
+                  <div class="labelBackgroundColorEnd" ref="labelBackgroundColorEndRef" style="margin-left: 10px"></div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col">
+                  <span class="label">引线宽度</span>
+                  <div class="input-number input-number-unit-2">
+                    <input class="input" type="number" title="" min="1" max="999"
+                      v-model="entityOptions.labelLineWidth" />
+                    <span class="unit">px</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+                <div class="col">
+                  <span class="label">引线长度</span>
+                  <div class="input-number input-number-unit-2">
+                    <input class="input" type="number" title="" min="0" max="999"
+                      v-model="entityOptions.labelPixelOffset" />
+                    <span class="unit">px</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div style="position: absolute; left: 24px; display: flex">
+        <button @click="nodeEdit">
+          <svg class="icon-edit">
+            <use xlink:href="#yj-icon-edit"></use>
+          </svg>二次编辑
+        </button>
+        <button style="margin-left: 10px" v-if="!moveFlag" @click="translate">
+          <svg class="icon-py">
+            <use xlink:href="#yj-icon-py"></use>
+          </svg>平移
+        </button>
+        <button style="margin-left: 10px" v-if="moveFlag" @click="translate">
+          <svg class="icon-py">
+            <use xlink:href="#yj-icon-py"></use>
+          </svg>结束平移
+        </button>
+      </div>
+      <button @click="remove">删除</button>
+      <button @click="confirm">确定</button>
+      <button @click="close">关闭</button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref ,getCurrentInstance} from 'vue';
+import { inject } from 'vue';
+import { updateInfo, deleteSource } from '../../api'
+import Dialog from './baseDialog.vue'
+import attribute from './attribute.vue'
+import labelStyle from './labelStyle.vue'
+import { useTreeNode } from '../treeNode'
+import { getFontList } from './fontSelect'
+
+const { cusUpdateNode } = useTreeNode()
+
+const fontList = ref(getFontList())
+const instance = getCurrentInstance();
+const title = ref('模型')
+const baseDialog: any = ref(null)
+const eventBus: any = inject('bus')
+const options = ref({})
+const equalSwitch = ref(true) //是否等比例缩放
+const colorRef = ref(null)
+const labelColorRef = ref(null)
+const labelLineColorRef = ref(null)
+const labelBackgroundColorStartRef = ref(null)
+const labelBackgroundColorEndRef = ref(null)
+// eventBus.on('openPolygonEdit', () => {
+//   baseDialog.value?.open()
+// })
+
+const area = ref(0)
+const height = ref(10)
+
+const activeName = ref('2')
+const activeTd = ref({
+  index: -1,
+  name: ''
+})
+const positions = ref([])
+const heightMode = ref(0)
+const entityOptions: any = ref({})
+let originalOptions: any
+let that: any
+
+const scaleChange = () => {
+  entityOptions.value.scaleY = entityOptions.value.scaleX
+  entityOptions.value.scaleZ = entityOptions.value.scaleX
+}
+
+const open = async (id: any, type: any) => {
+  that = window['Earth1'].entityMap.get(id)
+  originalOptions = structuredClone(that.options)
+  entityOptions.value = that
+  heightMode.value = entityOptions.value.heightMode
+  area.value = entityOptions.value.areaByMeter
+  positions.value = structuredClone(that.options.positions)
+  heightModeChange(heightMode.value)
+  baseDialog.value?.open()
+
+  await nextTick()
+  let colorPicker = new window['YJColorPicker']({
+    el: colorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.color,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.color = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.color = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  let linecolorPicker = new window['YJColorPicker']({
+    el: labelColorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.labelColor,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.labelColor = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.labelColor = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  let ylinecolorPicker = new window['YJColorPicker']({
+    el: labelLineColorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.labelLineColor,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.labelLineColor = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.labelLineColor = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  let bgcolorPicker1 = new window['YJColorPicker']({
+    el: labelBackgroundColorStartRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.labelBackgroundColorStart,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.labelBackgroundColorStart = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.labelBackgroundColorStart = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  let bgcolorPicker2 = new window['YJColorPicker']({
+    el: labelBackgroundColorEndRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.labelBackgroundColorEnd,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.labelBackgroundColorEnd = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.labelBackgroundColorEnd = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+}
+
+const heightModeChange = (val) => {
+  that.heightMode = heightMode.value
+}
+
+const heightConfirm = () => {
+  if (entityOptions.value.operate.positionEditing) {
+    that.positionEditing = false
+    entityOptions.value.height = Number(
+      (entityOptions.value.height + Number(height.value)).toFixed(2)
+    )
+  } else {
+    that.closeNodeEdit(this)
+    that.heightMode = that.heightMode
+    setTimeout(() => {
+      entityOptions.value.height = Number(
+        (entityOptions.value.height + Number(height.value)).toFixed(2)
+      )
+    }, 100)
+  }
+}
+const inputDblclick = async (event, i, anme) => {
+  if (heightMode.value == 2) {
+    return
+  }
+  activeTd.value = {
+    index: i,
+    name: anme
+  }
+  await nextTick()
+  let inputElm = event.target.getElementsByClassName('input')[0]
+  if (inputElm) {
+    inputElm.focus()
+  }
+}
+const inputBlurCallBack = (event, i, name, digit = 2) => {
+  activeTd.value = {
+    index: -1,
+    name: ''
+  }
+}
+
+var moveFlag: any = ref(false)
+const translate = () => {
+  moveFlag.value = !moveFlag.value
+  that.positionEditing = moveFlag.value
+  if (moveFlag.value) {
+    that.rotationEditingCallBack = (res) => {
+      entityOptions.value.options.positions = structuredClone(res)
+      that.options.positions = res
+    }
+  }
+
+  // that.openPositionEditing(() => {
+  //   entityOptions.value.options.positions = structuredClone(that.options.positions)
+  // })
+}
+
+const closeCallback = () => {
+  entityOptions.value.originalOptions = structuredClone(originalOptions)
+  that.positionEditing = false
+  // entityOptions.value.closeNodeEdit()
+  entityOptions.value.reset()
+  console.log('eventBus',eventBus,entityOptions);
+  // eventBus.emit('destroyComponent')
+  instance.proxy['$sendChanel']('destroyComponent')
+}
+
+const nodeEdit = () => {
+  that.nodeEdit((e, positions, areaByMeter) => {
+    entityOptions.value.options.positions = structuredClone(positions)
+  })
+}
+
+const confirm = () => {
+  originalOptions = structuredClone(that.options)
+  baseDialog.value?.close()
+  let params = structuredClone(that.options)
+  delete params.attributeType
+  delete params.attribute.ISC
+  delete params.attribute.camera
+  delete params.attribute.goods
+  delete params.attribute.vr
+
+  let params2 = {
+    id: params.id,
+    sourceName: params.name,
+    params: params,
+    isShow: params.show ? 1 : 0
+  }
+  updateInfo(params2)
+  cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) })
+}
+const close = () => {
+  that.positionEditing = false
+  baseDialog.value?.close()
+}
+
+const remove = () => {
+  that.remove()
+  close()
+}
+
+//-----------------方法-----------------------
+
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped lang="scss">
+::v-deep .el-checkbox.el-checkbox--large .el-checkbox__label {
+  color: #fff !important;
+}
+
+::v-deep .el-select__wrapper {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  box-shadow: 0 0 0 1px rgba(var(--color-sdk-base-rgb), 0.5) inset !important;
+}
+
+::v-deep .el-select {
+  --el-select-input-focus-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
+  --el-select-text-color: #fff;
+  --el-select-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
+  --el-select-hover-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
+  --el-select-multiple-input-color: #fff !important;
+}
+
+::v-deep .el-select__placeholder {
+  color: rgba(204, 204, 204, 1) !important;
+}
+</style>

src/views/largeScreen/components/newMap/dialog/polygonObject.vue

@@ -0,0 +1,375 @@
+<template>
+  <Dialog ref="baseDialog" :title="title+'属性'" left="180px" top="100px" className="polygon" :closeCallback="closeCallback">
+    <template #content>
+      <span class="custom-divider"></span>
+      <div class="div-item">
+        <div class="row" style="align-items: flex-start;">
+          <div class="col">
+            <span class="label">名称</span>
+            <input class="input" maxlength="40" type="text" v-model="entityOptions.name">
+          </div>
+          <div class="col" style="flex: 0 0 60%;">
+            <div class="row">
+              <div class="col input-select-unit-box">
+                <span class="label" style="margin-right: 0px;">投影面积:</span>
+                <input class="input input-text" readonly type="text" v-model="area">
+                <el-select v-model="areaUnit">
+                    <el-option label="平方米" value="m2"></el-option>
+                    <el-option label="平方千米" value="km2"></el-option>
+                    <el-option label="亩" value="mu"></el-option>
+                    <el-option label="公顷" value="ha"></el-option>
+                  </el-select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="div-item">
+        <div class="row">
+          <el-tabs v-model="activeName">
+            <!-- <el-tab-pane label="属性信息" name="1">
+              <attribute :entityOptions="entityOptions"></attribute>
+            </el-tab-pane> -->
+            <el-tab-pane label="空间信息" name="2">
+              <div class="row">
+                <div class="col height-mode-box">
+                  <span class="label" style="flex: 0 0 56px;">高度模式</span>
+                  <el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px"
+                    v-model="heightMode" @change="heightModeChange" placeholder="请选择">
+                    <el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key">
+                    </el-option>
+                  </el-select>
+                </div>
+                <div class="col">
+                  <span class="label">Z值统一增加</span>
+                  <div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }">
+                    <input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height">
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                  </div>
+                  <button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm"
+                    :disabled="heightMode == 2">应用</button>
+                </div>
+              </div>
+              <div class="row">
+                <div class="table spatial-info-table">
+                  <div class="table-head">
+                    <div class="tr">
+                      <div class="th"></div>
+                      <div class="th">经度（X）</div>
+                      <div class="th">纬度（Y）</div>
+                      <div class="th">高度（Z）</div>
+                    </div>
+                  </div>
+                  <div class="table-body">
+                    <div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
+                      <div class="td">{{ i + 1 }}</div>
+                      <div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
+                        <input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
+                          v-model="item.lng" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lng'">
+                        <span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span>
+                      </div>
+                      <div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
+                        <input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number"
+                          v-model="item.lat" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lat'">
+                        <span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span>
+                      </div>
+                      <div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
+                        <input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
+                          v-model="entityOptions.height" min="-9999999" max="999999999"
+                          v-if="activeTd.index == i && activeTd.name == 'alt'">
+                        <span style="pointer-events: none;" v-else>{{ (entityOptions.height).toFixed(2) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="面风格" name="3">
+              <div class="row">
+                <div class="col">
+                  <span class="label">面颜色</span>
+                  <div class="color" ref="colorRef"></div>
+                </div>
+                <div class="col">
+                  <span class="label">描边颜色</span>
+                  <div class="lineColor" ref="lineColorRef"></div>
+                </div>
+                <div class="col">
+                  <span class="label">描边宽度</span>
+                  <div class="input-number input-number-unit-2">
+                    <input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth">
+                    <span class="unit">px</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="标签风格" name="4">
+              <labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+      <span class="custom-divider"></span>
+    </template>
+    <template #footer>
+      <div style="position: absolute; left: 24px; display: flex;">
+        <button @click="nodeEdit"><svg class="icon-edit">
+            <use xlink:href="#yj-icon-edit"></use>
+          </svg>二次编辑</button>
+        <button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
+            <use xlink:href="#yj-icon-py"></use>
+          </svg>平移</button>
+      </div>
+      <button @click="remove">删除</button>
+      <button @click="confirm">确定</button>
+      <button @click="close">关闭</button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { inject } from "vue";
+import { updateInfo, deleteSource} from '@/views/largeScreen/components/api'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import Dialog from './baseDialog.vue'
+// import attribute from './attribute.vue'
+import labelStyle from './labelStyle.vue'
+import { useTreeNode } from '../treeNode'
+
+const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
+
+const title = ref('面')
+const baseDialog: any = ref(null);
+const eventBus: any = inject('bus')
+const options = ref({});
+const colorRef = ref(null)
+const lineColorRef = ref(null)
+// eventBus.on("openPolygonEdit", () => {
+//   baseDialog.value?.open()
+// });
+
+const area = ref(0)
+const areaUnit = ref('m2')
+const height = ref(10)
+const heightModeData = ref([
+  {
+    name: '海拔高度',
+    value: '海拔高度',
+    key: 0
+  },
+  {
+    name: '相对地表',
+    value: '相对地表',
+    key: 1
+  },
+  {
+    name: '依附模型',
+    value: '依附模型',
+    key: 2
+  }
+])
+
+const activeName = ref('2')
+const activeTd = ref({
+  index: -1,
+  name: ''
+})
+const positions = ref([])
+const heightMode = ref(0)
+const entityOptions: any = ref({});
+let originalOptions: any
+let that: any
+
+const open = async (id: any, type: any) => {
+  if(type && type === 'rectangle') {
+    title.value = '矩形'
+  }
+  else if(type && type === 'rendezvous') {
+    title.value = '集结地'
+  }
+  that = window['Earth1'].entityMap.get(id)
+  originalOptions = structuredClone(that.options)
+  entityOptions.value = that
+  heightMode.value = entityOptions.value.heightMode
+  area.value = entityOptions.value.areaByMeter
+  positions.value = structuredClone(that.options.positions)
+  that.areaChangeCallBack = () => {
+    switch (areaUnit.value) {
+      case 'm2'://平方米
+        area.value = entityOptions.value.areaByMeter
+        break
+      case 'km2'://平方千米
+        area.value = Number((entityOptions.value.areaByMeter / 1000000).toFixed(8))
+        break
+      case 'mu'://亩
+        area.value = Number(
+          (entityOptions.value.areaByMeter / 666.6666667).toFixed(4)
+        )
+        break
+      case 'ha'://公顷
+        area.value = Number((entityOptions.value.areaByMeter / 10000).toFixed(6))
+        break
+      default:
+        area.value = entityOptions.value.areaByMeter
+    }
+  }
+  heightModeChange(heightMode.value)
+  baseDialog.value?.open()
+
+  await nextTick()
+  let colorPicker = new window['YJColorPicker']({
+    el: colorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.color,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: color => {
+      entityOptions.value.color = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.color = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  let linecolorPicker = new window['YJColorPicker']({
+    el: lineColorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.lineColor,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: color => {
+      entityOptions.value.lineColor = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.lineColor = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+}
+
+const heightModeChange = (val) => {
+  that.heightMode = heightMode.value
+}
+
+const heightConfirm = () => {
+  if (entityOptions.value.operate.positionEditing) {
+    that.positionEditing = false
+    entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
+  }
+  else {
+    that.closeNodeEdit(this)
+    that.heightMode = that.heightMode
+    setTimeout(() => {
+      entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
+    }, 100);
+  }
+}
+const inputDblclick = async (event, i, anme) => {
+  if(heightMode.value == 2) {
+    return
+  }
+  activeTd.value = {
+    index: i,
+    name: anme
+  }
+  await nextTick()
+  let inputElm = event.target.getElementsByClassName('input')[0]
+  if (inputElm) {
+    inputElm.focus()
+  }
+}
+const inputBlurCallBack = (event, i, name, digit = 2) => {
+  activeTd.value = {
+    index: -1,
+    name: ''
+  }
+}
+
+const translate = () => {
+  that.openPositionEditing(() => {
+    entityOptions.value.options.positions = structuredClone(that.options.positions)
+  })
+}
+
+const closeCallback = () => {
+  entityOptions.value.originalOptions = structuredClone(originalOptions)
+  that.positionEditing = false
+  entityOptions.value.closeNodeEdit()
+  entityOptions.value.reset()
+  // eventBus.emit("destroyComponent")
+}
+
+const nodeEdit = () => {
+  that.nodeEdit((e, positions, areaByMeter) => {
+    console.log('positions', positions)
+    entityOptions.value.options.positions = structuredClone(positions)
+  })
+}
+
+const confirm = () => {
+  originalOptions = structuredClone(that.options)
+  baseDialog.value?.close()
+  let params = structuredClone(that.options)
+  delete params.host
+  let params2 = {
+    "id": params.id,
+    "sourceName": params.name,
+    "params": params,
+    "isShow": params.show ? 1 : 0,
+  }
+  updateInfo(params2)
+  cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
+}
+const close = () => {
+  baseDialog.value?.close()
+}
+
+const remove = () => {
+  close()
+  ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(async () => {
+        let selectNodes = getSelectedNodes(window['treeObj'])
+        let source_ids = cusRemoveNode(window['treeObj'], selectNodes)
+        const res = await deleteSource({ ids: source_ids })
+        if (res.code == 0 || res.code == 200) {
+          ElMessage({
+            message: '删除成功',
+            type: 'success'
+          })
+          that.remove()
+        } else {
+          ElMessage({
+            message: res.msg || '删除失败',
+            type: 'error'
+          })
+        }
+      })
+      .catch(() => {
+        // 用户点击取消，不执行任何操作
+      })
+}
+
+watch(
+  () => areaUnit.value,
+  (val) => {
+    if ((entityOptions.value.areaByMeter || entityOptions.value.areaByMeter == 0) && that) {
+      that.areaChangeCallBack()
+    }
+  },
+  { immediate: true }
+);
+
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/largeScreen/components/newMap/dialog/polylineObject.vue

@@ -0,0 +1,629 @@
+<template>
+  <Dialog
+    ref="baseDialog"
+    title="线标注"
+    left="180px"
+    top="100px"
+    className="polyline"
+    :closeCallback="closeCallback"
+  >
+    <template #content>
+      <span class="custom-divider"></span>
+      <div class="div-item">
+        <div class="row" style="align-items: flex-start">
+          <div class="col">
+            <span class="label">名称</span>
+            <input class="input" maxlength="40" type="text" v-model="entityOptions.name" />
+          </div>
+          <div class="col" style="flex: 0 0 56%">
+            <div>
+              <div class="row">
+                <div class="col input-select-unit-box">
+                  <el-select v-model="entityOptions.wordsName">
+                    <el-option label="空间长度" :value="0"></el-option>
+                    <el-option label="投影长度" :value="1"></el-option>
+                    <el-option label="地表长度" :value="2"></el-option>
+                  </el-select>
+                  <input v-model="length" class="input-text" readonly />
+                  <el-select v-model="lengthUnit">
+                    <el-option label="米" value="m"></el-option>
+                    <el-option label="千米" value="km"></el-option>
+                  </el-select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="div-item">
+        <div class="row">
+          <el-tabs v-model="activeName">
+            <!-- <el-tab-pane label="属性信息" name="1">
+              <attribute :entityOptions="entityOptions"></attribute>
+            </el-tab-pane> -->
+            <el-tab-pane label="空间信息" name="2">
+              <div class="row">
+                <div class="col height-mode-box">
+                  <span class="label" style="flex: 0 0 56px">高度模式</span>
+                  <el-select
+                    class="input input-select height-mode-scelect"
+                    style="width: 155px; margin-left: 20px"
+                    v-model="heightMode"
+                    @change="heightModeChange"
+                    placeholder="请选择"
+                  >
+                    <el-option
+                      v-for="item in heightModeData"
+                      :key="item.key"
+                      :label="item.name"
+                      :value="item.key"
+                    >
+                    </el-option>
+                  </el-select>
+                </div>
+                <div class="col">
+                  <span class="label">Z值统一增加</span>
+                  <div
+                    class="input-number input-number-unit-1 height-box"
+                    :class="{ disabled: heightMode == 2 }"
+                  >
+                    <input
+                      class="input height"
+                      type="number"
+                      title=""
+                      min="-9999999"
+                      max="999999999"
+                      v-model="height"
+                    />
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                  </div>
+                  <button
+                    class="confirm height-confirm"
+                    style="margin-left: 5px"
+                    @click="heightConfirm"
+                    :disabled="heightMode == 2"
+                  >
+                    应用
+                  </button>
+                </div>
+              </div>
+              <div class="row">
+                <div class="table spatial-info-table">
+                  <div class="table-head">
+                    <div class="tr">
+                      <div class="th"></div>
+                      <div class="th">经度（X）</div>
+                      <div class="th">纬度（Y）</div>
+                      <div class="th">高度（Z）</div>
+                    </div>
+                  </div>
+                  <div class="table-body">
+                    <div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
+                      <div class="td">{{ i + 1 }}</div>
+                      <div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
+                        <input
+                          class="input"
+                          @blur="inputBlurCallBack($event, i, 'lng', 8)"
+                          type="number"
+                          v-model="item.lng"
+                          min="-180"
+                          max="180"
+                          v-if="activeTd.index == i && activeTd.name == 'lng'"
+                        />
+                        <span style="pointer-events: none" v-else>{{ item.lng.toFixed(8) }}</span>
+                      </div>
+                      <div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
+                        <input
+                          class="input"
+                          @blur="inputBlurCallBack($event, i, 'lat', 8)"
+                          type="number"
+                          v-model="item.lat"
+                          min="-180"
+                          max="180"
+                          v-if="activeTd.index == i && activeTd.name == 'lat'"
+                        />
+                        <span style="pointer-events: none" v-else>{{ item.lat.toFixed(8) }}</span>
+                      </div>
+                      <div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
+                        <input
+                          class="input"
+                          @blur="inputBlurCallBack($event, i, 'alt', 2)"
+                          type="number"
+                          v-model="item.alt"
+                          min="-9999999"
+                          max="999999999"
+                          v-if="activeTd.index == i && activeTd.name == 'alt'"
+                        />
+                        <span style="pointer-events: none" v-else>{{ item.alt.toFixed(2) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="线条风格" name="3">
+              <div class="row">
+                <div class="col">
+                  <span class="label">线条颜色</span>
+                  <div class="color" ref="colorRef"></div>
+                </div>
+                <div class="col" style="flex: 0 0 33%">
+                  <span class="label">线条宽度</span>
+                  <div class="input-number input-number-unit-1" style="width: 80px">
+                    <input
+                      class="input"
+                      type="number"
+                      title=""
+                      min="1"
+                      max="999"
+                      v-model="entityOptions.lineWidth"
+                    />
+                    <span class="unit">px</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+                <div class="col input-select-line-type-box" style="flex: 0 0 37%">
+                  <span class="label">线条形式</span>
+                  <el-select
+                    class="input input-select input-select-line-type"
+                    style="margin-left: 20px"
+                    v-model="entityOptions.lineType"
+                    @change="lineTypechange"
+                  >
+                    <el-option
+                      v-for="item in lineTypeData"
+                      :key="item.key"
+                      :label="item.name"
+                      :value="item.key"
+                    >
+                      <i class="yj-custom-icon" :class="item.icon"></i>
+                      {{ item.name }}
+                    </el-option>
+                  </el-select>
+                </div>
+              </div>
+              <div class="row">
+                <div class="col">
+                  <span class="label">首尾相连</span>
+                  <input class="btn-switch" type="checkbox" v-model="entityOptions.noseToTail" />
+                </div>
+                <div class="col" style="flex: 0 0 33%">
+                  <span class="label">线段圆滑</span>
+                  <input class="btn-switch" type="checkbox" v-model="entityOptions.smooth" />
+                </div>
+                <div class="col" style="flex: 0 0 37%"></div>
+              </div>
+              <div class="row">
+                <div class="col">
+                  <span class="label">线段缓冲</span>
+                  <input class="btn-switch" type="checkbox" v-model="entityOptions.extend" />
+                </div>
+                <div class="col" style="flex: 0 0 33%">
+                  <span class="label">缓冲宽度</span>
+                  <div class="input-number input-number-unit-1" style="width: 80px">
+                    <input
+                      class="input"
+                      type="number"
+                      title=""
+                      min="0"
+                      data-min="0.01"
+                      max="999999"
+                      v-model="entityOptions.extendWidth"
+                    />
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+                <div class="col" style="flex: 0 0 37%">
+                  <span class="label">缓冲颜色</span>
+                  <div class="extendColor" ref="extendColorRef"></div>
+                </div>
+              </div>
+              <div class="row" v-show="entityOptions.lineType > 2 && entityOptions.lineType < 13">
+                <div class="col">
+                  <span class="label">首尾反向</span>
+                  <input class="btn-switch" type="checkbox" v-model="entityOptions.rotate" />
+                </div>
+                <div class="col" style="flex: 0 0 33%">
+                  <span class="label">流动速率</span>
+                  <div class="input-number input-number-unit-1" style="width: 80px">
+                    <input
+                      class="input"
+                      type="number"
+                      title=""
+                      min="0"
+                      max="999999"
+                      step="1"
+                      v-model="entityOptions.speed"
+                    />
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+                <div class="col" style="flex: 0 0 37%">
+                  <span
+                    class="label lineSpace"
+                    v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
+                    >线条间距</span
+                  >
+                  <div
+                    class="input-number input-number-unit-1 lineSpace"
+                    style="width: 80px"
+                    v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
+                  >
+                    <input
+                      class="input"
+                      type="number"
+                      title=""
+                      min="0"
+                      max="4.5"
+                      step="0.1"
+                      v-model="entityOptions.space"
+                    />
+                    <span class="unit">倍</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="标签风格" name="4">
+              <labelStyle type="线" :entityOptions="entityOptions"></labelStyle>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div style="position: absolute; left: 24px; display: flex">
+        <button @click="nodeEdit">
+          <svg class="icon-edit">
+            <use xlink:href="#yj-icon-edit"></use></svg>二次编辑
+        </button>
+        <button style="margin-left: 10px" @click="translate">
+          <svg class="icon-py">
+            <use xlink:href="#yj-icon-py"></use></svg>平移
+        </button>
+      </div>
+      <button @click="remove">删除</button>
+      <button @click="confirm">确定</button>
+      <button @click="close">关闭</button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, getCurrentInstance } from 'vue'
+import { inject } from 'vue'
+import { updateInfo, deleteSource} from '@/views/largeScreen/components/api'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import Dialog from './baseDialog.vue'
+// import attribute from './attribute.vue'
+import labelStyle from './labelStyle.vue'
+import { useTreeNode } from '../treeNode'
+import { de } from 'element-plus/es/locale/index.mjs'
+
+const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
+
+const baseDialog: any = ref(null)
+const eventBus: any = inject('bus')
+
+const length = ref(0)
+const lengthUnit = ref('m')
+const height = ref(10)
+const heightModeData = ref([
+  {
+    name: '海拔高度',
+    value: '海拔高度',
+    key: 0
+  },
+  {
+    name: '相对地表',
+    value: '相对地表',
+    key: 1
+  },
+  {
+    name: '依附模型',
+    value: '依附模型',
+    key: 2
+  }
+])
+const lineTypeData = ref([
+  {
+    name: '实线',
+    value: '实线',
+    key: 0,
+    icon: 'line'
+  },
+  {
+    name: '虚线',
+    value: '虚线',
+    key: 1,
+    icon: 'dash-line'
+  },
+  {
+    name: '泛光',
+    value: '泛光',
+    key: 2,
+    icon: 'light-line'
+  },
+  {
+    name: '尾迹光线',
+    value: '尾迹光线',
+    key: 3,
+    icon: 'tail-line'
+  },
+  {
+    name: '多尾迹光线',
+    value: '多尾迹光线',
+    key: 4,
+    icon: 'mult-tail-line'
+  },
+  {
+    name: '流动虚线1',
+    value: '流动虚线1',
+    key: 5,
+    icon: 'flow-dash-line1'
+  },
+  {
+    name: '流动虚线2',
+    value: '流动虚线2',
+    key: 6,
+    icon: 'flow-dash-line2'
+  },
+  {
+    name: '流动箭头1',
+    value: '流动箭头1',
+    key: 7,
+    icon: 'pic-line1'
+  },
+  {
+    name: '流动箭头2',
+    value: '流动箭头2',
+    key: 8,
+    icon: 'pic-line2'
+  },
+  {
+    name: '流动箭头3',
+    value: '流动箭头3',
+    key: 9,
+    icon: 'pic-line3'
+  },
+  {
+    name: '流动箭头4',
+    value: '流动箭头4',
+    key: 10,
+    icon: 'pic-line4'
+  },
+  {
+    name: '流动箭头5',
+    value: '流动箭头5',
+    key: 11,
+    icon: 'pic-line5'
+  },
+  {
+    name: '流动箭头6',
+    value: '流动箭头6',
+    key: 12,
+    icon: 'pic-line6'
+  }
+])
+const activeName = ref('2')
+const activeTd = ref({
+  index: -1,
+  name: ''
+})
+const entityOptions: any = ref({})
+const linePositions = ref([])
+const colorRef = ref(null)
+const extendColorRef = ref(null)
+const heightMode = ref(0)
+
+let originalOptions: any
+let that: any
+
+const open = async (id: any) => {
+  that = window['Earth1'].entityMap.get(id)
+  originalOptions = structuredClone(that.options)
+  entityOptions.value = that
+  heightMode.value = entityOptions.value.heightMode
+  length.value = entityOptions.value.lengthByMeter
+  linePositions.value = structuredClone(that.options.positions)
+  that.lengthChangeCallBack = () => {
+    if (lengthUnit.value == 'km') {
+      length.value = entityOptions.value.lengthByMeter / 1000
+    } else {
+      length.value = entityOptions.value.lengthByMeter
+    }
+  }
+  heightModeChange(heightMode.value)
+  baseDialog.value?.open()
+
+  await nextTick()
+  let colorPicker = new (window as any).YJColorPicker({
+    el: colorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.color,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.color = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.color = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  let extendColorPicker = new (window as any).YJColorPicker({
+    el: extendColorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.extendColor,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: (color) => {
+      entityOptions.value.extendColor = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.extendColor = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+}
+const heightModeChange = (val) => {
+  that.heightMode = heightMode.value
+}
+const heightConfirm = () => {
+  that.positionEditing = false
+  for (let i = 0; i < entityOptions.value.options.positions.length; i++) {
+    entityOptions.value.options.positions[i].alt = Number(
+      (entityOptions.value.options.positions[i].alt + Number(height.value)).toFixed(2)
+    )
+  }
+  that.smooth = that.smooth
+}
+const inputDblclick = async (event, i, anme) => {
+  if (heightMode.value == 2) {
+    return
+  }
+  activeTd.value = {
+    index: i,
+    name: anme
+  }
+  await nextTick()
+  let inputElm = event.target.getElementsByClassName('input')[0]
+  if (inputElm) {
+    inputElm.focus()
+  }
+}
+const inputBlurCallBack = (event, i, name, digit = 2) => {
+  entityOptions.value.options.positions[i][name] = Number(Number(event.target.value).toFixed(digit))
+  entityOptions.value.positionEditing = false
+  activeTd.value = {
+    index: -1,
+    name: ''
+  }
+}
+
+const lineTypechange = () => {}
+const nodeEdit = () => {
+  entityOptions.value.positionEditing = false
+  entityOptions.value.noseToTail = false
+  heightMode.value = 0
+  that.heightMode = 0
+  that.nodeEdit((positions, lenByMeter) => {
+    entityOptions.value.options.positions = structuredClone(positions)
+    if (lengthUnit.value == 'km') {
+      length.value = lenByMeter / 1000
+    } else {
+      length.value = lenByMeter
+    }
+  })
+}
+const translate = () => {
+  that.openPositionEditing(() => {
+    entityOptions.value.options.positions = structuredClone(that.options.positions)
+    if (lengthUnit.value == 'km') {
+      length.value = entityOptions.value.lengthByMeter / 1000
+    } else {
+      length.value = entityOptions.value.lengthByMeter
+    }
+  })
+}
+
+const closeCallback = () => {
+  entityOptions.value.originalOptions = structuredClone(originalOptions)
+  that.positionEditing = false
+  entityOptions.value.closeNodeEdit()
+  entityOptions.value.reset()
+  // eventBus.emit('destroyComponent')
+}
+const confirm = () => {
+  originalOptions = structuredClone(that.options)
+  baseDialog.value?.close()
+  let params = structuredClone(that.options)
+  delete params.host
+  let params2 = {
+    id: params.id,
+    sourceName: params.name,
+    params: params,
+    isShow: params.show ? 1 : 0
+  }
+  updateInfo(params2)
+  cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) })
+}
+const close = () => {
+  baseDialog.value?.close()
+}
+
+const remove = () => {
+  close()
+  ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(async () => {
+        let selectNodes = getSelectedNodes(window['treeObj'])
+        let source_ids = cusRemoveNode(window['treeObj'], selectNodes)
+        const res = await deleteSource({ ids: source_ids })
+        if (res.code == 0 || res.code == 200) {
+          ElMessage({
+            message: '删除成功',
+            type: 'success'
+          })
+          that.remove()
+        } else {
+          ElMessage({
+            message: res.msg || '删除失败',
+            type: 'error'
+          })
+        }
+      })
+      .catch(() => {
+        // 用户点击取消，不执行任何操作
+      })
+}
+
+watch(
+  () => lengthUnit.value,
+  (val) => {
+    if (entityOptions.value.lengthByMeter || entityOptions.value.lengthByMeter == 0) {
+      if (lengthUnit.value == 'km') {
+        length.value = entityOptions.value.lengthByMeter / 1000
+      } else {
+        length.value = entityOptions.value.lengthByMeter
+      }
+    }
+  },
+  { immediate: true }
+)
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped lang="scss">
+.polyline {
+  ::v-deep .input-select-unit-box {
+    .el-input-group__prepend {
+      width: 100px;
+    }
+
+    .el-input__wrapper {
+      width: 130px;
+      padding: 0;
+      background: rgba(0, 0, 0, 0.5);
+      box-shadow: unset;
+
+      .el-input__inner {
+        border-radius: 0;
+        background: unset;
+      }
+    }
+
+    .el-input-group__append {
+      width: 75px;
+    }
+  }
+}
+</style>

src/views/largeScreen/components/newMap/dialog/rightMenu.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { useRightOperate } from '../rightOperate';
+const menus: any = ref([]); //右侧菜单
+const { rightMenus, itemClick } = useRightOperate();
+const rightClickTreeNode: any = ref();
+// 初始化菜单
+const initMenus = (arr: any, treeNode: any) => {
+  let rightMenu: any = [];
+  console.log('rightMenu2222', rightMenu);
+  if (treeNode) {
+    rightClickTreeNode.value = treeNode;
+    arr.forEach((menuId: any) => {
+      rightMenu.push(rightMenus[menuId]);
+    });
+  } else rightMenu = [rightMenus.addDirectory];
+  console.log('rightMenu', rightMenu);
+  menus.value = rightMenu;
+};
+const hideRightMenu = () => {
+  window['$']('#rMenu')[0].style.visibility = 'hidden';
+};
+defineExpose({
+  initMenus
+});
+</script>
+
+<template>
+  <div class="rightMenu" id="rMenu">
+    <div class="menuItem custom_scroll_bar">
+      <div v-if="menus.length > 0">
+        <div v-for="item in menus" class="itemBox" :key="item.key" @click="itemClick(item)" @mouseup="hideRightMenu">
+          <!-- <div class="itemIcon">
+            <svg-icon :class-name="item.key" :size="14"></svg-icon>
+          </div> -->
+          <div class="itemText">
+            <!-- {{ t(`rightMenu.${item.key}`) }} -->
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <div class="itemBox">
+          <div class="itemText">无操作权限</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.rightMenu {
+  user-select: none;
+  width: 8.5vw;
+  height: 23vh;
+  visibility: hidden;
+  background-color: rgba(0, 0, 0, 0.5);
+  border: 1.5px solid;
+  box-sizing: border-box;
+  border-image: linear-gradient(137.95deg, rgba(0, 255, 255, 1) 6.25%, rgba(0, 200, 255, 1) 100%) 1.5;
+
+  .menuItem {
+    //padding: 1vh .5vw;
+    font-size: 12px;
+    overflow-y: auto;
+    height: 100%;
+    // margin-top: 16px;
+
+    & > div {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      margin: 0 auto;
+      //span{
+      line-height: 20px;
+
+      .itemBox {
+        width: 100%;
+        cursor: pointer;
+        font-size: 1rem;
+        padding: 5px 0;
+        display: flex;
+        align-items: center;
+        /* 默认文字颜色 */
+        color: #fff;
+        // transition: all 0.2s ease; /* 添加过渡动画使效果更平滑 */
+        justify-content: center;
+      }
+
+      .itemBox:hover {
+        width: 100%;
+        background: rgba(0, 255, 255, 0.2);
+        /* 悬停时的文字颜色 */
+        color: rgba(0, 255, 255, 1);
+      }
+
+      .itemText {
+        text-align: left;
+        font-size: 14px;
+      }
+
+      .itemIcon {
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin-right: 8px;
+      }
+
+      /* 关键：通过currentColor继承父元素的文字颜色 */
+      .itemIcon svg {
+        color: inherit; /* 继承itemIcon的颜色 */
+      }
+
+      /* 确保SVG图标正确继承颜色 */
+      .svg-icon {
+        fill: currentColor !important;
+        stroke: currentColor !important;
+      }
+    }
+  }
+}
+</style>

src/views/largeScreen/components/newMap/dialog/standText.vue

@@ -0,0 +1,149 @@
+<template>
+  <Dialog ref="baseDialog" title="立体文字属性" left="180px" top="100px" className="ground-text"
+    :closeCallback="closeCallback">
+    <template #content>
+      <span class="custom-divider"></span>
+      <div class="div-item">
+        <div class="row">
+          <div class="col">
+            <span class="label">名称</span>
+            <textarea v-model="entityOptions.text"></textarea>
+          </div>
+          <div class="col">
+            <span class="label">颜色</span>
+            <div class="color" ref="colorRef" </div>
+            </div>
+          </div>
+        </div>
+        <span class="custom-divider"></span>
+        <div class="div-item">
+          <div class="row">
+            <div class="col">
+              <span class="label">滚动速度</span>
+              <input type="range" max="100" min="0" step="1" v-model="entityOptions.speed">
+              <div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
+                <input class="input" type="number" title="" min="0" max="100" step="1" v-model="entityOptions.speed">
+                <span class="arrow"></span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <span class="custom-divider"></span>
+    </template>
+    <template #footer>
+      <div style="position: absolute; left: 24px; display: flex;">
+        <button @click="nodeEdit"><svg class="icon-edit">
+            <use xlink:href="#yj-icon-edit"></use>
+          </svg>二次编辑</button>
+      </div>
+      <button @click="remove">删除</button>
+      <button @click="confirm">确定</button>
+      <button @click="close">关闭</button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { inject } from "vue";
+import { updateInfo, deleteSource} from '@/views/largeScreen/components/api'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import Dialog from './baseDialog.vue'
+import { useTreeNode } from '../treeNode'
+const { cusUpdateNode, getSelectedNodes, cusRemoveNode } = useTreeNode()
+
+const baseDialog: any = ref(null);
+const eventBus: any = inject("bus");
+// eventBus.on("openStandTextAdd", () => {
+//   baseDialog.value?.open()
+// });
+const entityOptions: any = ref({});
+let originalOptions: any
+let that: any
+const colorRef = ref(null)
+const open = async (id: any) => {
+  that = window['Earth1'].entityMap.get(id)
+  originalOptions = structuredClone(that.options)
+  entityOptions.value = that
+  baseDialog.value?.open()
+  await nextTick()
+  let colorPicker = new window['YJColorPicker']({
+    el: colorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.color,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: color => {
+      entityOptions.value.color = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.color = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+}
+const confirm = () => {
+  originalOptions = structuredClone(that.options)
+  baseDialog.value?.close()
+  let params = structuredClone(that.options)
+  // 删除不必要的属性
+  delete params.host
+  delete params.name
+  let params2 = {
+    "id": params.id,
+    "sourceName": params.text,
+    "params": params,
+    "isShow": params.show ? 1 : 0,
+  }
+  updateInfo(params2)
+  cusUpdateNode({ "id": params.id, "sourceName": params.text, "params": JSON.stringify(params) })
+}
+const close = () => {
+  baseDialog.value?.close()
+}
+const remove = () => {
+  close()
+  ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+      .then(async () => {
+        let selectNodes = getSelectedNodes(window['treeObj'])
+        let source_ids = cusRemoveNode(window['treeObj'], selectNodes)
+        const res = await deleteSource({ ids: source_ids })
+        if (res.code == 0 || res.code == 200) {
+          ElMessage({
+            message: '删除成功',
+            type: 'success'
+          })
+          that.remove()
+        } else {
+          ElMessage({
+            message: res.msg || '删除失败',
+            type: 'error'
+          })
+        }
+      })
+      .catch(() => {
+        // 用户点击取消，不执行任何操作
+      })
+}
+const nodeEdit = () => {
+  that.nodeEdit()
+}
+
+const closeCallback = () => {
+  entityOptions.value.originalOptions = structuredClone(originalOptions)
+  that.positionEditing = false
+  that.reset()
+  // eventBus?.emit("destroyComponent")
+}
+
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/largeScreen/components/newMap/entityClick.ts

@@ -0,0 +1,10 @@
+import app from '@/main';
+
+function leftClick(options) {
+  console.log('leftClick', options);
+  if (options && options.entityType === 'monitor') {
+    console.log('标注为监控点，即将弹出视频框', app);
+    app.config.globalProperties['$sendChanel']('openVideo', options);
+  }
+}
+export { leftClick };

src/views/largeScreen/components/newMap/index.js

@@ -0,0 +1,392 @@
+export class ModelPathMover {
+  /**
+   * 构造函数
+   * @param {Cesium.Viewer} viewer - Cesium viewer实例
+   * @param {Object} options - 配置选项
+   * @param {Number} [options.baseHeight=0] - 外部传入的统一高度（米），将叠加到所有位置点上
+   */
+  constructor(viewer, options) {
+    this.viewer = viewer;
+    this.modelUrl = options.modelUrl;
+    this.positions = options.positions || [];
+    this.speed = options.speed || 10; // 米/秒
+    this.loop = options.loop !== undefined ? options.loop : true;
+    this.pathStyle = options.pathStyle || {
+      color: Cesium.Color.YELLOW,
+      width: 3
+    };
+    this.markerStyle = options.markerStyle || {
+      color: Cesium.Color.RED,
+      pixelSize: 10,
+      outlineColor: Cesium.Color.WHITE,
+      outlineWidth: 2
+    };
+    this.iconUrl = options.iconUrl;
+    this.iconSize = options.iconSize || 32;
+    this.iconOffset = options.iconOffset || 0;
+    this.headingOffset = options.headingOffset || 0;
+    // 新增：接收外部传入的统一高度（默认0米）
+    this.baseHeight = options.baseHeight || 0;
+
+    // 内部状态（保持不变）
+    this.modelEntity = null;
+    this.pathEntity = null;
+    this.markerEntities = [];
+    this.iconEntity = null;
+    this.currentIndex = 0;
+    this.isMoving = false;
+    this.lastTime = 0;
+    this.animationFrameId = null;
+    this.currentPosition = null;
+    this.progress = 0;
+    this.modelHeight = 0;
+
+    // 初始化
+    this.init();
+
+    // 调试信息（增加baseHeight打印）
+    console.log('ModelPathMover初始化完成', {
+      positionCount: this.positions.length,
+      speed: this.speed,
+      loop: this.loop,
+      baseHeight: this.baseHeight // 打印传入的统一高度
+    });
+  }
+
+  /**
+   * 初始化（保持不变）
+   */
+  init() {
+    if (this.positions.length < 2) {
+      console.warn('至少需要2个位置点才能进行移动');
+    }
+    this.createPath();
+    this.createMarkers();
+    this.createModel();
+    if (this.iconUrl) {
+      this.createIcon();
+    }
+  }
+
+  /**
+   * 创建模型（修改：叠加baseHeight）
+   */
+  createModel() {
+    if (this.positions.length === 0) return;
+
+    const firstPos = this.positions[0];
+    // 关键修改：在原始高度基础上叠加baseHeight
+    const finalHeight = (firstPos.height || 0) + this.baseHeight;
+    this.currentPosition = Cesium.Cartesian3.fromDegrees(
+      firstPos.lon,
+      firstPos.lat,
+      finalHeight // 使用叠加后的高度
+    );
+
+    // 初始朝向计算（保持不变）
+    let initialOrientation = Cesium.Transforms.headingPitchRollQuaternion(this.currentPosition, new Cesium.HeadingPitchRoll(0, 0, 0));
+
+    if (this.positions.length > 1) {
+      const nextPos = this.positions[1];
+      // 计算下一个点时同样叠加baseHeight
+      const nextFinalHeight = (nextPos.height || 0) + this.baseHeight;
+      const nextCartesian = Cesium.Cartesian3.fromDegrees(nextPos.lon, nextPos.lat, nextFinalHeight);
+      const heading = this.calculateHeading(this.currentPosition, nextCartesian);
+      initialOrientation = Cesium.Transforms.headingPitchRollQuaternion(this.currentPosition, new Cesium.HeadingPitchRoll(heading, 0, 0));
+    }
+
+    this.modelEntity = this.viewer.entities.add({
+      name: 'Moving Model',
+      position: this.currentPosition,
+      orientation: initialOrientation,
+      model: {
+        uri: this.modelUrl,
+        minimumPixelSize: 64,
+        readyPromise: (model) => {
+          const boundingSphere = model.boundingSphere;
+          if (boundingSphere) {
+            this.modelHeight = boundingSphere.radius * 2;
+            console.log('模型高度检测完成:', this.modelHeight, '米');
+          }
+        }
+      }
+    });
+  }
+
+  /**
+   * 创建路径（修改：叠加baseHeight）
+   */
+  createPath() {
+    if (this.positions.length < 2) return;
+
+    // 关键修改：遍历所有点时，给每个点的高度叠加baseHeight
+    const pathPositions = this.positions.map((pos) => {
+      const finalHeight = (pos.height || 0) + this.baseHeight;
+      return Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, finalHeight);
+    });
+
+    this.pathEntity = this.viewer.entities.add({
+      name: 'Model Path',
+      polyline: {
+        positions: pathPositions,
+        width: this.pathStyle.width,
+        material: this.pathStyle.color,
+        clampToGround: false
+      }
+    });
+  }
+
+  /**
+   * 创建位置标记（修改：叠加baseHeight）
+   */
+  createMarkers() {
+    this.markerEntities = this.positions.map((pos, index) => {
+      // 关键修改：标记点高度同样叠加baseHeight
+      const finalHeight = (pos.height || 0) + this.baseHeight;
+      const position = Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat, finalHeight);
+
+      const marker = this.viewer.entities.add({
+        name: `Position Marker ${index}`,
+        position: position,
+        point: {
+          color: this.markerStyle.color,
+          pixelSize: this.markerStyle.pixelSize,
+          outlineColor: this.markerStyle.outlineColor,
+          outlineWidth: this.markerStyle.outlineWidth
+        },
+        label: {
+          text: pos.name || '',
+          font: '14px sans-serif',
+          pixelOffset: new Cesium.Cartesian2(0, -20),
+          fillColor: Cesium.Color.WHITE
+        }
+      });
+
+      return marker;
+    });
+  }
+
+  /**
+   * 创建模型上方的图标（保持不变）
+   */
+  createIcon() {
+    this.iconEntity = this.viewer.entities.add({
+      name: '人员A',
+      position: new Cesium.CallbackProperty(() => {
+        return this.adjustCartesianHeight(this.currentPosition, 0.3);
+      }, false),
+      billboard: {
+        image: this.iconUrl,
+        width: this.iconSize,
+        height: this.iconSize,
+        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
+      },
+      label: {
+        text: '人员A',
+        font: '14px sans-serif',
+        pixelOffset: new Cesium.Cartesian2(0, -40),
+        fillColor: Cesium.Color.WHITE
+      }
+    });
+  }
+
+  /**
+   * 调整笛卡尔坐标的高度（在原有高度基础上叠加指定值）
+   * @param {Cesium.Cartesian3} cartesian - 原始笛卡尔坐标
+   * @param {Number} heightOffset - 要增加的高度值（米，可为负数）
+   * @param {Cesium.Ellipsoid} [ellipsoid=Cesium.Ellipsoid.WGS84] - 参考椭球体
+   * @returns {Cesium.Cartesian3|null} 调整高度后的笛卡尔坐标（失败返回null）
+   */
+  adjustCartesianHeight(cartesian, heightOffset, ellipsoid = Cesium.Ellipsoid.WGS84) {
+    // 1. 校验输入的笛卡尔坐标是否有效
+    // if (!Cesium.Cartesian3.isValid(cartesian)) {
+    //   console.error("无效的笛卡尔坐标，无法调整高度");
+    //   return null;
+    // }
+
+    // 2. 笛卡尔坐标 → Cartographic（地理坐标，含弧度经纬度和高度）
+    const cartographic = Cesium.Cartographic.fromCartesian(cartesian, ellipsoid);
+    if (!cartographic) {
+      console.error('笛卡尔坐标转换为Cartographic失败');
+      return null;
+    }
+
+    // 3. 调整高度（在原有高度上叠加offset，可为负数）
+    cartographic.height += heightOffset;
+    // 可选：确保高度不低于0（根据需求决定是否保留）
+    // cartographic.height = Math.max(cartographic.height, 0);
+
+    // 4. Cartographic → 笛卡尔坐标（使用弧度经纬度转换）
+    const adjustedCartesian = Cesium.Cartesian3.fromRadians(
+      cartographic.longitude, // 经度（弧度）
+      cartographic.latitude, // 纬度（弧度）
+      cartographic.height, // 调整后的高度（米）
+      ellipsoid
+    );
+
+    return adjustedCartesian;
+  }
+  /**
+   * 开始移动（保持不变）
+   */
+  start() {
+    if (this.isMoving) {
+      console.log('模型已经在移动中');
+      return;
+    }
+    if (this.positions.length < 2) {
+      console.error('无法移动：位置点数量不足（至少需要2个）');
+      return;
+    }
+    this.isMoving = true;
+    this.lastTime = performance.now();
+    this.progress = 0;
+    console.log('开始移动，速度：', this.speed, '米/秒');
+    this.animate();
+  }
+
+  /**
+   * 动画循环函数（保持不变）
+   */
+  animate() {
+    if (!this.isMoving) return;
+    const currentTime = performance.now();
+    const timeDeltaMs = currentTime - this.lastTime;
+    this.lastTime = currentTime;
+    const timeDelta = timeDeltaMs / 1000;
+    this.updatePosition(timeDelta);
+    this.animationFrameId = requestAnimationFrame(() => this.animate());
+  }
+
+  /**
+   * 停止移动（保持不变）
+   */
+  stop() {
+    if (!this.isMoving) return;
+    this.isMoving = false;
+    console.log('停止移动');
+    if (this.animationFrameId) {
+      cancelAnimationFrame(this.animationFrameId);
+      this.animationFrameId = null;
+    }
+  }
+
+  /**
+   * 更新模型位置（修改：叠加baseHeight）
+   */
+  updatePosition(timeDelta) {
+    if (!this.isMoving) return;
+    const distanceToMove = this.speed * timeDelta;
+    const currentPos = this.positions[this.currentIndex];
+    const nextIndex = (this.currentIndex + 1) % this.positions.length;
+    const nextPos = this.positions[nextIndex];
+
+    // 关键修改：计算当前点和下一点时，均叠加baseHeight
+    const currentFinalHeight = (currentPos.height || 0) + this.baseHeight;
+    const nextFinalHeight = (nextPos.height || 0) + this.baseHeight;
+
+    const currentCartesian = Cesium.Cartesian3.fromDegrees(currentPos.lon, currentPos.lat, currentFinalHeight);
+    const nextCartesian = Cesium.Cartesian3.fromDegrees(nextPos.lon, nextPos.lat, nextFinalHeight);
+
+    // 后续逻辑保持不变
+    const totalDistance = Cesium.Cartesian3.distance(currentCartesian, nextCartesian);
+    if (totalDistance < 0.001) {
+      this.currentIndex = nextIndex;
+      this.progress = 0;
+      this.setModelPosition(nextCartesian, this.getNextPositionCartesian(nextIndex));
+      return;
+    }
+    this.progress += distanceToMove / totalDistance;
+    if (this.progress >= 1.0) {
+      const remainingDistance = (this.progress - 1.0) * totalDistance;
+      this.currentIndex = nextIndex;
+      if (!this.loop && this.currentIndex === this.positions.length - 1) {
+        this.setModelPosition(nextCartesian, null);
+        this.stop();
+        console.log('已到达终点，停止移动');
+        return;
+      }
+      const newTotalDistance = Cesium.Cartesian3.distance(nextCartesian, this.getNextPositionCartesian(this.currentIndex));
+      this.progress = newTotalDistance > 0.001 ? remainingDistance / newTotalDistance : 0;
+      this.setModelPosition(nextCartesian, this.getNextPositionCartesian(this.currentIndex));
+    } else {
+      const newPosition = Cesium.Cartesian3.lerp(currentCartesian, nextCartesian, this.progress, new Cesium.Cartesian3());
+      this.setModelPosition(newPosition, nextCartesian);
+    }
+    this.viewer.scene.requestRender();
+  }
+
+  /**
+   * 获取下一个位置的笛卡尔坐标（修改：叠加baseHeight）
+   */
+  getNextPositionCartesian(currentIndex) {
+    const nextIndex = (currentIndex + 1) % this.positions.length;
+    const nextPos = this.positions[nextIndex];
+    // 关键修改：返回下一点时叠加baseHeight
+    const finalHeight = (nextPos.height || 0) + this.baseHeight;
+    return Cesium.Cartesian3.fromDegrees(nextPos.lon, nextPos.lat, finalHeight);
+  }
+
+  /**
+   * 设置模型位置和方向（保持不变）
+   */
+  setModelPosition(position, targetPosition) {
+    if (!this.modelEntity) return;
+    this.currentPosition = position;
+    this.modelEntity.position.setValue(position);
+    if (targetPosition) {
+      const heading = this.calculateHeading(position, targetPosition);
+      this.modelEntity.orientation.setValue(Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, 0, 0)));
+    }
+  }
+
+  /**
+   * 计算两点之间的朝向（保持不变）
+   */
+  calculateHeading(from, to) {
+    const fromCartographic = Cesium.Cartographic.fromCartesian(from);
+    const toCartographic = Cesium.Cartographic.fromCartesian(to);
+    const startLat = fromCartographic.latitude;
+    const startLon = fromCartographic.longitude;
+    const endLat = toCartographic.latitude;
+    const endLon = toCartographic.longitude;
+    const dLon = endLon - startLon;
+    const y = Math.sin(dLon) * Math.cos(endLat);
+    const x = Math.cos(startLat) * Math.sin(endLat) - Math.sin(startLat) * Math.cos(endLat) * Math.cos(dLon);
+    let heading = Math.atan2(y, x);
+    heading = (heading + Cesium.Math.TWO_PI) % Cesium.Math.TWO_PI;
+    heading = (heading + this.headingOffset) % Cesium.Math.TWO_PI;
+    return heading;
+  }
+
+  /**
+   * 手动设置模型高度（保持不变）
+   */
+  setModelHeight(height) {
+    this.modelHeight = height;
+    console.log('手动设置模型高度:', height, '米');
+  }
+
+  /**
+   * 设置航向角偏移（保持不变）
+   */
+  setHeadingOffset(offsetDegrees) {
+    this.headingOffset = Cesium.Math.toRadians(offsetDegrees);
+    console.log('设置航向角偏移:', offsetDegrees, '度');
+  }
+
+  /**
+   * 销毁所有资源（保持不变）
+   */
+  destroy() {
+    this.stop();
+    if (this.modelEntity) this.viewer.entities.remove(this.modelEntity);
+    if (this.pathEntity) this.viewer.entities.remove(this.pathEntity);
+    this.markerEntities.forEach((marker) => this.viewer.entities.remove(marker));
+    if (this.iconEntity) this.viewer.entities.remove(this.iconEntity);
+    this.modelEntity = null;
+    this.pathEntity = null;
+    this.markerEntities = [];
+    this.iconEntity = null;
+  }
+}

src/views/largeScreen/components/newMap/index.vue

@@ -0,0 +1,485 @@
+<script setup lang="ts">
+import bottomMenu from './bottomBtn/index.vue';
+import leftMenu from './leftMenu/index.vue';
+import RoutePlanning from './dialog/RoutePlanning.vue';
+import FlyRoam from './dialog/FlyRoam.vue';
+import rightMenu from './dialog/rightMenu.vue';
+// import videoDialog from '../video.vue';
+import addGroundText from './dialog/addGroundText.vue';
+import addStandText from './dialog/addStandText.vue';
+import billboardObject from './dialog/billboardObject.vue';
+import attackArrow from './dialog/attackArrow.vue';
+import standText from './dialog/standText.vue';
+import groundText from './dialog/groundText.vue';
+import polylineObject from './dialog/polylineObject.vue';
+import curvelineObject from './dialog/curvelineObject.vue';
+import polygonObject from './dialog/polygonObject.vue';
+import modelObject from './dialog/modelObject.vue';
+import model from './dialog/model.vue';
+import circleObject from './dialog/CircleObject.vue';
+import { defineProps, onMounted, ref, getCurrentInstance, shallowRef } from 'vue';
+import { useTree } from './tree';
+import { inject } from "vue";
+import { ModelPathMover } from './index.js';
+const eventBus: any = inject("bus");
+const props = defineProps({
+  isHide: {
+    type: Boolean,
+    default: true
+  }
+});
+
+const { initTree, rightMenuRef } = useTree();
+
+// 获取组件实例
+const instance = getCurrentInstance();
+let currentComponent = shallowRef();
+let dynamicComponentRef = ref();
+const videoDialogRef = ref(null);
+const deviceId = ref('');
+instance.proxy['$sendChanel']('open-model', () => { });
+instance.proxy['$recvChanel']('destroyComponent', (id) => {
+  console.log(id);
+  if (id) {
+    if (dynamicComponentRef.value.id == id) {
+      dynamicComponentRef.value?.close()
+      currentComponent.value = undefined
+    }
+  } else {
+    currentComponent.value = undefined
+  }
+})
+instance.proxy['$recvChanel']('openVideo', (obj) => {
+  console.log('设备对象', obj.id);
+  deviceId.value = obj.id; // 'AE9470016';
+  videoDialogRef.value.show();
+  setTimeout(() => {
+    videoDialogRef.value.videoPlay(deviceId.value, obj.name);
+  }, 500);
+});
+instance.proxy['$recvChanel']('openDialog', async (dataArr: Array<any>) => {
+  const sourceType = dataArr[0];
+  const id = dataArr[1];
+  console.log(sourceType, id);
+  // if (dynamicComponentRef.value && dynamicComponentRef.value.close) {
+  //   dynamicComponentRef.value.close();
+  // }
+  switch (sourceType) {
+    case 'addGroundText':
+      currentComponent.value = addGroundText;
+      await nextTick();
+      dynamicComponentRef.value?.open();
+      break;
+
+    case 'addStandText':
+      currentComponent.value = addStandText;
+      await nextTick();
+      dynamicComponentRef.value?.open();
+      break;
+    case 'point':
+      currentComponent.value = billboardObject;
+      await nextTick();
+      dynamicComponentRef.value?.open(id);
+      break;
+    case 'attackArrow':
+      currentComponent.value = attackArrow;
+      await nextTick();
+      dynamicComponentRef.value?.open(id, 'attackArrow');
+      break;
+    case 'pincerArrow':
+      currentComponent.value = attackArrow
+      await nextTick()
+      dynamicComponentRef.value?.open(id, 'pincerArrow')
+      break
+    case 'standText':
+      currentComponent.value = standText
+      await nextTick()
+      dynamicComponentRef.value?.open(id)
+      break
+    case 'groundText':
+      currentComponent.value = groundText
+      await nextTick()
+      dynamicComponentRef.value?.open(id)
+      break
+    case 'line':
+      currentComponent.value = polylineObject
+      await nextTick()
+      dynamicComponentRef.value?.open(id)
+      break
+    case 'curve':
+      currentComponent.value = curvelineObject
+      await nextTick()
+      dynamicComponentRef.value?.open(id)
+      break
+    case 'panel':
+      currentComponent.value = polygonObject
+      await nextTick()
+      dynamicComponentRef.value?.open(id)
+      break
+    case 'rectangle':
+      currentComponent.value = polygonObject
+      await nextTick()
+      dynamicComponentRef.value?.open(id, 'rectangle')
+      break
+    case 'rendezvous':
+      currentComponent.value = polygonObject
+      await nextTick()
+      dynamicComponentRef.value?.open(id, 'rendezvous')
+      break
+    case 'model':
+      currentComponent.value = modelObject
+      await nextTick()
+      dynamicComponentRef.value?.open(id, 'model')
+      break
+    case 'circle':
+      currentComponent.value = circleObject
+      await nextTick()
+      dynamicComponentRef.value?.open(id, 'circle')
+      break
+    default:
+      break;
+  }
+  console.log('dynamicComponentRef.value', dynamicComponentRef.value);
+
+  dynamicComponentRef.value.id = id;
+});
+onMounted(async () => {
+  await window['YJ'].on();
+  initEarth();
+  initTree();
+  document.addEventListener('click', handlePageClick);
+});
+
+const handlePageClick = (e) => {
+  if (e.target.nodeName == 'CANVAS') {
+    window['$']('.leftSideSecond ')[0].style.display = 'none';
+  }
+};
+// 组件卸载前，解绑事件（必须做，否则会导致事件残留）
+onUnmounted(() => {
+  document.removeEventListener('click', handlePageClick);
+});
+
+// 初始化地球
+async function initEarth() {
+  let earth = new window['YJ'].YJEarth('earths');
+  window['Earth1'] = earth;
+  new window['YJ'].Global.openLeftClick(window['Earth1']);
+  window['YJ'].Global.CesiumContainer(window['Earth1'], {
+    compass: false, //罗盘
+    legend: false //图例
+  });
+  new window['YJ'].Obj.GDWXImagery(window['Earth1'], {
+    show: true
+  });
+  new window['YJ'].Obj.GDLWImagery(window['Earth1'], {
+    show: true
+  });
+  window['YJ'].Global.setCesiumManageIndexexDBState(true);
+  // guiji()
+}
+
+// 轨迹
+// function guiji() {
+//   let map = [
+//     {
+//       "lng": 107.10722301,
+//       "lat": 23.82259367,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10736604,
+//       "lat": 23.82255172,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.1074855,
+//       "lat": 23.82252884,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10759413,
+//       "lat": 23.82253307,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10768489,
+//       "lat": 23.82249845,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10776231,
+//       "lat": 23.82243673,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10782341,
+//       "lat": 23.82236405,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10787349,
+//       "lat": 23.82220547,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.1079576,
+//       "lat": 23.8220949,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.1080447,
+//       "lat": 23.82199921,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10815487,
+//       "lat": 23.82190863,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10828922,
+//       "lat": 23.8218493,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10838926,
+//       "lat": 23.82183209,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10849971,
+//       "lat": 23.82181959,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10863734,
+//       "lat": 23.82176743,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10876637,
+//       "lat": 23.82166895,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10882914,
+//       "lat": 23.82162528,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10892427,
+//       "lat": 23.82151196,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10902836,
+//       "lat": 23.82137303,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10913096,
+//       "lat": 23.8212267,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10923736,
+//       "lat": 23.82117282,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10937461,
+//       "lat": 23.82116652,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10950991,
+//       "lat": 23.82122497,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10966681,
+//       "lat": 23.82122231,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10980719,
+//       "lat": 23.82116642,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10986361,
+//       "lat": 23.82112161,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10987242,
+//       "lat": 23.82098847,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10989111,
+//       "lat": 23.82086159,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.10996664,
+//       "lat": 23.82084003,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.11025991,
+//       "lat": 23.82086175,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.11033401,
+//       "lat": 23.82077614,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.11041459,
+//       "lat": 23.82064154,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.11048436,
+//       "lat": 23.82050226,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.11063469,
+//       "lat": 23.82033684,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.11083109,
+//       "lat": 23.820236,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.1110875,
+//       "lat": 23.82022706,
+//       "alt": 0
+//     },
+//     {
+//       "lng": 107.11133119,
+//       "lat": 23.82021734,
+//       "alt": 0
+//     }
+//   ]
+//   let positions = map.map((item) => { 
+//     return {
+//         lon: item.lng,
+//         lat: item.lat,
+//         height: item.alt || 0,
+//         name:''
+//       };
+//   });
+
+//   let modelMover = new ModelPathMover(window['Earth1'].viewer, {
+//     positions: positions,
+//     speed: 20, // 移动速度
+//     loop: true, // 循环运动
+//     iconUrl: '/sdk/img/locate.png', // 模型上方图标
+//     baseHeight: 0 // 外部传入的统一高度（米）
+//   });
+//   window['modelMover'] = modelMover;
+// }
+</script>
+
+<template>
+  <div class="earth-container-box">
+    <div class="earth" id="earths"></div>
+    <component :is="currentComponent" ref="dynamicComponentRef" />
+    <div v-show="!isHide" class="treeBox">
+      <div class="title">
+        <div class="text_title">
+          <img src="@/assets/images/map/title.png" alt="" />
+          图层指挥舱
+        </div>
+      </div>
+
+      <ul id="treeDemo" class="ztree"></ul>
+      <rightMenu ref="rightMenuRef" class="absolute zIndex99"></rightMenu>
+    </div>
+    <bottomMenu v-show="!isHide" class="bottomMenu zIndex9" ref="bottomMenuRef"></bottomMenu>
+    <leftMenu v-show="!isHide"></leftMenu>
+    <RoutePlanning ref="routePlanning"></RoutePlanning>
+    <FlyRoam ref="flyRoam"></FlyRoam>
+    <videoDialog ref="videoDialogRef"></videoDialog>
+    <model ref="Model" v-show="!isHide"></model>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.earth-container-box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .earth {
+    width: 100%;
+    height: 100%;
+  }
+
+  .treeBox {
+    top: 50%;
+    right: 0;
+    position: absolute;
+    width: 320px;
+    height: 75%;
+    transform: translateY(-50%);
+    background-color: #00000052;
+    padding: 20px;
+    box-sizing: border-box;
+    z-index: 10;
+    background: url('@/assets/images/map/rightbg.png') no-repeat;
+    background-size: 100% 100%;
+    transition: transform 0.5s ease;
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      width: 100%;
+      padding-bottom: 0.1em;
+      display: flex;
+      justify-content: center;
+
+      .text_title {
+        display: flex;
+        justify-content: center;
+        //width: 12vw; //400
+        height: 3.5vh;
+        line-height: 3.5vh;
+        text-align: center;
+        font-size: 1.2em;
+        text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
+        font-weight: 700;
+        background: linear-gradient(90deg, rgba(0, 255, 255, 0) 0%, rgba(0, 255, 255, 0.5) 55.55%, rgba(0, 255, 255, 0) 100%);
+      }
+    }
+
+    #treeDemo {
+      flex: auto;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  }
+
+  .bottomMenu {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .leftMenu {
+    height: 500px;
+    position: absolute;
+    left: 0;
+    top: 50px;
+    border: 1px solid;
+  }
+}
+</style>

src/views/largeScreen/components/newMap/initMapData.ts

@@ -0,0 +1,164 @@
+import { leftClick } from './entityClick';
+// import {leftClick} from '@/views/projectLarge/ProjectScreen/components/newMap/entityClick';
+
+export const initMapData = async (type, data, cd) => {
+  let entityObject: any;
+  let options: any;
+  const baseURL = import.meta.env.VITE_APP_MAP_API;
+
+  switch (type) {
+    case 'groundText':
+      entityObject = new window['YJ'].Obj.GroundText(window['Earth1'], data);
+      break;
+    case 'standText':
+      entityObject = new window['YJ'].Obj.StandText(window['Earth1'], data);
+      break;
+    case 'point':
+    case 'linkImage':
+    case 'vrImage':
+      entityObject = new window['YJ'].Obj.BillboardObject(window['Earth1'], data);
+      // entityObject.options.billboard.defaultImage = ''
+      // entityObject.flyTo();
+      break;
+    case 'line':
+      entityObject = await new window['YJ'].Obj.PolylineObject(window['Earth1'], data);
+      break;
+    case 'curve':
+      entityObject = await new window['YJ'].Obj.CurvelineObject(window['Earth1'], data);
+      break;
+    case 'panel':
+    case 'rectangle':
+      entityObject = new window['YJ'].Obj.PolygonObject(window['Earth1'], data);
+      break;
+    case 'rendezvous':
+      entityObject = new window['YJ'].Obj.AssembleObject(window['Earth1'], data);
+      break;
+    case 'attackArrow':
+      entityObject = new window['YJ'].Obj.AttackArrowObject(window['Earth1'], data);
+      break;
+    case 'pincerArrow':
+      entityObject = new window['YJ'].Obj.PincerArrowObject(window['Earth1'], data);
+      break;
+    case 'circle':
+      entityObject = new window['YJ'].Obj.CircleObject(window['Earth1'], data);
+      break;
+    case 'ellipse':
+      entityObject = new window['YJ'].Obj.EllipseObject(window['Earth1'], data);
+      break;
+    case 'model':
+      entityObject = new window['YJ'].Obj.Model(window['Earth1'], data);
+      break;
+    case 'military':
+      entityObject = new window['YJ'].Obj.GroundSvg(window['Earth1'], data);
+      entityObject.load(() => {});
+      break;
+    case 'terrain':
+      data.host = baseURL;
+      console.log('terrain的data', data);
+      entityObject = new window['YJ'].Obj.Terrain(window['Earth1'], data);
+      break;
+    case 'layer':
+      data.host = baseURL;
+      entityObject = new window['YJ'].Obj.Layer(window['Earth1'], data);
+      // entityObject.flyTo();
+      break;
+    case 'tileset':
+      data.host = baseURL;
+      entityObject = new window['YJ'].Obj.Tileset(window['Earth1'], data);
+      entityObject.load((res) => {
+        if (cd) {
+          cd(entityObject);
+        }
+        // 等模型加载完后再加载压平模型
+        if (window['pressModelMap'])
+          Array.from((window as any).pressModelMap.keys()).forEach((key: any) => {
+            if (key.indexOf('_' + data.id) > -1) {
+              const nodes = (window as any).pressModelMap.get(key);
+              if (nodes) {
+                if (nodes.isShow == 1) {
+                  // nodeType[nodes.source_type].render(nodes);
+                  const flatData = JSON.parse(nodes.params);
+                  const entity = window['Earth1'].entityMap.get(flatData.modelId).entity;
+                  const flat: any = new window['YJ'].Analysis.Flat(window['Earth1'], entity, {
+                    positions: flatData.positions,
+                    height: flatData.height,
+                    name: nodes.sourceName
+                  });
+                  (window as any).pressModelEntities.set(nodes.id, flat);
+                }
+              }
+            }
+          });
+      });
+      break;
+    case 'path':
+      entityObject = new window['YJ'].Obj.TrajectoryMotion(window['Earth1'], data);
+      break;
+    case 'wallStereoscopic':
+      entityObject = new window['YJ'].Obj.WallStereoscopic(window['Earth1'], data);
+      break;
+    case 'entityWall':
+      entityObject = new window['YJ'].Obj.WallRealStereoscopic(window['Earth1'], data);
+      break;
+    case 'diffuseScan':
+      entityObject = new window['YJ'].Obj.CircleDiffuse(window['Earth1'], data);
+      break;
+    case 'radarScan':
+      entityObject = new window['YJ'].Obj.RadarScan(window['Earth1'], data);
+      break;
+    case 'scanStereoscopic':
+      entityObject = new window['YJ'].Obj.RadarScanStereoscopic(window['Earth1'], data);
+      break;
+    case 'textBox':
+      entityObject = new window['YJ'].Obj.TextBox(window['Earth1'], data, () => {});
+      break;
+    case 'polyhedronObject':
+      entityObject = new window['YJ'].Obj.PolyhedronObject(window['Earth1'], data);
+      break;
+    case 'water':
+      entityObject = new window['YJ'].Obj.WaterSurface(window['Earth1'], data);
+      break;
+    case 'fountain':
+      entityObject = new window['YJ'].Obj.Fountain(window['Earth1'], data);
+      break;
+    case 'fire':
+      entityObject = new window['YJ'].Obj.Flame(window['Earth1'], data);
+      break;
+    case 'smoke':
+      entityObject = new window['YJ'].Obj.Smoke(window['Earth1'], data);
+      break;
+    case 'waterL':
+      entityObject = new window['YJ'].Obj.Spout(window['Earth1'], data);
+      break;
+    case 'flyLine':
+      entityObject = new window['YJ'].Obj.FlowLine(window['Earth1'], data);
+      break;
+    case 'explosion':
+      entityObject = new window['YJ'].Obj.Explosion(window['Earth1'], data);
+      break;
+    default:
+      break;
+  }
+  if (entityObject) {
+    options = structuredClone(entityObject.options);
+    delete options.host;
+    switch (type) {
+      case 'textBox':
+        delete options.name;
+        break;
+      case 'fountain':
+      case 'fire':
+      case 'smoke':
+      case 'waterL':
+        delete options.url;
+        break;
+      default:
+        break;
+    }
+    // /鼠标左键点击事件
+    entityObject.onClick = () => {
+      leftClick(options);
+    };
+  }
+  return options;
+};

src/views/largeScreen/components/newMap/leftMenu/index.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import leftSideSecond from './leftSideSecond.vue';
+import { getCurrentInstance } from 'vue';
+
+// 获取组件实例
+const instance = getCurrentInstance();
+const isAnimating: any = ref(false); // 添加动画状态
+const isFolded: any = ref(false); // 添加折叠状态
+const initialPositions: any = ref({}); // 保存初始位置
+const menuList: any = ref([
+  // 模型库
+  {
+    name: '模型库',
+    svg: 'model',
+    // fun: this.openModel,
+    key: 'model',
+    children: []
+  },
+
+  // 测量
+  {
+    name: '测量',
+    svg: 'measure',
+    // fun: this.showSecondMenu,
+    key: 'measure',
+    children: [
+      { name: '投影面积', func: 'projectionArea' },
+      { name: '投影距离', func: 'projectionDistanceMeasure' },
+      { name: '贴地面积', func: 'areaMeasure' },
+      { name: '贴地距离', func: 'distanceMeasure' },
+      { name: '垂直高度', func: 'heightMeasure' },
+      { name: '空间三角', func: 'triangleMeasure' },
+      { name: '方位角', func: 'MeasureAzimuth' },
+      { name: '夹角', func: 'MeasureAngle' },
+      { name: '坡度', func: 'lopeDistanceMeasures' },
+      { name: '坐标', func: 'coorMeasure' },
+      { name: '清除测量', func: 'clear' }
+    ]
+  },
+
+  // 工具
+  {
+    name: '工具',
+    svg: 'tool',
+    // fun: this.showSecondMenu,
+    key: 'tool',
+    children: [
+      { name: '路径规划', func: 'routePlan' },
+      { name: '飞行漫游', func: 'roam' }
+    ]
+  }
+]);
+const leftSideSecondRef = ref();
+onMounted(() => {
+  let menusHeight = menuList.value.length * 65 + 'px';
+  let height = menuList.value.length * 65 + 30 + 'px';
+
+  window['$']('.leftBox')[0].style.height = height;
+  window['$']('.left .menus')[0].style.height = menusHeight;
+  const items: any = document.querySelectorAll('.menus_itemBox');
+  items.forEach((item: any, index: any) => {
+    initialPositions.value[index] = item.style.transform || 'translateX(0)';
+  });
+});
+const handleClick = (item, e) => {
+  console.log(item);
+  window['$']('.leftSideSecond')[0].style.left = '100%';
+  window['$']('.leftSideSecond')[0].style.top = e.layerY - 120 + 'px';
+  window['$']('.leftSideSecond')[0].style.display = 'none';
+  if (item.children.length) {
+    window['$']('.leftSideSecond')[0].style.display = 'block';
+    leftSideSecondRef.value.initList(item);
+  } else {
+    console.log('handleClick', 'open-' + item.key);
+    instance.proxy['$sendChanel']('open-' + item.key, '');
+    // item
+  }
+};
+const fold = () => {
+  // 如果正在动画中，直接返回
+  if (isAnimating.value) return;
+  // 设置动画状态为true
+  isAnimating.value = true;
+  document.querySelector('.menus')['style'].display = 'flex';
+
+  const items = document.querySelectorAll('.menus_itemBox');
+  const left_bottom: any = document.querySelector('.left_bottom');
+  const itemCount = items.length;
+  const itemDelay = 100;
+  const itemDuration = 300;
+  if (isFolded.value) {
+    left_bottom.style.bottom = '15.5vw';
+    left_bottom.style.left = '72px';
+    left_bottom.style.transform = 'rotate(0deg)';
+    // 恢复初始状态
+    items.forEach((item: any, index: any) => {
+      setTimeout(() => {
+        item.style.transition = 'transform 0.3s ease';
+        item.style.transform = initialPositions.value[index];
+      }, index * itemDelay);
+    });
+  } else {
+    // 折叠状态
+    items.forEach((item: any, index: any) => {
+      setTimeout(() => {
+        item.style.transition = 'transform 0.3s ease';
+        item.style.transform = 'translateX(-120%)';
+      }, index * itemDelay);
+    });
+    // 同步left_bottom的动画
+    setTimeout(
+      () => {
+        left_bottom.style.bottom = '50%';
+        left_bottom.style.left = '10px';
+        left_bottom.style.transform = 'rotate(180deg)';
+        document.querySelector('.menus')['style'].display = 'none';
+      },
+      (itemCount - 1) * itemDelay
+    );
+  }
+
+  // 在所有动画完成后重置状态
+  setTimeout(
+    () => {
+      isFolded.value = !isFolded.value;
+      isAnimating.value = false;
+    },
+    (itemCount - 1) * itemDelay + itemDuration
+  );
+};
+</script>
+
+<template>
+  <div class="leftBox">
+    <div class="left animate__animated">
+      <div class="menus">
+        <div class="menus_itemBox" v-for="item in menuList" :key="item.key">
+          <!--          :title="t(`firstMenu.${item.name}`)"-->
+
+          <div
+            class="item_icon"
+            @click="
+              (e) => {
+                handleClick(item, e);
+              }
+            "
+          >
+            <!-- <svg-icon :class-name="['absolute', 'zIndex-1', 'left_item_bg']" icon-class="bg2"></svg-icon> -->
+            <svg-icon :class-name="item.svg" :size="16" color="rgba(0, 255, 255, 1)"></svg-icon>
+            <div class="item_text">
+              {{ item.name }}
+            </div>
+          </div>
+        </div>
+        <leftSideSecond class="absolute zIndex99 leftSideSecond" ref="leftSideSecondRef"></leftSideSecond>
+      </div>
+    </div>
+    <!--    <div class="left_bottom" @click="fold"></div>-->
+  </div>
+</template>
+
+<style scoped lang="scss">
+.leftBox {
+  width: 8.3vw;
+  // height: 20vw;
+  position: absolute;
+  left: 1em;
+  bottom: calc(16vw + 2px);
+}
+
+.left {
+  width: 100%;
+  height: 100%;
+  user-select: none;
+  //width: 7vw;
+  // color: red;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .line {
+    width: 5.2vw;
+  }
+
+  .scrollBar81 {
+    position: absolute;
+    top: 33px;
+    left: 8px;
+  }
+
+  .scrollBar {
+    position: absolute;
+    top: 33px;
+    left: 11px;
+    height: 270px;
+  }
+
+  .menus {
+    width: 100%;
+    // height: 350px;
+    display: flex;
+    flex-direction: column;
+    padding: 0 8px 0 5px;
+    position: relative;
+
+    // margin-top: 20px;
+    .menus_itemBox {
+      width: 100%;
+      height: 6.5vh;
+      margin-left: 10px;
+      display: flex;
+      flex-direction: column;
+      // justify-content: space-around;
+      // margin-top: 2rem;
+      margin: auto;
+      cursor: pointer;
+
+      .item_icon {
+        width: 100%;
+        height: 4.2vh;
+        background: url('@/assets/images/map/left.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .item_icon:hover .item_text {
+        color: rgba(0, 255, 255, 1);
+      }
+
+      .item_icon:hover {
+        background: url('@/assets/images/map/left1.png') no-repeat;
+        background-size: 100% 100%;
+      }
+
+      .item_text {
+        width: 100%;
+        font-size: 1.1rem;
+        text-align: left;
+        color: #fff;
+        max-width: 4.5vw;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-family: 'alimamashuheiti';
+        font-weight: 400;
+        text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
+        box-sizing: border-box;
+        padding-left: 0.5rem;
+      }
+    }
+  }
+}
+
+.left_bottom {
+  position: fixed;
+  bottom: 15.5vw;
+  left: 72px;
+  height: 1.5vw;
+  width: 1.5vw;
+  background: url('@/assets/images/map/shou.png') no-repeat;
+  background-size: 100% 100%;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+</style>

src/views/largeScreen/components/newMap/leftMenu/leftSideSecond.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="leftSideSecond">
+    <div class="leftSideSecondBox">
+      <template v-if="obj">
+        <div class="menuItem" v-for="value in obj.children" :key="value.func" @click="handleClick(value)">
+          <img :src="`./assets/leftmenu/${value.func}.png`" style="color: rgb(255, 0, 0)" alt="" />
+          <!--          <span :style="{ color: !clickChange[value] ? 'var(&#45;&#45;color-text)' : 'rgb(255,0,0)' }">{{ t(`${obj.key}.${value}`) }}</span>-->
+          <span>{{ value.name }}</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { getCurrentInstance } from 'vue';
+
+// 获取组件实例
+const instance = getCurrentInstance();
+const obj: any = ref(null);
+const initList = (value) => {
+  obj.value = value;
+  console.log(value);
+};
+const methodMap = {
+  roam() {
+    instance.proxy['$sendChanel']('flyRoamDialog', '');
+  },
+  // 路径规划
+  routePlan() {
+    instance.proxy['$sendChanel']('routePlanningDialog', '');
+  },
+  //投影面积
+  projectionArea: () => {
+    new window['YJ'].Measure.MeasureTyArea(window['Earth1']).start();
+  },
+  //投影距离测量
+  projectionDistanceMeasure: () => {
+    new window['YJ'].Measure.MeasureProjectionDistance(window['Earth1']).start();
+  },
+  areaMeasure: () => {
+    new window['YJ'].Measure.MeasureTdArea(window['Earth1']).start();
+  },
+  //距离测量
+  distanceMeasure: () => {
+    new window['YJ'].Measure.MeasureDistance(window['Earth1']).start();
+  },
+  //高度测量
+  heightMeasure: () => {
+    new window['YJ'].Measure.MeasureHeight(window['Earth1']).start();
+  },
+  //三角测量
+  triangleMeasure: () => {
+    new window['YJ'].Measure.MeasureTriangle(window['Earth1']).start();
+  },
+  // 方位角
+  MeasureAzimuth() {
+    new window['YJ'].Measure.MeasureAzimuth(window['Earth1']).start();
+  },
+  //夹角测量
+  MeasureAngle() {
+    new window['YJ'].Measure.MeasureAngle(window['Earth1']).start();
+  },
+  // 坡度测量
+  lopeDistanceMeasures() {
+    new window['YJ'].Measure.MeasureSlopeDistance(window['Earth1']).start();
+  },
+  //坐标测量
+  coorMeasure() {
+    new window['YJ'].Measure.MeasureLocation(window['Earth1']).start();
+  },
+  //清除测量
+  clear() {
+    window['YJ'].Measure.Clear();
+  }
+};
+const handleClick = (value = 'projectionDistanceMeasure') => {
+  // console.log('点击了', value);
+  methodMap[value['func']]();
+  window['$']('.leftSideSecond ')[0].style.display = 'none';
+};
+defineExpose({
+  initList
+});
+</script>
+<style lang="scss" scoped>
+.leftSideSecond {
+  display: none;
+  height: 250px;
+  width: 230px;
+  background: url('@/assets/images/map/secondBj.png') no-repeat;
+  background-size: 100% 100%;
+  padding: 9px 4px;
+
+  .leftSideSecondBox {
+    //border: 1px solid red;
+    display: flex;
+    flex-wrap: wrap;
+    max-height: 100%;
+    overflow-y: auto;
+
+    .menuItem {
+      width: 25%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 5px 0;
+
+      img {
+        width: 20px;
+        height: 20px;
+      }
+
+      span {
+        font-size: 12px;
+      }
+    }
+  }
+}
+</style>

src/views/largeScreen/components/newMap/rightOperate.ts

@@ -0,0 +1,577 @@
+import { useTreeNode } from './treeNode';
+import app from '@/main';
+import { deleteSource } from '@/views/largeScreen/components/api' 
+import {  } from "./tree"
+export const useRightOperate = () => {
+  const { getSelectedNodes,cusRemoveNode } = useTreeNode();
+
+  //编辑
+  const editNode = (node) => {
+    console.log('sdfdsf');
+    console.log(!node);
+    if (!node) {
+      const selectNodes = getSelectedNodes(window['treeObj']);
+      console.log(selectNodes, 'selectNodes');
+      if (selectNodes && selectNodes[selectNodes.length - 1]) {
+        node = selectNodes[selectNodes.length - 1];
+      }
+    }
+    console.log(node, 'node');
+    if (node) {
+      console.log(node);
+      app.config.globalProperties['$sendChanel']('openDialog', [node.sourceType, node.id]);
+      // eventBus.emit('openDialog', node.sourceType, node.id);
+      // if (node.sourceType == 'pressModel') {
+      //   eventBus.emit('openDialog', node.sourceType, node);
+      // } else {
+      //   eventBus.emit('openDialog', node.sourceType, node.id);
+      // }
+    }
+  };
+  // 删除
+const deleteNode = (eventBus, node) => {
+       ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
+         confirmButtonText: '确定',
+         cancelButtonText: '取消',
+         type: 'warning'
+       })
+         .then(async () => {
+           let selectNodes = getSelectedNodes(window['treeObj']);
+           let source_ids = cusRemoveNode(window['treeObj'], selectNodes);
+           const res = await deleteSource({ ids: source_ids });
+           if (res.code == 0 || res.code == 200) {
+             ElMessage({
+               message: '删除成功',
+               type: 'success'
+             });
+             source_ids.forEach((item) => {
+               let entity = window['Earth1'].entityMap.get(item);
+               entity?.remove?.();
+               // let node = window.treeObj.getNodeByParam("id", item, null);
+               eventBus.emit('destroyComponent', item);
+             });
+             window['YJ'].Global.splitScreen.setActiveId();
+           } else {
+             ElMessage({
+               message: res.msg || '删除失败',
+               type: 'error'
+             });
+           }
+         })
+         .catch(() => {
+           // 用户点击取消，不执行任何操作
+         });
+     };
+  const rightMenus: any = reactive({
+    edit: {
+      name: '编辑节点',
+      key: 'editNode',
+      callback: editNode
+    },
+    del: {
+      name: '删除节点',
+      key: 'del',
+      callback: deleteNode
+    },
+
+    /*addDirectory: {
+      key: 'addDirectory',
+      name: '添加文件夹',
+      callback: addDirectory
+    }
+    addResource: {
+      key: 'addResource',
+      callback: addResource
+    },
+    importPanorama: {
+      key: 'importPanorama',
+      callback: importPanorama
+    },
+    pictureLocation: {
+      key: 'pictureLocation',
+
+      callback: pictureLocation
+    },
+    showAttr: {
+      key: 'showAttr',
+
+      callback: showAttr
+    },
+    importHeader: {
+      key: 'importHeader',
+
+      callback: importHeader
+    },
+    addXlsx: {
+      key: 'addXlsx',
+
+      callback: addXlsxs
+    },
+    addTrajectory: {
+      key: 'addTrajectory',
+      callback: addTrajectory
+    },
+
+    del: {
+      key: 'del',
+      callback: deleteNode
+    },
+
+    pressModel: {
+      key: 'pressModel',
+
+      callback: pressModel
+    },
+    setView: {
+      key: 'setView',
+      callback: setView
+    },
+    resetView: {
+      key: 'resetView',
+      callback: resetView
+    },
+    layerRaise: {
+      key: 'layerRaise',
+
+      callback: layerRaise
+    },
+    layerLower: {
+      key: 'layerLower',
+
+      callback: layerLower
+    },
+    layerToTop: {
+      key: 'layerToTop',
+      callback: layerToTop
+    },
+    layerToBottom: {
+      key: 'layerToBottom',
+      callback: layerToBottom
+    },
+    tilesetClipping: {
+      key: 'tilesetClipping',
+      callback: tilesetClipping
+    },
+    addBIM: {
+      key: 'addBIM',
+      callback: addBIM
+    },
+    resetPerspective: {
+      key: 'resetPerspective',
+      callback: resetPerspective
+    }*/
+  });
+  /* {
+     //添加文件
+     const addDirectory = () => {
+       $changeComponentPop('.adddirectoryBox', true);
+     };
+     //添加资源
+     const addResource = () => {
+       const { ipcRenderer } = require('electron');
+       const options = {
+         properties: ['openFile'], // 允许选择多个文件
+         filters: [
+           { name: '模型、影像、地形', extensions: ['clt', 'json', 'jct', 'mbtiles', 'pak'] },
+           { name: '矢量数据', extensions: ['kmz', 'kml', 'shp', 'tab', 'mif', 'geojson'] }
+         ]
+       };
+       let selectedNodes = window.treeObj.getSelectedNodes();
+       let node = selectedNodes && selectedNodes[selectedNodes.length - 1];
+       let parentId;
+       if (node) {
+         if (node.sourceType === 'directory') {
+           parentId = node.id;
+         } else {
+           parentId = node.parentId;
+         }
+       }
+       ipcRenderer.send('open-directory-dialog', options);
+       // 监听主进程返回的结果
+       //@ts-ignore
+       ipcRenderer.once('selectedItem', async (event, filePaths) => {
+         if (filePaths.length > 0) {
+           let id = new YJ.Tools().randomString();
+
+           // 检查文件名是否有效
+           if (typeof filePaths[0] !== 'string' || filePaths[0].trim() === '') {
+             return false;
+           }
+
+           // 获取最后一个点的位置
+           const lastDotIndex = filePaths[0].lastIndexOf('.');
+
+           // 如果没有点或者点是最后一个字符，则不是有效的文件后缀
+           if (lastDotIndex === -1 || lastDotIndex === filePaths[0].length - 1) {
+             return false;
+           }
+
+           // 提取后缀并转换为小写进行比较
+           const extension = filePaths[0].slice(lastDotIndex + 1).toLowerCase();
+
+           let params2: any = {
+             id: id,
+             show: true
+           };
+           if (extension === 'mbtiles') {
+             params2.alpha = 1;
+             params2.brightness = 1;
+             params2.layerIndex = 99999;
+           }
+           if (extension === 'apk') {
+             // params2.exaggeration = 1
+           }
+
+           let params: any = {
+             id: id,
+             sourcePath: filePaths[0],
+             parentId: parentId,
+             params: params2
+           };
+           // filePaths[0].split('\\').pop()
+           let res = await TreeApi.addModelSource(params);
+           console.log('res', res);
+           if (res.code === 0 || res.code === 200) {
+             ElMessage({
+               message: '添加成功',
+               type: 'success'
+             });
+             res.data.params = JSON.parse(res.data.params);
+             if (!res.data.params.name) {
+               res.data.params.name = res.data.sourceName;
+             }
+             if (!res.data.params.id) {
+               res.data.params.id = res.data.id;
+             }
+             let detail = JSON.parse(res.data.detail);
+             let mapParams = { ...detail, ...res.data.params };
+
+             await initMapData(res.data.sourceType, mapParams, (entity) => {
+               entity.flyTo();
+             });
+             if (res.data.sourceType) {
+             }
+             res.data.params = JSON.stringify(res.data.params);
+             res.data.detail = JSON.stringify(res.data.detail);
+             cusAddNodes(window.treeObj, params.parentId, [res.data]);
+           }
+         }
+       });
+     };
+     //导入全景
+     const importPanorama = async () => {
+       let selectedNodes = window.treeObj.getSelectedNodes();
+       let node = selectedNodes && selectedNodes[selectedNodes.length - 1];
+       let parentId;
+       if (node) {
+         if (node.sourceType === 'directory') {
+           parentId = node.id;
+         } else {
+           parentId = node.parentId;
+         }
+       }
+       const pickerOpts = {
+         types: [
+           {
+             description: '全景图',
+             accept: {
+               'image/jpg': ['.jpg']
+             }
+           }
+         ],
+         excludeAcceptAllOption: true,
+         multiple: true
+       };
+       if ((window as any).showOpenFilePicker) {
+         const fileHandles = await (window as any).showOpenFilePicker(pickerOpts);
+         const files = await Promise.all(fileHandles.map((fileHandle) => fileHandle.getFile()));
+         const dataTransfer = new DataTransfer();
+         handleFileImgInput(files, parentId, 'vrImage');
+       } else {
+         let input = document.createElement('input');
+         input.type = 'file';
+         input.accept = '.jpg';
+         input.multiple = true;
+         input.click();
+         input.addEventListener('input', async (e: any) => {
+           let files = e.target.files;
+           handleFileImgInput(files, parentId, 'vrImage');
+         });
+       }
+     };
+     //图片定位
+     const pictureLocation = async () => {
+       let selectedNodes = window.treeObj.getSelectedNodes();
+       let node = selectedNodes && selectedNodes[selectedNodes.length - 1];
+       let parentId;
+       if (node) {
+         if (node.sourceType === 'directory') {
+           parentId = node.id;
+         } else {
+           parentId = node.parentId;
+         }
+       }
+       const pickerOpts = {
+         types: [
+           {
+             description: '无人机航拍',
+             accept: {
+               'image/jpg': ['.jpg']
+             }
+           }
+         ],
+         excludeAcceptAllOption: true,
+         multiple: true
+       };
+       if ((window as any).showOpenFilePicker) {
+         const fileHandles = await (window as any).showOpenFilePicker(pickerOpts);
+         const files = await Promise.all(fileHandles.map((fileHandle) => fileHandle.getFile()));
+         const dataTransfer = new DataTransfer();
+         handleFileImgInput(files, parentId, 'linkImage');
+       } else {
+         let input = document.createElement('input');
+         input.type = 'file';
+         input.accept = '.jpg';
+         input.multiple = true;
+         input.click();
+         input.addEventListener('input', async (e: any) => {
+           let files = e.target.files;
+           handleFileImgInput(files, parentId, 'linkImage');
+         });
+       }
+     };
+     //属性
+     const showAttr = () => {};
+     //导入模型
+     const importHeader = () => {};
+     //导入模型
+     const addXlsxs = () => {};
+     //导入模型
+     const addTrajectory = () => {};
+
+     //删除
+     const deleteNode = (eventBus, node) => {
+       ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
+         confirmButtonText: '确定',
+         cancelButtonText: '取消',
+         type: 'warning'
+       })
+         .then(async () => {
+           let selectNodes = getSelectedNodes(window.treeObj);
+           let source_ids = cusRemoveNode(window.treeObj, selectNodes);
+           const res = await TreeApi.removeDirectory({ ids: source_ids });
+           if (res.code == 0 || res.code == 200) {
+             ElMessage({
+               message: '删除成功',
+               type: 'success'
+             });
+             source_ids.forEach((item) => {
+               let entity = window.earth.entityMap.get(item);
+               entity?.remove?.();
+               // let node = window.treeObj.getNodeByParam("id", item, null);
+               eventBus.emit('destroyComponent', item);
+             });
+             YJ.Global.splitScreen.setActiveId();
+           } else {
+             ElMessage({
+               message: res.msg || '删除失败',
+               type: 'error'
+             });
+           }
+         })
+         .catch(() => {
+           // 用户点击取消，不执行任何操作
+         });
+     };
+     //添加BIM
+     const addBIM = () => {};
+     //重置透视
+     const resetPerspective = () => {};
+
+     const pressModel = () => {};
+
+     //设置视图
+     const setView = () => {
+       let selectNodes = getSelectedNodes(window.treeObj);
+       if (selectNodes && selectNodes[selectNodes.length - 1]) {
+         let node = selectNodes[selectNodes.length - 1];
+         let params = JSON.parse(node.params);
+         if (!params) {
+           params = {
+             name: node.sourceName,
+             show: node.isShow,
+             id: node.id
+           };
+         }
+         let entityObject = window.earth.entityMap.get(params.id);
+         entityObject.setCustomView();
+         params.customView = entityObject.customView;
+         let params2 = {
+           'id': node.id,
+           'sourceName': params.name,
+           // "sourceType": node.sourceType,
+           'parentId': node.parentId,
+           'treeIndex': node.treeIndex,
+           'params': params,
+           'isShow': node.isShow ? 1 : 0 ? 1 : 0
+         };
+         TreeApi.updateDirectoryInfo(params2);
+       }
+     };
+     //重置视图
+     const resetView = () => {
+       let selectNodes = getSelectedNodes(window.treeObj);
+       if (selectNodes && selectNodes[selectNodes.length - 1]) {
+         let node = selectNodes[selectNodes.length - 1];
+         let params = JSON.parse(node.params);
+         let entityObject = window.earth.entityMap.get(params.id);
+         entityObject.resetCustomView();
+         params.customView = entityObject.customView;
+         let params2 = {
+           'id': node.id,
+           'sourceName': params.name,
+           // "sourceType": node.sourceType,
+           // "parentId": node.parentId,
+           // "treeIndex": node.treeIndex,
+           'params': params,
+           'isShow': node.isShow ? 1 : 0
+         };
+         TreeApi.updateDirectoryInfo(params2);
+         cusUpdateNode({ 'id': params2.id, 'sourceName': params2.sourceName, 'params': JSON.stringify(params) });
+       }
+     };
+     //提升图层
+     const layerRaise = () => {
+       layerIndex('layerRaise');
+     };
+     //降低图层
+     const layerLower = () => {
+       layerIndex('layerLower');
+     };
+     //置顶图层
+     const layerToTop = () => {
+       layerIndex('layerToTop');
+     };
+     //置底图层
+     const layerToBottom = () => {
+       layerIndex('layerToBottom');
+     };
+     //切片
+     const tilesetClipping = () => {};
+
+
+     const layerIndex = (key) => {
+       let selectNodes = getSelectedNodes(window.treeObj);
+       if (selectNodes && selectNodes[selectNodes.length - 1]) {
+         let node = selectNodes[selectNodes.length - 1];
+         let layer = window.earth.entityMap.get(node.id);
+         layer[key]();
+         _updateLayerIndex();
+       }
+     };
+
+     const _updateLayerIndex = () => {
+       let nodes = window.treeObj.transformToArray(window.treeObj.getNodes());
+       let layers: any = [];
+       let arr = ['ArcgisWXImagery', 'ArcgisBLUEImagery', 'ArcgisLWImagery', 'GDLWImagery', 'GDWXImagery', 'GDSLImagery', 'layer'];
+       nodes.forEach((item) => {
+         if (arr.includes(item.sourceType) && item.isShow) {
+           let entityOptions = window.earth.entityMap.get(item.id);
+           let layerIndex = entityOptions.layerIndex;
+           layers.push({ id: item.id, layerIndex });
+           let params = {
+             layerIndex: entityOptions.layerIndex,
+             alpha: entityOptions.alpha,
+             brightness: entityOptions.brightness,
+             name: entityOptions.name,
+             show: entityOptions.show,
+             id: item.id
+           };
+           let params2 = {
+             'id': params.id,
+             'sourceName': params.name,
+             'params': params,
+             'isShow': params.show ? 1 : 0
+           };
+           TreeApi.updateDirectoryInfo(params2);
+           cusUpdateNode({ 'id': params.id, 'sourceName': params.name, 'params': JSON.stringify(params) });
+         }
+       });
+       console.log('layers', layers);
+     };
+      // 图片文件上传后续
+  async function handleFileImgInput(files: any, parentId: string, type: string) {
+    const { ipcRenderer } = require('electron');
+    let availablePort = await ipcRenderer.invoke('get-available-port');
+    const formData = new FormData();
+    let ids: any = [];
+    let filesList: any = [];
+    for (let i = 0; i < files.length; i++) {
+      const element = files[i];
+      ids.push(new YJ.Tools().randomString());
+      filesList.push(element);
+      formData.append('files', element);
+    }
+    let params: any = {
+      'id': ids[0],
+      'show': true,
+      'near': 2000,
+      'far': 100000,
+      'scaleByDistance': true,
+      'heightMode': 3,
+      'billboard': {
+        'show': true,
+        'image': `http://localhost:${availablePort}/GEMarker1/A-ablu-blank.png`,
+        'scale': 3
+      },
+      'label': {
+        'show': true,
+        'fontFamily': 0,
+        'fontSize': 39,
+        'color': '#00ffff'
+      },
+      'attribute': {
+        'link': {
+          'content': []
+        },
+        'vr': {
+          'content': []
+        },
+        'camera': {
+          'content': []
+        },
+        'isc': {
+          'content': []
+        },
+        'goods': {
+          'content': []
+        }
+      },
+      'richTextContent': ''
+    };
+    formData.append('ids', ids);
+    formData.append('parentId', parentId);
+    formData.append('sourceType', type);
+    formData.append('params', JSON.stringify(params));
+    let res = await GisApi.uploadLocationImage(formData);
+    if (res.code == 0 || res.code == 200) {
+      ElMessage({
+        message: '操作成功',
+        type: 'success'
+      });
+      for (let i = 0; i < res.data.length; i++) {
+        let item = res.data[i];
+        initMapData(type, JSON.parse(item.params), null);
+      }
+      cusAddNodes(window.treeObj, parentId, res.data);
+    }
+  }
+   }*/
+  const itemClick = (menuItem: any) => {
+    return menuItem.callback();
+  };
+  return {
+    rightMenus,
+    itemClick
+  };
+};

src/views/largeScreen/components/newMap/tree.ts

@@ -0,0 +1,352 @@
+import { getMarkerList, updateInfo } from '@/views/largeScreen/components/api';
+import { initMapData } from './initMapData';
+import { useTreeNode } from './treeNode';
+import app from '@/main';
+export const useTree = () => {
+  const rightMenuRef: any = ref(); //右键菜单的实例
+  const { cusNodeIcon, getSelectedNodes, cusSelectNode, nodeType } = useTreeNode();
+  const urlParams = new URLSearchParams(new URL(window.location.href).search);
+  const projectIdTwo = urlParams.get('projectId');
+  const treeObj = ref(); //树形的实例
+  // 树的数据
+  const zNodes = ref([
+    {
+      id: 1,
+      parentId: 0,
+      sourceName: '111',
+      isShow: true,
+      sourceType: 'directory',
+      params: ''
+    }
+  ]);
+  const nodes: any = ref([]);
+  /**
+   * 显示、定位右键菜单组件并返回菜单数组
+   */
+  const showRightMenu = (event: any, treeObj: any) => {
+    const selectedNodes = getSelectedNodes(treeObj);
+    let arr: any = [];
+    // 右键菜单的宽高
+    const rightMenuHeight = window.getComputedStyle(window['$']('#rMenu')[0]).getPropertyValue('height');
+    const rightMenuWidth = window.getComputedStyle(window['$']('#rMenu')[0]).getPropertyValue('width');
+    const getNumber = (string: any) => {
+      return Number(string.replace('px', ''));
+    };
+    console.log('event', event);
+    console.log('右键菜单的宽高');
+    console.log(getNumber(rightMenuHeight));
+    console.log(getNumber(rightMenuWidth));
+    let x = Math.abs(event.clientX - window['$']('.treeBox')[0].getBoundingClientRect().left);
+    let y = Math.abs(event.clientY - window['$']('.treeBox')[0].getBoundingClientRect().top);
+    y += document.body.scrollTop + 20;
+    x += document.body.scrollLeft + 40;
+    const bodyWidth = window['$']('body')?.width() || 0;
+    const bodyHeight = window['$']('body')?.height() || 0;
+    if (event.screenX + getNumber(rightMenuWidth) + 40 > bodyWidth) {
+      x = bodyWidth - getNumber(rightMenuWidth) - window['$']('.treeBox')[0].getBoundingClientRect().left;
+    }
+    if (event.screenY + getNumber(rightMenuHeight) + 20 > bodyHeight) {
+      y = (bodyHeight - window['$']('.treeBox')[0].getBoundingClientRect().top) / 2;
+    }
+    window['$']('#rMenu').css({
+      top: y + 'px',
+      left: x + 'px',
+      visibility: 'visible'
+    });
+    console.log('selectedNodes', selectedNodes);
+    if (Object.prototype.toString.call(selectedNodes) === '[object Array]' && selectedNodes.length > 1) {
+      arr = ['del'];
+    } else {
+      if (selectedNodes.length == 0) arr = ['addDirectory'];
+      else {
+        try {
+          arr = nodeType[selectedNodes[0].sourceType].rightMenus;
+        } catch (e) {
+          console.log('e', e);
+          arr = [];
+        }
+      }
+    }
+    return arr;
+  };
+  /**
+   * 用于捕获zTree上鼠标按键按下后的事件回调函数
+   * @param event
+   * @param treeId
+   * @param treeNode
+   */
+  const onMouseDown = (event: MouseEvent, treeId: string, treeNode: any) => {
+    const isShift = event.shiftKey;
+    const isCtrl = event.ctrlKey;
+    if ((!isShift && !isCtrl) || !treeNode) {
+      nodes.value = [];
+    }
+    if (treeNode) {
+      //判断是否是图层文件
+      if (isCtrl) {
+        const isSelected = window['treeObj'].getSelectedNodes().some((node: any) => node.id === treeNode.id);
+        if (isSelected) {
+          // 如果节点已选中，则取消选中
+          nodes.value = nodes.value.filter((node: any) => node.id !== treeNode.id);
+        } else {
+          // 如果节点未选中，则添加到选中列表
+          nodes.value.push(treeNode);
+        }
+      }
+    } else {
+      window['treeObj'].cancelSelectedNode();
+      window['$']('#rMenu')[0].style.visibility = 'hidden';
+    }
+  };
+  /**
+   * 树形节点右键点击
+   * @param event 事件对象
+   * @param treeId 树形结构id
+   * @param treeNode 鼠标右键点击时所在节点的 JSON 数据对象
+   */
+  const onRightClick = (event: MouseEvent, treeId: string, treeNode: any) => {
+    event.preventDefault();
+    console.log('treeObj', treeObj);
+    const selectNodes = getSelectedNodes(treeObj.value);
+    let isnewSelect = true; //是否为新选中
+    selectNodes.forEach((item: any) => {
+      if (treeNode && item.id == treeNode.id) isnewSelect = false;
+    });
+    if (!event.ctrlKey && (selectNodes.length < 2 || isnewSelect)) cusSelectNode(treeObj.value, treeNode);
+    const menus = showRightMenu(event, treeObj.value);
+    console.log('menus', menus);
+    // if (menus.length == 0) {
+    //   return;
+    // }
+    nextTick(() => {
+      rightMenuRef.value.initMenus(menus, treeNode);
+    });
+  };
+  /**
+   * 捕获 checkbox / radio 被勾选 或 取消勾选的事件回调函数
+   * @param event
+   * @param treeId
+   * @param treeNode
+   */
+  const onCheck = async (event: any, treeId: any, treeNode: any) => {
+    console.log(treeNode, 'treeNode');
+    const parentNode = treeNode.getParentNode();
+
+    let params = treeNode.params;
+    if (typeof treeNode.params === 'string') {
+      params = JSON.parse(treeNode.params);
+    }
+    let entityObject;
+    if (treeNode.sourceType == 'pressModel') {
+      // const params = JSON.parse(treeNode.params);
+      const id = treeNode.id + '_' + params.modelId;
+      const data = (window as any).pressModelMap.get(id);
+      data.isShow = treeNode.isShow;
+      entityObject = (window as any).pressModelEntities.get(treeNode.id);
+
+      if (!entityObject && treeNode.isShow) {
+        const entity = window['Earth1'].entityMap.get(params.modelId).entity;
+        entityObject = new window['YJ'].Analysis.Flat(window['Earth1'], entity, {
+          positions: params.positions,
+          height: params.height,
+          name: treeNode.sourceName
+        })(window as any).pressModelEntities.set(treeNode.id, entityObject);
+      }
+    } else {
+      entityObject = window['Earth1'].entityMap.get(treeNode.id);
+    }
+    if (entityObject) {
+      entityObject.show = treeNode.isShow;
+    } else {
+      // 需要深拷贝
+      const params = JSON.parse(treeNode.params);
+      const params2 = JSON.stringify(params);
+      initMapData(treeNode.sourceType, JSON.parse(params2), treeNode.id).then((res) => {
+        entityObject = window['Earth1'].entityMap.get(res.id);
+        entityObject.show = treeNode.isShow;
+      });
+    }
+    // entityObject.show = treeNode.isShow;
+    treeNode.sourceType != 'pressModel' && (params.show = treeNode.isShow);
+    const params2 = {
+      'id': treeNode.id,
+      params: params,
+      'isShow': treeNode.isShow ? 1 : 0
+    };
+    updateInfo(params2).then((res) => {
+      if (res.code == 200) app.config.globalProperties.$message.success('操作成功');
+    });
+
+    // 如果当前节点有父节点，检查所有子节点状态
+    if (parentNode) {
+      checkChildNodes(parentNode);
+    }
+
+    // 检查子节点状态，更新父节点
+    function checkChildNodes(parentNode) {
+      const children = parentNode.children;
+      if (!children || children.length === 0) return;
+
+      // 检查是否所有子节点都未被选中
+      let allUnchecked = true;
+      for (let i = 0; i < children.length; i++) {
+        const childNode = children[i];
+        // 如果有任何一个子节点被选中，则父节点不应被取消
+        if (childNode.isShow) {
+          allUnchecked = false;
+          break;
+        }
+      }
+
+      // 如果所有子节点都未被选中，且父节点当前是选中状态，则取消父节点选择
+      if (allUnchecked && parentNode.isShow) {
+        window['treeObj'].checkNode(parentNode, false, true);
+
+        // 递归检查上一级父节点
+        const grandParent = parentNode.getParentNode();
+        if (grandParent) {
+          checkChildNodes(grandParent);
+        }
+      }
+    }
+  };
+  /**
+   * 树形节点左键双击
+   * @param event 事件对象
+   * @param treeId 树形结构id
+   * @param treeNode 鼠标右键点击时所在节点的 JSON 数据对象
+   */
+  const onDblClick = (event: MouseEvent, treeId: string, treeNode: any) => {
+    console.log('treeNode', treeNode);
+    if (treeNode.params && typeof treeNode.params === 'string') {
+      treeNode.params = JSON.parse(treeNode.params);
+    }
+
+    let entityObject;
+    if (treeNode.sourceType == 'pressModel') {
+      entityObject = (window as any).pressModelEntities.get(treeNode.id);
+    } else if (treeNode.sourceType === 'roam') {
+      app.config.globalProperties.$message.warning('单击鼠标右键可结束当前漫游');
+      window['YJ'].Global.FlyRoam.flyTo(window['Earth1'], treeNode.params.points);
+      return;
+    } else {
+      entityObject = window['Earth1'].entityMap.get(treeNode.id);
+    }
+    console.log('entityObject', entityObject);
+    entityObject.flyTo();
+  };
+  //树的配置项
+  const setting = {
+    edit: {
+      enable: true,
+      showRemoveBtn: false,
+      showRenameBtn: false,
+      drag: {
+        isMove: true,
+        isCopy: false
+      }
+    },
+    check: {
+      enable: true,
+      nocheckInherit: false,
+      chkboxType: { Y: 'ps', N: 's' }
+    },
+    view: {
+      selectedMulti: true
+      // autoCancelSelected: true
+    },
+    data: {
+      key: {
+        //zdatas数据中表示节点name的属性key
+        name: 'sourceName',
+        checked: 'isShow'
+      },
+      simpleData: {
+        enable: true,
+        idKey: 'id',
+        pIdKey: 'parentId',
+        nameKey: 'sourceName'
+      }
+    },
+    callback: {
+      onMouseDown: onMouseDown,
+      onRightClick: onRightClick,
+      // onClick: onClick,
+      // onDrop: onDrop,
+      // beforeDrop: beforeDrop,
+      onCheck: onCheck,
+      onDblClick: onDblClick
+    }
+  };
+
+  const initTreeCallBack = () => {
+    const arr = ['ArcgisWXImagery', 'ArcgisBLUEImagery', 'ArcgisLWImagery', 'GDLWImagery', 'GDWXImagery', 'GDSLImagery', 'layer'];
+    const layers: any = [];
+    console.log("window['Earth1']", window['Earth1']);
+    if (window['Earth1']) {
+      for (let i = 0; i < zNodes.value.length; i++) {
+        if (zNodes.value[i].sourceType === 'directory') {
+          continue;
+        }
+        const params = JSON.parse(zNodes.value[i].params || '{}');
+        const detail = JSON.parse(zNodes.value[i]['detail'] || '{}');
+        if (!params.id) {
+          params.id = zNodes.value[i].id;
+        }
+        if (!params.name) {
+          params.name = zNodes.value[i].sourceName;
+        }
+        if (arr.includes(zNodes.value[i].sourceType)) {
+          layers.push({
+            sourceType: zNodes.value[i].sourceType,
+            params: { ...detail, ...params }
+          });
+        } else {
+          if (zNodes.value[i].isShow) initMapData(zNodes.value[i].sourceType, { ...detail, ...params }, null);
+        }
+      }
+      layers.sort((obj1, obj2) => {
+        return obj1.params.layerIndex - obj2.params.layerIndex;
+      });
+      console.log(layers, 'layers');
+      for (let i = 0; i < layers.length; i++) {
+        // if (layers[i].sourceType == null) layers[i].sourceType = 'tileset';
+        initMapData(layers[i].sourceType, layers[i].params, null);
+      }
+    }
+  };
+  const initTree = async (selector: string = '#treeDemo') => {
+    const res = await getMarkerList();
+    if (res.code == 200) {
+      res.data.sort((a: any, b: any) => {
+        if (a.treeIndex && b.treeIndex) {
+          return a.treeIndex - b.treeIndex;
+        }
+        if (a.treeIndex) {
+          return -1;
+        }
+        if (b.treeIndex) {
+          return 1;
+        }
+        return 0;
+      });
+      for (let i = res.data.length - 1; i >= 0; i--) {
+        res.data[i].icon = await cusNodeIcon(res.data[i]);
+        res.data[i].class = 'xxxx';
+        res.data[i].className = 'xxxx';
+      }
+      zNodes.value = [...res.data];
+      // console.log('getMarkerList·res', zNodes.value);
+      // 初始化树
+      treeObj.value = window['$'].fn.zTree.init(window['$'](selector), setting, zNodes.value);
+      window['treeObj'] = treeObj.value;
+      initTreeCallBack();
+    }
+
+  };
+  return {
+    initTree,
+    setting,
+    rightMenuRef
+  };
+};

src/views/largeScreen/components/newMap/treeNode.ts

@@ -0,0 +1,123 @@
+export const useTreeNode = () => {
+  const nodeType = {
+    point: { rightMenus: ['edit', 'del'] },
+    line: { rightMenus: ['edit', 'del'] },
+    polygon: { rightMenus: ['edit', 'del'] },
+    attackArrow: { rightMenus: ['edit', 'del'] },
+    pincerArrow: { rightMenus: ['edit', 'del'] },
+    groundText: { rightMenus: ['edit', 'del'] },
+    standText: { rightMenus: ['edit', 'del'] },
+    linkImage: { rightMenus: ['edit', 'del'] },
+    vrImage: { rightMenus: ['edit', 'del'] },
+    curve: { rightMenus: ['edit', 'del'] },
+    panel: { rightMenus: ['edit', 'del'] },
+    rectangle: { rightMenus: ['edit', 'del'] },
+    rendezvous: { rightMenus: ['edit', 'del'] },
+    circle: { rightMenus: ['edit', 'del'] },
+    ellipse: { rightMenus: ['edit', 'del'] },
+    model: { rightMenus: ['edit', 'del'] },
+    military: { rightMenus: ['edit', 'del'] },
+    tileset: { rightMenus: ['edit', 'del'] },
+    path: { rightMenus: ['edit', 'del'] },
+  };
+  /**
+   * 添加节点
+   * @param treeObj
+   * @param parentNode 指定的父节点，如果增加根节点，请设置 parentNode 为 null 即可。
+   * @param newNodes 需要增加的节点数据 JSON 对象集合，
+   * @param isSilent设定增加节点后是否自动展开父节点。 isSilent = true 时，不展开父节点
+   * @returns {*} 返回值是 zTree 最终添加的节点数据集合
+   */
+  const cusAddNodes = (treeObj: any, parentNodeId: any, newNodes: any, isSilent?: any) => {
+    for (let i = 0; i < newNodes.length; i++) {
+      if (newNodes[i].sourceType != 'directory') {
+        newNodes[i].icon = cusNodeIcon(newNodes[i]);
+        window['YJ'].Global.splitScreen.setActiveId([newNodes[i].id]);
+      }
+    }
+    let parentNode = null;
+    if (Object.prototype.toString.call(parentNodeId) === '[object Object]') parentNode = parentNodeId;
+    else {
+      parentNode = treeObj.getNodeByParam('id', parentNodeId, null);
+    }
+    const arr = treeObj.addNodes(parentNode, newNodes, isSilent);
+    treeObj.selectNode(arr[arr.length - 1]);
+    // 确保window.AllNodes存在并为数组
+    window['AllNodes'] = (window['AllNodes'] || []).concat(arr);
+    return arr;
+  };
+  /**
+   * 设置node节点的icon
+   * @param type
+   * @returns {string}
+   */
+  const cusNodeIcon = (node) => {
+    const type = node.sourceType || node.type;
+    console.log('----------', type);
+    let name = ['GDSLImagery', 'GDLWImagery', 'ArcgisBLUEImagery', 'ArcgisWXImagery'].includes(type) ? 'layer' : type;
+    if (type == 'Terrain') name = 'terrain';
+    if (type == 'road' && node.detail.imageType == 'arrowRoad') name = 'lineDrawing';
+
+    return type === 'directory' ? undefined : '/assets/icon/' + type + '.png';
+  };
+  /**
+   * 删除节点
+   * @param treeObj
+   * @param nodes
+   * @returns {*}
+   */
+  const cusRemoveNode = (treeObj: any, nodes: any) => {
+    let allNodes = []
+    let _idSet = new Set()
+    nodes.forEach((node: any) => {
+      allNodes = allNodes.concat(treeObj.transformToArray(node))
+    })
+    allNodes.forEach((node: any) => {
+      _idSet.add(node.id)
+      treeObj.removeNode(node)
+    })
+    window['YJ'].Global.splitScreen.setActiveId();
+    window['AllNodes'] = treeObj.getNodes()
+    return Array.from(_idSet)
+  }
+  /**
+   * 单独选中指定节点
+   * @param treeObj
+   * @param node
+   */
+  const cusSelectNode = (treeObj: any, node: any) => {
+    if (node) treeObj.selectNode(node);
+    else treeObj.cancelSelectedNode();
+  };
+  /**
+   * 获取选中节点(数组)
+   * @returns {*}
+   */
+  const getSelectedNodes = (treeObj: any) => {
+    const nodes = treeObj.getSelectedNodes();
+    return nodes;
+  };
+  function cusUpdateNode({ id, sourceName, params }) {
+    const node = window['treeObj'].getNodeByParam('id', id, null);
+    node.sourceName = sourceName;
+    node.oldname = sourceName;
+    node.params = params;
+    window['treeObj'].updateNode(node);
+  }
+
+  return {
+    cusNodeIcon,
+    cusAddNodes,
+    getSelectedNodes,
+    cusSelectNode,
+    cusUpdateNode,
+    cusRemoveNode,
+    nodeType,
+    // getKeyOfSelectedNode,
+    // getSelectedNode,
+    // showRightMenu,
+    // getSameLevel,
+    // findParentId,
+    // findTreeIndex
+  };
+};

src/views/largeScreen/index.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="large-screen">
-    <Header />
+    <Header :isFull="isFull" @changePage="handleChangePage"/>
     <div class="nav">
-      <div class="nav_left">
+      <div class="nav_left" v-if="isHideOther">
         <leftPage />
       </div>
       <div class="nav_center">
-        <centerPage />
+        <centerPage :isFull="isFull" />
       </div>
-      <div class="nav_right">
+      <div class="nav_right" v-if="isHideOther">
         <rightPage />
       </div>
     </div>
@@ -21,6 +21,23 @@ import leftPage from './components/leftPage.vue';
 import centerPage from './components/centerPage.vue';
 import rightPage from './components/rightPage.vue';
 import '@/assets/styles/element.scss';
+const isFull = ref(true); //false
+const isHideOther = ref(true); //false
+/**
+ * 切换中心页面全屏
+ */
+const handleChangePage = () => {
+  if (isFull.value) {
+    isFull.value = false;
+    setTimeout(() => {
+      isHideOther.value = false;
+    }, 100);
+  } else {
+    isFull.value = true;
+    isHideOther.value = true;
+  }
+  console.log(isFull.value);
+};
 </script>
 
 <style scoped lang="scss">
@@ -36,8 +53,16 @@ import '@/assets/styles/element.scss';
   height: calc(100vh - 80px);
   box-sizing: border-box;
   //   padding: 10px;
-  display: grid;
-  grid-template-columns: 1fr 2fr 1fr;
+  display: flex;
   color: #fff;
+  .nav_left {
+    flex: 1;
+  }
+  .nav_center {
+    flex: 2;
+  }
+  .nav_right {
+    flex: 1;
+  }
 }
 </style>