解决超图模块嵌入项目中，三维地图加载的问题，分析功能正常使用

RuoYi-Vue3/index.html

@@ -209,13 +209,9 @@
       <div class="load_title">正在加载系统资源，请耐心等待</div>
     </div>
   </div>
-  <!-- 引入Cesium -->
-  <link rel="stylesheet" href="/node_modules/cesium/Build/CesiumUnminified/Widgets/widgets.css">
-  <script src="/node_modules/cesium/Build/CesiumUnminified/Cesium.js"></script>
-  <!-- 引入Element Plus图标 -->
-  <link rel="stylesheet" href="/src/supermap-cesium-module/style/element-plus/index.css">
-  <!-- 引入本地样式文件 -->
-  <link rel="stylesheet" href="/src/supermap-cesium-module/style/iconfont.css">
+  <!-- 引入 Cesium -->
+  <script src="/Cesium/Cesium.js"></script>
+  <link rel="stylesheet" href="/Cesium/Widgets/widgets.css">
   <script type="module" src="/src/main.js"></script>
 </body>
 

RuoYi-Vue3/package.json

@@ -17,11 +17,13 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
+    "@supermap/iclient3d-vue-for-webgl": "^1.2.2",
     "@types/three": "^0.182.0",
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "13.3.0",
     "autofit.js": "^3.2.8",
     "axios": "1.9.0",
+    "cesium": "^1.137.0",
     "clipboard": "2.0.11",
     "echarts": "5.6.0",
     "element-plus": "2.10.7",

RuoYi-Vue3/src/main.js

@@ -8,6 +8,11 @@ import 'element-plus/dist/index.css'
 import locale from 'element-plus/es/locale/lang/zh-cn'
 
 import '@/assets/styles/index.scss' // global css
+import '@/supermap-cesium-module/style/iconfont.css' // supermap 图标样式
+import '@/supermap-cesium-module/style/element-plus/index.css' // supermap element-plus 样式
+
+// 导入 supermap-cesium-module 组件库
+import supermapComponents from '@/supermap-cesium-module/components/components.js'
 
 import App from './App'
 import store from './store'
@@ -75,6 +80,9 @@ app.use(plugins)
 app.use(elementIcons)
 app.component('svg-icon', SvgIcon)
 
+// 注册 supermap-cesium-module 组件库
+app.use(supermapComponents)
+
 directive(app)
 
 // 使用element-plus 并且设置全局的大小

RuoYi-Vue3/src/supermap-cesium-module/components/clip/clip-polygon/clip-polygon.js

