🌍 cesium-kit —— 快速实现动态标点与交互的 Cesium 工具库

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 可视化项目的场景。

👉 仓库地址:

相关推荐
逍遥德17 小时前
如何学编程之01.理论篇.如何通过阅读代码来提高自己的编程能力?
前端·后端·程序人生·重构·软件构建·代码规范
冻感糕人~18 小时前
【珍藏必备】ReAct框架实战指南:从零开始构建AI智能体,让大模型学会思考与行动
java·前端·人工智能·react.js·大模型·就业·大模型学习
程序员agions18 小时前
2026年,“配置工程师“终于死绝了
前端·程序人生
alice--小文子18 小时前
cursor-mcp工具使用
java·服务器·前端
晚霞的不甘18 小时前
揭秘 CANN 内存管理:如何让大模型在小设备上“轻装上阵”?
前端·数据库·经验分享·flutter·3d
小迷糊的学习记录18 小时前
0.1 + 0.2 不等于 0.3
前端·javascript·面试
梦帮科技19 小时前
Node.js配置生成器CLI工具开发实战
前端·人工智能·windows·前端框架·node.js·json
VT.馒头19 小时前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript
css趣多多19 小时前
一个UI内置组件el-scrollbar
前端·javascript·vue.js
C澒20 小时前
前端整洁架构(Clean Architecture)实战解析:从理论到 Todo 项目落地
前端·架构·系统架构·前端框架