# CesiumSandBox **Repository Path**: cesium-developer/cesium-sand-box ## Basic Information - **Project Name**: CesiumSandBox - **Description**: 简单的Cesium功能沙盒版本，按照对应的代码规范上传即可 - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2025-12-08 - **Last Updated**: 2025-12-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Cesium Sandbox 一个基于 Vue 3 + Monaco Editor + Cesium 的在线代码沙盒，参考 Cesium 官网 Sandcastle 设计。 **这是一个空壳项目**，开发者只需要添加自己的 HTML 代码和配置信息即可快速创建 Cesium 示例集合。 > 项目由 [qianyouliang](https://gitee.com/qianyouliang) 创建和维护 ## 功能特性 - 🎨 **Monaco Editor** - 强大的代码编辑器，支持语法高亮、自动补全 - 🌍 **Cesium Viewer** - 3D 地球视图，支持实时预览 - 📚 **Gallery** - 示例库，包含多个 Cesium 示例代码，支持作者信息显示 - 🔄 **实时预览** - 代码修改后自动执行并更新视图 - 🎯 **代码执行** - 安全的代码执行环境，支持完整 HTML 渲染 - 🌓 **主题切换** - 支持深色/浅色主题 - 📝 **HTML 支持** - 完整支持 HTML 内容渲染，包括样式和交互元素 ## 快速开始 ```bash # 安装依赖 pnpm install # 启动开发服务器 pnpm dev # 构建生产版本 pnpm build ``` ## 项目结构 ``` cesium-sandbox/ ├── public/ │ ├── gallery/ # 示例 HTML 文件目录 │ │ ├── showcases/ # 展示案例 │ │ └── shader/ # 着色器示例 │ ├── config.json # 示例配置文件 │ └── thumbnails/ # 缩略图目录 ├── src/ │ ├── components/ # Vue 组件 │ │ ├── layout/ # 布局组件（Header, Sidebar） │ │ ├── editor/ # Monaco Editor 编辑器 │ │ ├── viewer/ # Cesium Viewer 查看器 │ │ └── gallery/ # 示例画廊 │ ├── stores/ # Pinia 状态管理 │ ├── utils/ # 工具函数 │ ├── composables/ # Vue Composables │ ├── config/ # 配置文件 │ └── styles/ # 样式文件 ├── package.json └── vite.config.js ``` ## 代码执行方式本项目使用 `new Function()` 执行用户代码，**完整支持 HTML 格式**。 ### HTML 渲染 - **完整 HTML 渲染**：支持完整的 HTML 结构，包括 `` 中的样式和 `` 中的内容 - **样式支持**：`