@@ -39,7 +39,7 @@ function clipPolygonAnalysis(props) {
 
     //初始化分析区域 （后面有需要可以添加监听）
     if (props && props.polygonPositions) {
-        clipPolygonUpdate(props.slopePositions);
+        clipPolygonUpdate(props.polygonPositions);
     }
     if (storeState.isViewer) {
         layers = viewer.scene.layers.layerQueue;

RuoYi-Vue3/src/supermap-cesium-module/components/loading.vue

@@ -28,16 +28,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .spinner {
-  margin: auto;
+.spinner {
   width: 60px;
   height: 60px;
-  position: absolute ;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  z-index:1000;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
 }
 
 .container1 > div, .container2 > div, .container3 > div {

RuoYi-Vue3/src/supermap-cesium-module/components/viewer/viewer.js

@@ -5,6 +5,8 @@ import EventManager from '../../js/common/eventManager/EventManager.js'   //事
 import { onBeforeUnmount } from 'vue'
 import createTooltip from '../../js/tool/tooltip2.js'
 import resource from '../../js/local/lang.js'  //语言资源
+
+// Cesium 已经在 index.html 中通过 script 标签全局引入，无需再次导入
 //初始化地球 
 function initViewer(props, callback) {
   //初始化viewer

RuoYi-Vue3/src/supermap-cesium-module/style/iconfont.css

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2397568 */
-  src: url('font/iconfont.js') format('woff2'),
+  src: url('font/iconfont.woff2?t=1622699240678') format('woff2'),
        url('font/iconfont.woff?t=1622699240678') format('woff'),
        url('font/iconfont.ttf?t=1622699240678') format('truetype');
 }

RuoYi-Vue3/src/supermap-cesium-module/views/layout/aside.vue

@@ -8,9 +8,9 @@
         :uniqueOpened="true"
         default-active=""
         class="el-menu-vertical-demo"
-        text-color="#fff"
-        background-color="#424242"
-        active-text-color="#FFFFFF"
+        text-color="#303133"
+        background-color="#f8f9fa"
+        active-text-color="#409eff"
         :collapse-transition="false"
       >
         <!-- 展开收缩控制按钮 -->
@@ -28,7 +28,7 @@
             <i class="iconfont iconshuju iconfont2"></i>
             <span>数据服务</span>
           </template>
-          <el-sub-menu v-for="(data,index) in server_config" :key="data.id" :index="data.id">
+          <el-sub-menu v-for="(data,index) in server_config" :key="data.id" :index="data.id" popper-append-to-body="false">
             <template #title>{{data.name}}</template>
             <div class="box" :index="index">
               <div
@@ -110,24 +110,27 @@
       <loading-bar></loading-bar>
       <!-- 添加自定义服务组件 -->
       <component
+        v-if="addService"
         :is="addService"
         :clear-callback="addCustomService"
         :add-callback="addCallback"
         :get-layer-name="getName"
       ></component>
       <!-- viewer组件 -->
-      <component :is="initViewer" :after-initviewer="removeLoad" :opening-animation="true"></component>
+      <component v-if="initViewer" :is="initViewer" :after-initviewer="removeLoad" :opening-animation="true"></component>
       <!-- 分析功能组件 -->
       <keep-alive>
         <component
+          v-if="view"
           :is="view"
+          :key="view"
           :delete-callback="deleteCallback"
           data-url="/data/netcdf/result_100_200_9_40.nc"  
           skylineSpatialAnalysisUrl="http://www.supermapol.com/realspace/services/spatialAnalysis-data_all/restjsr/spatialanalyst/geometry/3d/skylinesectorbody.json"
         ></component>
       </keep-alive>
       <!-- 地质体组件,单独展示，需要销毁 -->
-      <component :is="view2"></component>
+      <component v-if="view2" :is="view2" :key="view2"></component>
     </el-main>
   </el-container>
 </template>
@@ -147,8 +150,6 @@ export default {
   },
   data() {
     return {
-      // activeIndex: "1",
-      // activeIndex2: "1",
       isCollapse: false,
       asideWidth: "asideWidth1",
       view: "",
@@ -248,7 +249,6 @@ export default {
         case "TIANDITU":
           imageryProvider = new Cesium.TiandituImageryProvider({
             url: url,
-            // mapStyle: Cesium.TiandituMapsStyle["IMG_C"],
             token: "3fb1e9fda20ee995dc815c8243553ce8"
           });
           break;
@@ -286,10 +286,6 @@ export default {
           });
           break;
       }
-      // if (type === "IMAGE") {
-      //   imageryLayerCollection.remove(layer);
-      //   return;
-      // }
       if (type != "GRIDIMAGERY") {
         imageryLayerCollection.addImageryProvider(imageryProvider, 0);
         imageryLayerCollection.remove(layer);
@@ -533,16 +529,15 @@ export default {
   },
   mounted() {
     document.getElementById("el-aside").classList.add("disable"); //禁止点击
-    window.onload = () => {
+    // 直接初始化 viewer，不使用 window.onload
+    this.$nextTick(() => {
       this.initViewer = "Sm3dViewer";
-      // document.getElementById("el-aside").classList.remove("disable"); //解除禁止点击
-    };
+    });
   }
 };
 </script>
 
 <style lang="scss" scoped>
-
 .container {
   position: relative;
   z-index: 1;
@@ -553,7 +548,7 @@ export default {
 
 /* 侧边栏宽度控制 */
 .asideWidth1 {
-  width: 246px !important;
+  width: 280px !important;
   transition-duration: 0.3s;
   height: 100% !important;
 }
@@ -561,6 +556,8 @@ export default {
   transition-duration: 0.5s;
   width: 40px !important;
   height: 100% !important;
+  display: flex !important;
+  justify-content: center !important;
 }
 
 /* 确保el-container能够铺满整个容器 */
@@ -639,18 +636,111 @@ export default {
 
 /* 侧边栏样式增强 */
 .el-aside {
-  background-color: #424242;
+  background-color: #f8f9fa;
   overflow-y: scroll;
   overflow-x: hidden;
   scrollbar-width: none;
   /* firefox */
   -ms-overflow-style: none;
   height: 100% !important;
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
 
   .el-menu--collapse {
     width: 40px;
     height: 100% !important;
   }
+  
+  :deep(.el-menu--collapse.el-menu) {
+    width: 40px !important;
+    margin: 0 auto !important;
+  }
+  
+  :deep(.el-menu--collapse .el-menu-item),
+  :deep(.el-menu--collapse .el-submenu__title),
+  :deep(.el-menu--collapse .el-sub-menu__title) {
+    padding: 0 !important;
+    text-align: center !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    position: relative !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 40px !important;
+    height: 45px !important;
+    margin: 0 auto !important;
+    /* 强制开启hover触发，解决折叠后无法识别子项问题 */
+    pointer-events: auto !important;
+    cursor: pointer !important;
+  }
+  
+  :deep(.el-menu--collapse .el-sub-menu) {
+    width: 40px !important;
+    /* 二级弹框容器相对定位，让三级能基于它定位 */
+    position: relative !important;
+  }
+  
+  :deep(.el-menu--collapse .el-menu-item > *),
+  :deep(.el-menu--collapse .el-submenu__title > *),
+  :deep(.el-menu--collapse .el-sub-menu__title > *) {
+    margin: 0 !important;
+    padding: 0 !important;
+    position: static !important;
+    left: auto !important;
+    right: auto !important;
+    top: auto !important;
+    bottom: auto !important;
+    transform: none !important;
+    float: none !important;
+    display: inline-block !important;
+    width: auto !important;
+    height: auto !important;
+  }
+  
+  :deep(.el-menu--collapse .el-menu-item i.rotate),
+  :deep(.el-menu--collapse .el-submenu__title i.rotate),
+  :deep(.el-menu--collapse .el-sub-menu__title i.rotate) {
+    margin: 0 !important;
+    padding: 0 !important;
+    display: inline-block !important;
+    text-align: center !important;
+    width: auto !important;
+    height: auto !important;
+    position: static !important;
+    left: auto !important;
+    right: auto !important;
+    transform: rotate(-90deg) !important;
+    line-height: normal !important;
+    float: none !important;
+  }
+  
+  :deep(.el-menu--collapse .el-submenu__title .iconfont2),
+  :deep(.el-menu--collapse .el-menu-item .iconfont2),
+  :deep(.el-menu--collapse .el-sub-menu__title .iconfont2) {
+    margin: 0 !important;
+    padding: 0 !important;
+    display: inline-block !important;
+    text-align: center !important;
+    width: auto !important;
+    height: auto !important;
+    position: static !important;
+    left: auto !important;
+    right: auto !important;
+    transform: none !important;
+    float: none !important;
+  }
+  
+  :deep(.el-menu--collapse .el-submenu__title span),
+  :deep(.el-menu--collapse .el-menu-item span),
+  :deep(.el-menu--collapse .el-sub-menu__title span) {
+    display: none !important;
+  }
+  
+  :deep(.el-menu--collapse .el-submenu__icon-arrow),
+  :deep(.el-menu--collapse .el-sub-menu__icon-arrow) {
+    display: none !important;
+  }
+
   .el-menu {
     border-right: none;
     height: 100% !important;
@@ -659,14 +749,43 @@ export default {
       height: 45px;
       line-height: 45px;
     }
+    
+    :deep(.el-menu--collapse .el-menu-item),
+    :deep(.el-menu--collapse .el-submenu__title),
+    :deep(.el-menu--collapse .el-sub-menu__title) {
+      padding: 0 !important;
+      text-align: center !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      position: relative !important;
+      left: 0 !important;
+      right: 0 !important;
+      width: 40px !important;
+      height: 45px !important;
+      line-height: normal !important;
+    }
 
     #fold {
       height: 35px;
       transition-duration: 1s;
-      color: #ffffff !important;
-      padding-left: 8px !important;
+      color: #303133 !important;
+      padding: 0 !important;
       text-align: center !important;
       line-height: 35px !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      background-color: transparent !important;
+    }
+    
+    #fold.is-active {
+      background-color: transparent !important;
+      color: #303133 !important;
+    }
+    
+    #fold:hover {
+      background-color: rgba(64, 158, 255, 0.1) !important;
     }
   }
 }
@@ -690,6 +809,14 @@ export default {
   font-size: 20px !important;
   margin-right: 10px;
   vertical-align: middle;
+  color: #303133;
+}
+
+/* 子菜单项文字颜色 */
+.el-menu--vertical .el-sub-menu .el-menu-item {
+  color: #909399 !important;
+  font-size: 0.875rem !important;
+  line-height: 1.5;
 }
 
 /* 滚动条隐藏 */
@@ -718,15 +845,21 @@ export default {
     justify-content: center;
     span {
       font-size: 12px;
-      color: #ffffff;
+      color: #303133;
     }
     .img {
       width: 100%;
       height: 72px;
       border-radius: 4px;
+      background-color: #585858;
+      border: 1px solid #e4e7ed;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      transition: all 0.3s ease;
     }
     .img:hover {
-      border: 2px solid rgb(39, 148, 190);
+      border: 2px solid #409eff;
+      box-shadow: 0 4px 8px rgba(64, 158, 255, 0.2);
+      transform: translateY(-2px);
     }
     .cross {
       width: 25px;
@@ -740,10 +873,11 @@ export default {
       position: absolute;
       right: 0px;
       top: 3px;
-      color: #ffffff;
+      color: #303133;
+      z-index: 99999 !important;
     }
     [class^="el-icon-"]:hover {
-      color: #fce5e5;
+      color: #409eff;
     }
   }
 }
@@ -779,7 +913,52 @@ export default {
   font-size: 20px !important;
   margin-right: 10px;
 }
-</style>
 
+// ########### 关键修复：折叠状态下 二级弹框保留原位置 + 三级强制弹出 ###########
+// 1. 折叠状态二级弹框：强制保留原有正确位置，不做任何改动
+:deep(.el-menu--collapse .el-sub-menu > .el-sub-menu__popper) {
+  position: fixed !important;
+  margin-left: 0 !important;
+  transform: none !important;
+  z-index: 9998 !important;
+}
 
+// 2. 折叠状态二级弹框容器：hover时强制显示三级内容，核心触发逻辑
+:deep(.el-menu--collapse .el-sub-menu__popper) {
+  pointer-events: auto !important;
+  &:hover .box {
+    display: flex !important;
+  }
+}
+
+// 3. 折叠状态三级内容（box）：强制定位在二级弹框右侧，顶对齐
+:deep(.el-menu--collapse .el-sub-menu__popper .box) {
+  position: absolute !important;
+  left: 100% !important; // 紧贴二级弹框右侧
+  top: 0 !important;     // 和二级弹框顶对齐
+  z-index: 9999 !important;
+  width: 300px !important; // 适配你的imgbox布局
+  background: #f8f9fa !important;
+  border: 1px solid #e4e7ed !important;
+  border-left: none !important;
+  box-shadow: 2px 2px 10px rgba(0,0,0,0.05) !important;
+  padding: 10px !important;
+  margin: 0 !important;
+  // 强制显示，解决折叠后被隐藏问题
+  display: flex !important;
+  pointer-events: auto !important;
+}
 
+// 4. 折叠状态三级imgbox布局适配：清除多余间距，正常显示
+:deep(.el-menu--collapse .el-sub-menu__popper .box .imgbox) {
+  margin: 0 10px 10px 0 !important;
+}
+
+// 5. 展开状态：恢复原有布局，不影响任何效果
+:deep(.el-menu--not-collapse .el-sub-menu__popper .box) {
+  position: static !important;
+  width: 100% !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+</style>

RuoYi-Vue3/src/views/front/HydrologicalPlatform.vue

@@ -20,18 +20,7 @@
 
 <script setup>
 import PageHeader from './PageHeader.vue'
-// 导入 supermap-cesium-module 的 layout 组件
 import layout from '@/supermap-cesium-module/views/layout/index.vue'
-// 导入组件库
-import components from '@/supermap-cesium-module/components/components.js'
-import { onMounted } from 'vue'
-
-// 注册组件库
-onMounted(() => {
-  if (window.app) {
-    window.app.use(components)
-  }
-})
 </script>
 
 <style scoped>