Yunjing Cesium Plugins

一套为 CesiumJS 设计的插件集合，提供了丰富的功能扩展，支持按需引入和全量引入两种方式。

🚀 快速开始

安装

npm install yunjing-cesium-plugins

基本使用

按需引入（推荐）

import PolylineEditor from "yunjing-cesium-plugins/plugins/polyline-editor";

// 使用插件
const pluginInstance = new PolylineEditor(viewer);
pluginInstance.enable();

全量引入

import * as YunjingPlugins from "yunjing-cesium-plugins";

// 使用插件
const { PolylineEditor } = YunjingPlugins;
const pluginInstance = new PolylineEditor(viewer);

浏览器直接引入

<!-- 引入 Cesium -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.xx/Build/Cesium/Cesium.js"></script>
<!-- 引入插件库 -->
<script src="yunjing-cesium-plugins/dist/yunjing-cesium-plugins.min.js"></script>

<script>
  // 使用插件
  const { PolylineEditor } = YunjingCesiumPlugins;
  const pluginInstance = new PolylineEditor(viewer);
</script>

📁 项目结构

yunjing-cesium-plugins/
├── src/
│   ├── index.ts              # 全量导出入口
│   └── plugins/              # 插件目录
│       ├── plugin1/index.ts
│       ├── plugin2/index.ts
│       └── ...
├── demos/                    # 使用示例
│   ├── plugin1/demo.html
│   ├── plugin2/demo.html
│   └── ...
├── dist/                     # 构建输出
│   ├── cjs/                  # CommonJS 格式
│   ├── esm/                  # ES Module 格式
│   ├── types/                # TypeScript 声明文件
│   └── yunjing-cesium-plugins.min.js  # UMD 格式
├── README.md
├── package.json
├── tsconfig.json
└── rollup.config.js

🛠 开发指南

启动项目

# 克隆项目
git clone [email protected]:yuntu-fe/yunjing-cesium-plugins.git
cd yunjing-cesium-plugins

# 安装依赖
tnpm install

# 开发模式（监听文件变化）
tnpm run dev

# 生产构建
tnpm run build

添加新插件

1. 在 src/plugins/ 目录下创建新的插件文件
2. 插件文件应导出一个默认类或函数
3. 运行构建命令自动生成对应的引入路径

插件规范

每个插件应包含以下内容：

// src/plugins/my-plugin.ts
import { Viewer } from "cesium";

interface MyPluginOptions {
  // 插件配置选项
  enabled?: boolean;
  // 其他选项...
}

class MyPlugin {
  private viewer: Viewer;
  private options: MyPluginOptions;

  constructor(viewer: Viewer, options: MyPluginOptions = {}) {
    this.viewer = viewer;
    this.options = {
      enabled: false,
      ...options,
    };
  }

  /**
   * 启用插件
   */
  enable(): void {
    // 插件启用逻辑
  }

  /**
   * 禁用插件
   */
  disable(): void {
    // 插件禁用逻辑
  }

  /**
   * 销毁插件
   */
  destroy(): void {
    // 清理资源
  }
}

export default MyPlugin;

📚 插件文档

每个插件都有详细的文档说明，在代码对外输出的接口函数中添加文档注释，详细说明每个接口。

文档内容包括：

• 接口说明
• 使用方法
• 属性说明
• 配置选项
• 使用示例

🎯 示例演示

在 demos/ 目录中提供了每个插件的使用示例：

每个示例文件都展示了插件的基本用法和常见场景。

📦 构建输出

项目构建后会生成多种格式的文件以适应不同使用场景：

dist/
├── cjs/                     # CommonJS 格式（Node.js）
│   ├── index.js
│   └── plugins/
├── esm/                     # ES Module 格式（现代浏览器/构建工具）
│   ├── index.js
│   └── plugins/
├── types/                   # TypeScript 声明文件
│   ├── index.d.ts
│   └── plugins/
└── yunjing-cesium-plugins.min.js  # UMD 格式（浏览器直接引入）

🧪 测试

需要自行测试，保障插件可靠性、健壮性、功能性

🤝 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目！

1. Fork 项目
2. 创建功能分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情

🙏 致谢

• CesiumJS - 开源的 WebGL 虚拟地球和地图引擎
• 所有为项目做出贡献的开发者们

注意: 请确保在使用本插件库前已经正确引入了 CesiumJS 库。