Appearance
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[]| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
type | MilitarySymbolType | — | 符号类型,未知类型抛错 |
controlPoints | Point2D[] | — | 2D 控制点 [经度, 纬度];2 点型最少 2 点、3 点型最少 3 点,不足抛错 |
options.fittingCount | number | 100 | 曲线拟合点数,影响椭圆 / 闭合曲线 / 集结地 / 曲线箭头 / 钳击 |
返回轮廓点环 Point2D[]([经度, 纬度] 数组)。纯函数,不修改入参控制点数组。
最少控制点:
- 2 点型:
POLYLINERECTANGLECIRCLEELLIPSEGATHERING_PLACEFINE_ARROWASSAULT_DIRECTION - 3 点型:
POLYGONSECTORCLOSED_CURVEATTACK_ARROWTAILED_ATTACK_ARROWDOUBLE_ARROW SQUAD_COMBAT与TAILED_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 管理交互和资源生命周期,请使用 军事标绘编辑。