每次搭 Cesium 项目都要重写这些东西？有人从真实项目里把它们抽出来了

用 CesiumJS 搭地图项目，有一批功能几乎每次都要写：地图事件监听、点击弹窗、鼠标悬停提示、绘制工具、距离面积测量……

这些不是难事，但每次从零实现都要花时间，而且实现质量参差不齐。从旧项目复制代码是常见做法，但带来的是维护上的分散。

cesium-extends 做的就是这件事：把这些通用功能从一个真实的 Cesium 项目（开源地球可视化平台 DDE-Earth）里提取出来，整理成独立的 npm 包，按需安装使用。项目基于 MIT 协议开源，作者是 hongfaqiu。

包含哪些功能

库采用 monorepo 结构，每个包独立发布，可以单独安装，也可以通过 cesium-extends 主包一次性引入全部。

@cesium-extends/subscriber — 地图事件管理

封装了 Cesium 的事件系统，提供统一的方式来管理点击、悬停、右键、滚轮等地图交互。可以针对特定实体注册事件，也可以注册全局监听，支持防抖配置，用完调用 destroy() 统一清理。

import Subscriber, { EventType } from "@cesium-extends/subscriber";
 
const subscriber = new Subscriber(viewer);
 
// 监听某个实体的点击
subscriber.add(entity, (movement, entity) => {
  console.log(entity);
}, EventType.LEFT_CLICK);
 
// 全局鼠标移动
subscriber.addExternal((movement) => {
  console.log(movement);
}, EventType.MOUSE_MOVE);
 
subscriber.destroy(); // 清理

@cesium-extends/primitive-geojson — GeoJSON 渲染

把 GeoJSON 和 TopoJSON 数据渲染到 Cesium 场景中，支持点、线、面、标注四种要素类型。底层使用 Primitive API 批量合并几何体，相比 Entity API 在大数据量场景下的渲染效率更高。

import { GeoJsonPrimitiveLayer } from "@cesium-extends/primitive-geojson";
 
const layer = new GeoJsonPrimitiveLayer();
layer.load("data.geojson");

样式上支持按属性值分段着色（比如按数值区间映射不同颜色），以及将属性值映射为高度拉伸的三维效果。

@cesium-extends/tooltip 和 popup — 弹窗组件

CesiumJS 没有内置弹窗，这两个包提供了常见的两种形态：tooltip 用于鼠标悬停时的轻量提示，popup 用于点击后展示详细信息。省去手动用 HTML 叠加层实现的过程。

@cesium-extends/drawer — 绘制工具

支持在地图上交互式绘制点、线、面、圆、矩形五种形状，可配置鼠标操作方式（开始/取消/结束的触发键）、绘制过程中的动态样式、完成后的实体样式，以及是否开启地形吸附。

@cesium-extends/measure — 测量工具

提供距离测量和面积测量，结果以标注形式显示在地图上，适合需要空间分析交互的场景。

@cesium-extends/sync-viewer — 双屏联动

把两个 Cesium viewer 的视角同步起来，适合对比查看同一区域的不同数据图层，比如历史影像与现状数据的叠加对比。

@cesium-extends/heatmap — 热力图

基于 heatmap.js 的点密度热力图，支持按权重字段映射渲染强度，适合展示密度分布数据。

安装方式

按需安装某个包（推荐）：

npm install @cesium-extends/subscriber
npm install @cesium-extends/primitive-geojson
npm install @cesium-extends/drawer
# ...其他包同理

或者一次性安装全部：

npm install cesium-extends

写在最后

cesium-extends 解决的不是什么复杂的技术问题，而是 Cesium 项目搭建中那批"每次都要写，每次都差不多"的基础功能。这类代码自己写不难，但来自真实项目的实现往往比临时写出来的更完整——边界情况处理、资源释放、配置灵活性这些细节，在 DDE-Earth 的使用中已经被打磨过了。

如果你正在搭一个新的 Cesium 项目，或者旧项目里有几个功能模块写得比较粗糙，可以参考或直接替换。引入前建议确认 Cesium 版本兼容性。

GitHub：https://github.com/hongfaqiu/cesium-extends (opens in a new tab)

cesium-draw-intro cesium-sandcastle