cesium-kit 是一个开源的 Cesium 组件工具库 ,
由 leongaooo 基于 TypeScript 开发,提供一系列即插即用的函数与工具。
它能帮助开发者在 Cesium 场景 中快速完成 绘制、标注和交互 ✨。
🔑 特性
- ⚡ 快速交付:函数式 API,几行代码即可绘制
- 🔒 类型安全:TypeScript 全量类型提示
- 🔌 可扩展性强:组件化封装,支持二次开发
- 🎯 专注 Cesium:针对三维地球业务场景,开箱即用
📦 安装
csharp
# 使用 npm
npm i cesium-kit cesium
# 或使用 pnpm
pnpm add cesium-kit cesium
# 或使用 yarn
yarn add cesium-kit cesium
注意:
cesium
是运行时依赖,需要一并安装并初始化Cesium.Viewer
。
🚀 快速开始
假设你已经初始化了一个 Cesium.Viewer
实例(viewer),现在我们尝试快速实现一个 动态标点效果。
1️⃣ RippleMarker ------ 扩散波纹标点
在已有的场景中,瞬间加一个"红色倒立三棱锥 + 动态扩散波纹"标点 🔻🌊:
arduino
import { RippleMarker } from "cesium-kit"
// 在北京天安门加一个动态标点
const marker = new RippleMarker(viewer, {
position: { lng: 116.39, lat: 39.9 }, // 经纬度
height: 1000, // 高度(米)
color: Cesium.Color.RED, // 标点颜色
ripple: true, // 启用扩散波纹
})
// 可移除
// marker.remove()
👉 效果就是地图上的定位点闪烁+扩散波纹,常见于 GIS/监控系统里的 实时事件标记。
2️⃣ ViewerClick ------ 点击交互
快速获取用户点击的经纬度坐标 📍:
javascript
import { ViewerClick } from "cesium-kit"
const clickTool = new ViewerClick(viewer, (event) => {
console.log("点击坐标:", event.lng, event.lat)
console.log("原始参数:", event.original)
})
这样可以方便地做:
✅ 用户点选兴趣点(POI)
✅ 绘制多边形/路径起点
✅ 测试交互逻辑
3️⃣ CameraMoveEvent ------ 相机监听
实时获取相机的视角变化 👀:
javascript
import { CameraMoveEvent } from "cesium-kit"
const cameraEvent = new CameraMoveEvent(viewer, (info) => {
console.log("相机位置:", info)
})
适用场景:
- 保存用户视角(下次打开恢复)
- 动态展示相机参数
- 调试开发
🌐 兼容性与打包说明
- 输出格式:ESM + CJS
- 内置
.d.ts
类型声明 - Node 版本:推荐 ≥ 18
- 运行时依赖:
cesium
🧪 本地开发 & Playground
仓库提供了 Playground,你可以一键启动:
arduino
# 安装依赖
npm i
npm run play:install
# 开发并行运行:构建库 + 启动 Playground
npm run dev:play
Playground 内置 vite-plugin-cesium
不用担心 Cesium 静态资源和 Workers 的复杂配置。
💡 适用场景
- 实时事件标注(如报警 / 监控点 🚨)
- 城市与地理三维信息展示 🏙️
- 航迹可视化、设备监控、仿真演示 ✈️
- 简化 Cesium 开发成本,快速 Demo
📌 总结
- 如果你想快速在 Cesium 地球 上实现类似"动态波纹标点""点击选点""相机跟踪"这些功能 👉 用
cesium-kit
就能几行代码搞定。 - 它是 前端 Cesium 开发的加速器 ⚡,特别适合需要快速 Demo 或工程化 GIS 可视化项目的场景。
👉 仓库地址:
- npm :cesium-kit
- GitHub :leongaooo/cesium-kit