在第一篇《Cesium 军事标绘入门：用 Cesium-Plot-JS 快速实现标绘功能》（没看过的同学可以点击蓝色字体查看）中，我们已经掌握了通过 Cesium-Plot-JS 插件手动绘制各类军事标绘（如细箭头、攻击箭头、多边形等）的基础流程。

但在实际项目中，仅支持手动绘制远远不够 —— 当需要加载历史作战数据、同步指挥中心指令或批量生成标绘时，我们需要一种更高效的方式：用数据直接生成军事标绘。

今天将带着大家挖掘 Cesium-Plot-JS 隐藏的核心 API，实现 “数据驱动标绘” 的完整流程，并结合 GUI 工具实现交互化操作。

虽然在官方文档中并没有介绍如何直接用军标的数据生成对应的军事标绘（因为这个功能可能还在测试阶段），但我们可以通过查看源代码的方式找到相应的 API

然后在我们的环境中照葫芦画瓢，使用GUI库（如dat.GUI）创建两个交互式按钮，分别用于删除标绘按钮和根据数据生成军事标绘按钮

删除标绘按钮

接下来我们使用了一个名为gui的库，用于创建交互式界面控件。其核心功能是添加一个按钮，点击后执行删除几何体的操作。

点击按钮时检查geometry是否存在
若存在则调用其remove()方法删除该几何对象

gui.add(
  {
    fn() {
      geometry && geometry.remove();
    },
  },
  "fn"
).name("删除");

代码结构解析

gui.add(
  {
    fn() {
      geometry && geometry.remove();
    },
  },
  "fn"
).name("删除");

对象参数

• 传递一个包含方法fn的对象作为第一个参数。fn是一个匿名函数，内部逻辑为：若geometry存在（非null/undefined），则调用其remove()方法移除几何体。

控件配置

• gui.add()的第二个参数"fn"指定绑定对象中的fn方法作为控件关联的函数。
• .name("删除")设置控件在界面中显示为“删除”按钮。

关键逻辑说明

• 短路求值：geometry && geometry.remove()确保仅在geometry有效时执行删除操作，避免报错。
• 动态交互：通过gui库将函数绑定到按钮，用户点击触发删除动作。

典型应用场景

适用于需要动态操作3D场景中的几何体（如Three.js项目），或任何需要通过GUI快速测试功能的开发场景。

注意事项

• 假设geometry是已定义的全局变量或可通过作用域访问的对象。
• 若remove()是自定义方法，需确保其在geometry对象中正确实现。

根据数据生成军事标绘按钮

接下来我们实现了一个通过图形用户界面（GUI）按钮触发军事标绘功能，基于当前选中的几何对象在Cesium三维地球场景中生成军事标绘图形。

点击按钮时，可以根据当前选中的几何数据生成新的军事标绘对象。

gui.add(
  {
    fn() {
      if (currentSelected && geometry) {
        const points = geometry.getPoints();
        CesiumPlot.createGeometryFromData(Cesium, viewer, {
          type: currentSelected.type,
          cartesianPoints: points,
          style: {
            material: Cesium.Color.fromCssColorString("rgba(59, 178, 208, 0.5)"),
            outlineMaterial: Cesium.Color.fromCssColorString("rgba(59, 178, 208, 1)"),
            outlineWidth: 3,
          },
        });
      }
    },
  },
  "fn"
).name("根据数据生成军标");

核心逻辑分析

gui.add()是调用GUI库（如dat.GUI）添加控制项的方法，其参数包含一个配置对象和控件名称。

配置对象包含一个fn方法，该方法在用户点击GUI按钮时执行：

• 检查currentSelected和geometry变量是否存在
• 从几何对象获取点集数据
• 调用军事标绘库的几何创建方法

关键参数说明

CesiumPlot.createGeometryFromData方法参数：

• type: 使用当前选中对象的类型
• cartesianPoints: 从几何对象提取的点坐标数组
• style: 定义可视化样式：
  • material: 填充颜色（带透明度）
  • outlineMaterial: 边框颜色
  • outlineWidth: 边框宽度3像素

颜色定义方式

采用CSS颜色字符串转换为Cesium颜色对象：

• 主色：rgba(59, 178, 208, 0.5)（半透明青蓝色）
• 边框色：rgba(59, 178, 208, 1)（不透明同色系）

界面显示

.name("根据数据生成军标")设置该GUI控件在界面上的显示名称。

典型应用场景

这段代码通常出现在军事地理信息系统或三维态势标绘系统中，用于：

• 快速生成兵力部署标记
• 创建战术行动区域图形
• 可视化战场环境要素

测试之后也没有问题

其实这个库还有其他功能，比如生长动画等，各位可以去源码中的examples中自行学习

完整代码：

gui
  .add(
    {
      fn() {
        geometry && geometry.remove();
      },
    },
    "fn"
  )
  .name("删除");

gui
	.add(
		{
			fn() {
if (currentSelected && geometry) {
const points = geometry.getPoints();
					CesiumPlot.createGeometryFromData(Cesium, viewer, {
type: currentSelected.type,
cartesianPoints: points,
style: {
material: Cesium.Color.fromCssColorString(
"rgba(59, 178, 208, 0.5)"
							),
outlineMaterial: Cesium.Color.fromCssColorString(
"rgba(59, 178, 208, 1)"
							),
outlineWidth: 3,
						},
					});
				}
			},
		},
"fn"
	)
	.name("根据数据生成军标");

下期预告

下一篇将深入插件底层，解析军事标绘的实现原理，包括Cesium-plot-js库的架构、FineArrow绘制原理等。