FuJianModelPlatform/RuoYi-Vue3/src/supermap-cesium-module

SuperMap iClient3D Vue for Cesium 可移植模块

这是一个可直接复制到其他项目中使用的 SuperMap Cesium 3D 地图功能模块，包含完整的侧边栏控制界面和 Cesium 3D 场景功能。

目录结构

supermap-cesium-module/
├── components/          # 核心 Vue 组件
│   ├── viewer/          # Cesium 场景初始化组件
│   └── loading.vue      # 加载动画组件
├── js/                  # 工具类
│   ├── common/          # 图层管理、相机操作等
│   ├── store/           # 状态管理
│   └── tool/            # 工具函数
├── style/               # 样式和图标
│   ├── font/            # 图标字体
│   └── images/          # 图片资源
├── config/              # 配置文件
│   ├── server_config.js         # 服务配置
│   ├── server_position_config.js # 服务定位配置
│   └── views_config.js          # 组件配置
├── views/               # 界面组件
│   └── layout/          # 布局组件
│       ├── aside.vue    # 侧边栏组件
│       ├── header.vue   # 头部组件
│       └── index.vue    # 布局索引组件
├── App.vue              # 模块入口组件
└── README.md            # 集成说明文档

集成步骤

1. 复制模块

将 supermap-cesium-module/ 目录复制到目标项目的 src/ 目录中。

2. 安装依赖

在目标项目的 package.json 中添加必要的依赖：

"dependencies": {
  "vue": "^3.5.0",
  "element-plus": "^2.13.0",
  "echarts": "^6.0.0",
  "@supermap/iclient3d-vue-for-webgl": "^1.2.2"
}

3. 配置 Vite

在目标项目的 vite.config.js 文件中添加必要的配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'cesium': path.resolve(__dirname, 'node_modules/cesium')
    }
  },
  optimizeDeps: {
    include: ['cesium']
  }
})

4. 引入 Cesium 库

在目标项目的 index.html 中添加 Cesium 库的引用：

<script src="/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="/Cesium/Widgets/widgets.css">

5. 导入模块

在目标项目的路由或组件中引入模块：

路由配置示例

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import SupermapCesiumModule from '../supermap-cesium-module/App.vue'

const routes = [
  {
    path: '/3d-map',
    name: 'SupermapCesiumModule',
    component: SupermapCesiumModule
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

组件内嵌入示例

<template>
  <div class="app">
    <h1>我的应用</h1>
    <SupermapCesiumModule />
  </div>
</template>

<script setup>
import SupermapCesiumModule from './supermap-cesium-module/App.vue'
</script>

使用方法

1. 基础使用

直接访问集成后的路由路径，即可看到完整的 3D 地图界面，包含：

• 侧边栏控制界面
• 数据服务管理
• 底图切换
• 各种分析工具

2. 自定义配置

修改服务配置

编辑 config/server_config.js 文件，可添加或修改服务配置：

// 示例：添加自定义服务
const server_config = [
  {
    id: 'webServe',
    name: '公共服务',
    children: [
      {
        name: '示例场景',
        type: 'SCENE',
        proxiedUrl: 'http://www.supermapol.com/realspace/services/3D-ZF_normal/rest/realspace',
        thumbnail: 'path/to/thumbnail.png'
      }
    ]
  }
]

修改底图配置

编辑 config/server_config.js 文件中的底图配置部分：

// 底图配置
{
  id: 'baseLayer',
  name: '底图',
  children: [
    {
      name: '天地图影像',
      type: 'TIANDITU',
      proxiedUrl: 'http://t0.tianditu.com/img_w/wmts',
      thumbnail: 'path/to/tianditu.png'
    }
  ]
}

功能说明

核心功能

• ✅ Cesium 3D 场景初始化
• ✅ 数据服务管理（添加/删除场景）
• ✅ 底图切换（天地图、BingMap 等）
• ✅ 地形分析（坡度、淹没、等值线等）
• ✅ 裁剪功能（Box、平面、多边形等）
• ✅ 量算工具（距离、面积、体积等）
• ✅ 天际线分析
• ✅ 剖面分析
• ✅ 通视分析
• ✅ 阴影分析
• ✅ 可视域分析
• ✅ 开敞度分析
• ✅ GPU 查询
• ✅ 图层属性管理
• ✅ 卷帘和分屏功能
• ✅ 倾斜摄影测量
• ✅ 场景属性设置
• ✅ 罗盘和飞行功能
• ✅ 绘制线面和点符号
• ✅ 灯光控制
• ✅ 视频投放
• ✅ 扫描线效果

技术特点

• 完全基于 Vue 3 组件化开发
• 使用 Element Plus 构建 UI 界面
• 模块化设计，易于扩展和维护
• 相对路径引用，确保可移植性
• 完整的工具类和辅助函数

注意事项

1. Cesium 库：确保目标项目已正确引入 Cesium 库
2. Element Plus：如需使用侧边栏样式，需安装 Element Plus
3. 路径调整：根据目标项目的目录结构，可能需要调整部分导入路径
4. 配置修改：根据实际需求修改 config/ 中的服务配置
5. 性能优化：对于大型场景，建议开启 Cesium 的性能优化选项

浏览器兼容性

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

许可证

本模块基于 SuperMap iClient3D Vue for Cesium 开发，遵循 Apache License 2.0 开源协议。

联系方式

如有问题或建议，请联系 SuperMap 技术支持。