Cesium 上加交互绘图，手写鼠标事件要多久？这个 Vue 插件 npm 一行装完

在 Cesium 三维地图上实现交互式绘图，是 GIS 类项目里很常见的需求——标注地点、画围栏、框选区域。但如果从头实现一套完整的绘制、编辑、图层管理逻辑，工作量并不小。

cesium-draw 是一个专门为此设计的 Vue 3 插件，已经把常用的绘图交互封装好，以组件的形式集成进来。GitHub 目前 327 Star，支持 Cesium 1.88 至 1.119 版本。

能做什么

cesium-draw 围绕"在地图上画东西、改东西、管东西"这三件事展开：

绘制能力

支持鼠标交互绘制三种类型的图形：

• 标记（Billboard / Label / 3D 模型）
• 折线
• 多边形

绘制过程全部是鼠标点击驱动，不需要手动处理 Cesium 的鼠标事件监听。 编辑能力

绘制完成后，图形可以进入编辑状态：

• 标记：支持修改图标、修改名称
• 折线和多边形：支持拖拽调整顶点位置、修改颜色 图层管理

所有绘制的图形统一纳入图层管理，可以按图层控制显示、隐藏，也可以批量操作。 导入导出

绘制数据支持导入和导出，数据可以持久化，再次加载时恢复原有标注内容。

怎么用

安装

npm i cesium-draw

4.0.0 及以上版本对应 Vue 3，如果项目是 Vue 2，需要使用 cesium-draw-vue2 分支。

基本接入

引入插件和样式：

import cesiumDraw from 'cesium-draw'
import 'cesium-draw/dist/theme/default.css'

内置两套主题，默认是浅色，也可以换深色：

import 'cesium-draw/dist/theme/dark.css'

在组件中注册并使用：

export default {
  components: { cesiumDraw },
  data() {
    return { viewer: null }
  },
  mounted() {
    this.viewer = new Cesium.Viewer('map')
  }
}

模板中挂载组件，把 Cesium Viewer 实例传进去：

<cesium-draw ref="drawManager" :viewer="viewer" v-if="viewer"></cesium-draw>

v-if="viewer" 是为了确保 Viewer 初始化完成后再挂载绘图组件，避免时序问题。

自定义标记图标

如果标记需要使用自定义图标，通过 :extend-marker-image 传入图片路径数组：

<cesium-draw
  ref="drawManager"
  :viewer="viewer"
  :extend-marker-image="['./icons/poi-1.png', './icons/poi-2.png']"
  v-if="viewer"
></cesium-draw>

使用 3D 模型标记

除了图片标记，还支持在地图上放置 3D 模型（glTF/glb 格式），通过 :extend-marker-model 配置：

<cesium-draw
  :extend-marker-model="[
    { id: 'car', name: '车辆', url: './models/car.glb', thumb: './thumbs/car.png' }
  ]"
  ...
></cesium-draw>

thumb 是缩略图，用于在标记选择面板中显示预览，可选。

事件监听

组件提供了几个关键事件，用于响应用户的操作：

通过这些事件，可以把绘图组件的状态同步到业务逻辑里，比如删除操作时同步到后端。

通过 ref 操作图形

组件提供了 getById(mid) 方法，可以在外部通过 ID 获取某个已绘制的图形要素，用于程序化操作。

写在最后

cesium-draw 解决的是"Cesium 项目里要加一套完整绘图交互"这个具体问题。如果项目只需要简单的静态标注，可能不需要引入完整的插件。但如果需要用户在地图上自由绘制、编辑标注，还需要图层管理和数据持久化，这套插件提供了一个可以直接集成的方案，不用从零实现鼠标事件处理和图形编辑逻辑。

它目前仅支持 Vue 框架，如果项目是 React 或原生 JavaScript，需要自行封装或寻找其他方案。Cesium 版本兼容性经过测试的范围是 1.88–1.119，使用前确认版本在支持范围内。

GitHub 地址：https://github.com/xtfge/cesium-draw (opens in a new tab)