Cesium 军事标绘②|用数据直接生成军事标绘，实现交互化操作

在第一篇（没看过的同学可以点击蓝色字体查看）中，我们已经掌握了通过 Cesium-Plot-JS 插件手动绘制各类军事标绘（如细箭头、攻击箭头、多边形等）的基础流程。。今天将带着大家挖掘 Cesium-Plot-JS 隐藏的核心 API，实现 “数据驱动标绘” 的完整流程，并结合 GUI 工具实现交互化操作。虽然在官方文档中并没有介绍如何直接用军标的数据生成对应的军事标绘（因为这个功能可能还在测试

GIS遥遥

950人浏览 · 2025-10-10 17:43:37

GIS遥遥 · 2025-10-10 17:43:37 发布

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

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

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

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

然后在我们的环境中照葫芦画瓢，添加一个按钮，点击按钮，使用前面绘制的信息数据直接生成军标。

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("根据数据生成军标");

代码功能解读

该代码片段展示了如何使用GUI库（如dat.GUI）创建两个交互式按钮，分别用于删除几何对象和根据数据生成军事标绘对象。以下是详细解读：

删除几何对象功能

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

功能：点击按钮时检查geometry是否存在，若存在则调用其remove()方法删除该几何对象。
关键点：
- geometry：需提前定义的几何对象（如Cesium中的Primitive或Entity）。
- geometry.remove()：假设该几何对象具有remove方法用于清除自身。
- &&短路操作：避免未定义时抛出错误。

根据数据生成军标功能

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("根据数据生成军标");

功能：点击按钮时根据当前选中的几何数据生成新的军事标绘对象。
逻辑流程：
1. 检查currentSelected（当前选中项）和geometry是否存在。
2. 调用geometry.getPoints()获取几何对象的顶点数据。
3. 通过CesiumPlot.createGeometryFromData创建新几何体，参数包括：
  - type：继承自currentSelected.type。
  - cartesianPoints：从原几何体提取的顶点坐标。
  - style：定义填充颜色（半透明蓝绿）和边框样式（实线、宽度3）。
依赖项：
- CesiumPlot：自定义或第三方库，需提前引入。
- viewer：Cesium的视图实例，用于渲染新几何体。

代码结构特点

GUI按钮绑定：
- 使用gui.add(object, "property").name("label")模式。
- 将函数封装在对象中（{ fn() { ... } }）作为可调用属性。
防御性编程：
- 通过条件判断（currentSelected && geometry）避免空值错误。
样式配置：
- 颜色使用CSS格式字符串（rgba(59, 178, 208, 0.5)）并通过Cesium的Color.fromCssColorString转换。