Vue3 + Vite + SuperMap iClient3D for Cesium 从零搭建三维GIS开发环境

1. 环境准备与项目初始化

第一次接触三维GIS开发时，我被SuperMap iClient3D for Cesium的强大功能吸引，但在Vue3+Vite环境下搭建环境确实踩了不少坑。这里分享我的完整配置过程，帮你避开那些让我熬夜的雷区。

先说说为什么选择这个技术组合：Vue3的Composition API写起来特别顺手，Vite的秒级热更新能极大提升开发效率，而SuperMap iClient3D则提供了开箱即用的三维GIS组件。三者结合，既能快速开发又具备专业GIS能力。

创建项目时我推荐用最新版Vite（当前v5.x），执行命令：

npm create vite@latest gis-project --template vue-ts
cd gis-project
npm install

这个模板已经配置好TypeScript和Vue3的基本环境。测试运行npm run dev能看到欢迎页面说明基础环境OK。

关键依赖需要特别注意版本兼容性：

• @supermap/iclient3d-vue-for-webgl：建议用最新稳定版（当前推荐11i(2023)）
• cesium：需要与iClient3D版本匹配（通常iClient3D会自带特定版本）
• sass：如果你像我一样习惯用SCSS写样式

安装核心依赖的命令：

npm install @supermap/iclient3d-vue-for-webgl cesium @types/cesium -S
npm install sass-embedded -D

2. 资源配置与关键配置

这里有个大坑：SuperMap的资源文件需要手动处理。我第一次用时因为漏了这步，控制台报错报得怀疑人生。

资源文件处理分三步走：

1. 在node_modules/@supermap/iclient3d-vue-for-webgl/public找到Cesium文件夹
2. 复制整个文件夹到你的项目public目录下
3. 在index.html中添加引用：

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

Vite配置需要特别处理Cesium的全局变量问题。在vite.config.ts中添加