Skip to content

MilitaryPlot 军标标绘

纯几何生成器:由 2D 经纬度控制点生成军标符号轮廓点环(直箭头 / 突击方向 / 进攻方向 / 钳击 / 集结地 / 扇形 / 正圆 / 曲线面等 15 种),对齐源案例 LabelPlotting/MilitaryPlotDraw。 零 Cesium 依赖、零 DOM 依赖,几何输出为经纬度数组,渲染交给调用方(Cesium 公共 API 即可)。

能力定位

generateMilitarySymbol 适合:

  • 态势标绘:战术箭头、突击方向、钳击、集结地等军标符号的几何生成;
  • 纯计算场景:服务端 / Web Worker / 测试中离线算形,再回传前端渲染;
  • 与任意渲染层组合:几何输出与渲染解耦 —— 用 Cesium 画 polygon、画线、或投到 2D 画布均可。

设计取舍:本模块只负责「控制点 → 轮廓环」纯几何计算。需要鼠标绘点、控制点编辑、 整体平移和 GeoJSON 管理时,组合 MilitaryPlotEditor;两者共享同一几何内核。

快速开始

ts
import { generateMilitarySymbol, MilitarySymbolType } from '@nexa/gis-cesium'
import { Cartesian3 } from 'cesium'

// 直箭头:2 个控制点(箭尾 → 箭头)
const outline = generateMilitarySymbol(
  MilitarySymbolType.FINE_ARROW,
  [[116.39, 39.91], [116.42, 39.90]]
)

// 渲染到 Cesium(几何与渲染解耦,用公共 API 即可)
viewer.entities.add({
  polygon: {
    hierarchy: new Cesium.PolygonHierarchy(
      outline.map(([lng, lat]) => Cartesian3.fromDegrees(lng, lat))
    ),
    material: Cesium.Color.RED.withAlpha(0.6),
  },
})

符号类型

ts
enum MilitarySymbolType {
  POLYLINE            = 'polyline',              // 折线(控制点即轮廓)
  POLYGON             = 'polygon',               // 多边形(控制点即轮廓)
  RECTANGLE           = 'rectangle',             // 矩形(对角两点 → 四角)
  CIRCLE              = 'circle',                // 正圆(圆心 + 边缘一点)
  ELLIPSE             = 'ellipse',               // 椭圆(长轴两点)
  SECTOR              = 'sector',                // 扇形(圆心 + 弧上两点)
  CLOSED_CURVE        = 'closedcurve',           // 闭合曲线面
  GATHERING_PLACE     = 'gatheringplace',        // 集结地
  FINE_ARROW          = 'finearrow',             // 直箭头(2 点)
  ASSAULT_DIRECTION   = 'assaultdirection',      // 突击方向(2 点)
  ATTACK_ARROW        = 'attackarrow',           // 进攻方向(3 点起)
  TAILED_ATTACK_ARROW = 'tailedattackarrow',     // 带箭尾进攻方向(3 点起)
  SQUAD_COMBAT        = 'squadcombat',           // 分队战斗(3 点起)
  TAILED_SQUAD_COMBAT = 'tailedsquadcombat',     // 带箭尾分队战斗(3 点起)
  DOUBLE_ARROW        = 'doublearrow',           // 钳击(5 点)
}

API 参考

generateMilitarySymbol

ts
function generateMilitarySymbol(
  type: MilitarySymbolType,
  controlPoints: Point2D[],
  options?: MilitarySymbolOptions
): Point2D[]
参数类型默认值说明
typeMilitarySymbolType符号类型,未知类型抛错
controlPointsPoint2D[]2D 控制点 [经度, 纬度];2 点型最少 2 点、3 点型最少 3 点,不足抛错
options.fittingCountnumber100曲线拟合点数,影响椭圆 / 闭合曲线 / 集结地 / 曲线箭头 / 钳击

返回轮廓点环 Point2D[][经度, 纬度] 数组)。纯函数,不修改入参控制点数组。

