🚀 Cesium-Kit：10 秒为你的 Cesium 项目添加动态光效标记

在三维地图可视化中，标记（Marker）是最常见、也是最能承载数据与交互的一种元素。

但是 Cesium 默认的点标记过于单调，无法很好地展示数据的 炫酷感 与 交互性。

为了快速解决这个痛点，我们在 cesium-kit 中提供了一个全新的动态标记 ------ RippleMarker 。

只需 10 秒钟，你就能在地图上添加一个带光效波纹的 3D 标点，让你的场景立刻"动"起来 ✨。

📌 RippleMarker 简介

RippleMarker 是一个专为 Cesium 场景定制的动态 3D 波纹标记，核心特性包括：

🔵 动态波纹动画：酷炫的扩散光圈效果
🔺 3D 倒立三棱锥：立体标记更直观
🏷️ 标签显示：支持文字标注与美化
🖱️ 点击事件：轻松绑定交互逻辑
📦 数据绑定：传递业务数据，点击时直接拿到结果
🛠️ 批量管理：支持一键隐藏、显示或移除
💡 性能优化：基于 Cesium.CallbackProperty 实现高效动画

效果预览：

⏱️ 快速上手：10 秒集成

安装仓库包：

css 复制代码

npm i cesium-kit

仅需几行代码，即可添加一个动态光效 Marker：

php 复制代码

import { Viewer } from "cesium";
import { RippleMarker } from "cesium-kit";

const viewer = new Viewer("container");

RippleMarker(viewer, {
  lon: 116.3913,
  lat: 39.9075,
  color: "rgba(0,150,255,0.8)",
  maxRadius: 8000,
  duration: 1500,
  pyramidHeight: 1000,
});

运行后，一个带扩散光圈、会浮动的三棱锥标记就会出现在北京的位置 🎉。

🎨 进阶玩法

带标签和交互事件

php 复制代码

const marker = RippleMarker(viewer, {
  lon: 116.3913,
  lat: 39.9075,
  id: "beijing-marker",
  data: { name: "北京", population: 21540000 },
  label: {
    text: "北京市",
    font: "18px sans-serif",
    fillColor: "#ffffff",
  },
  onClick: (data, position) => {
    console.log("点击了:", data.name, "坐标:", position);
  },
});

批量创建和统一管理

less 复制代码

const cities = [  { name: "北京", lon: 116.3913, lat: 39.9075 },  { name: "上海", lon: 121.4737, lat: 31.2304 },];

const markers = cities.map((city) =>
  RippleMarker(viewer, {
    lon: city.lon,
    lat: city.lat,
    label: { text: city.name, fillColor: "#00ff88" },
    onClick: (data) => alert(`欢迎来到${data.name}！`),
  })
);

// 一键隐藏
markers.forEach((m) => m.hide());

🛡️ 为什么选择 RippleMarker？

快速集成：无需重复造轮子，直接开箱即用
高性能动画：比自定义 Shader 或 Entity 设置更省心
业务友好：事件绑定 + 数据挂载，贴合业务场景
类型安全：完整的 TypeScript 类型，IDE 智能提示

如果你正在做 智慧城市 、地理大数据可视化 或 三维展示平台 ，

RippleMarker 是一个提升项目观感的绝佳工具。

📖 更多文档与源码

仓库地址：👉 github.com/leongaooo/c...

立即尝试，让你的 Cesium 项目"亮"起来 🚦。