最少控制点

  • 2 点型:POLYLINE RECTANGLE CIRCLE ELLIPSE GATHERING_PLACE FINE_ARROW ASSAULT_DIRECTION
  • 3 点型:POLYGON SECTOR CLOSED_CURVE ATTACK_ARROW TAILED_ATTACK_ARROW DOUBLE_ARROW
  • SQUAD_COMBATTAILED_SQUAD_COMBAT 对齐源编辑器,2 个控制点即可生成

使用场景

场景 1:基础用法

8 个符号同屏展示,addSymbol 封装「几何生成 → 3D 位置 → polygon 实体 + 标签」:

ts
import { generateMilitarySymbol, MilitarySymbolType } from '@nexa/gis-cesium'
import { Cartesian3, Color, PolygonHierarchy } from 'cesium'

function addSymbol(type, controlPoints, color, name) {
  const outline = generateMilitarySymbol(type, controlPoints)
  const positions = outline.map(([lng, lat]) => Cartesian3.fromDegrees(lng, lat))
  return viewer.entities.add({
    name,
    polygon: { hierarchy: new PolygonHierarchy(positions), material: color.withAlpha(0.6) },
  })
}

addSymbol(MilitarySymbolType.FINE_ARROW,
  [[116.39, 39.915], [116.415, 39.910]], Color.RED, '直箭头')
addSymbol(MilitarySymbolType.ATTACK_ARROW,
  [[116.44, 39.918], [116.452, 39.908], [116.44, 39.898], [116.455, 39.905]],
  Color.YELLOW, '进攻方向')

场景 2:改点即改形

重新生成轮廓并整体替换 polygon.hierarchy,实现「拖动控制点实时变形」:

ts
// 6 秒后用新控制点重新生成「进攻方向」
setTimeout(() => {
  const next = generateMilitarySymbol(MilitarySymbolType.ATTACK_ARROW, [
    [116.44, 39.918], [116.455, 39.90], [116.44, 39.882],
  ])
  attackEntity.polygon.hierarchy = new PolygonHierarchy(
    next.map(([lng, lat]) => Cartesian3.fromDegrees(lng, lat))
  )
}, 6000)

场景 3:离线计算

几何内核无任何运行期依赖,可在非浏览器环境直接调用:

ts
// Node / Worker / 服务端
import { generateMilitarySymbol, MilitarySymbolType } from '@nexa/gis-cesium'

const pts = generateMilitarySymbol(MilitarySymbolType.DOUBLE_ARROW, [
  [116.425, 39.912], [116.435, 39.918], [116.442, 39.910],
  [116.448, 39.918], [116.458, 39.912],
])
// 序列化后回传前端渲染,或用于碰撞计算 / 服务端出图

实现与兼容说明

  • 纯函数内核:全部 23 个几何工具(距离、方位角、三点圆心、贝塞尔 / B 样条插值、 角平分线法线等)与 15 个符号生成器逐行移植自源仓库 components/Plot/MilitaryPlot, 零 Cesium / DOM / 第三方依赖;
  • 与源算法逐位一致:同一控制点输入下与源仓库输出逐点差分 maxDiff = 0 (差分验证见模块单测,数量与形状均有锁定断言);
  • 源 bug 保留SQUAD_COMBAT / TAILED_SQUAD_COMBAT / DOUBLE_ARROW 无头部高度 钳制系数(对齐源实现)、SECTOR 角度换算用 /3.14(非 Math.PI)、 CIRCLE / SECTOR 半径单位为米 —— 输出与源保持一致,不"修正";
  • 渲染解耦:本模块不触碰 Viewer / Entity,返回纯经纬度环;用 Cesium 公共 API (Cartesian3.fromDegrees + viewer.entities.add)即可渲染。

Cesium 版本限制

  • 模块本身零 Cesium 依赖,可在任意 Cesium 版本(含 1.133.1)下使用;
  • 渲染仅依赖 Cartesian3.fromDegrees / PolygonHierarchy / Entity.polygon 等长期稳定公共 API。

清理责任

  • 本模块为纯函数,无生命周期、无资源句柄,不存在需要释放的资源;
  • 调用方创建的 Entity / Primitive 按 Cesium 常规方式自行管理。

若需要由 SDK 管理交互和资源生命周期,请使用 军事标绘编辑