Vue3+Cesium教程（10）---态势标绘 直箭头、 细直线箭头画法

本学习系列将以Cesium + Vue3 +Typescript+elementplus作为主要技术栈展开，后续会循序渐进，持续探索Cesium的高级功能。详情请参阅原文Cesium+Vue3学习系列（10）---态势标绘 直箭头、 细直线箭头画法

前两篇介绍如何标绘和编辑普通的点、线、多边形。本篇在之前的基础上扩展到态势标绘中的直箭头、细直线箭头的绘制和编辑。先看效果

1、直箭头画法：新建StraightArrow类继承自BaseDraw，通过createStraightArrowPoints函数进行更新关键点数据。

import { BaseDraw, GeometryType } from "../BaseDraw";
import { CallbackProperty, Cartesian3, ClassificationType, Color, Entity, PolygonGraphics, Viewer } from "cesium";
import { createStraightArrowPoints } from "@/system/Utils/SituationUtil";
import EventDispatcher from "@/system/EventDispatcher/EventDispatcher";
export default class StraightArrow extends BaseDraw {
    
    
    private tempCursor = new Cartesian3();
    constructor(viewer: Viewer, dispatcher: EventDispatcher) {
        super(viewer, dispatcher);
        this.geometryType = GeometryType.STRAIGHT_ARROW;
        this.minPointCount = 2;
    }
    protected buildFinalEntity(): Entity {
        const geometryPoints = createStraightArrowPoints(this.getPositions())
        return this.viewer.entities.add({
            polygon: new PolygonGraphics({
                hierarchy: new CallbackProperty(() => ({
                    positions: geometryPoints
                }), false),
                classificationType: ClassificationType.BOTH,
                material: Color.BLUE.withAlpha(0.4)
            })
        });
    }
    protected buildTempEntity(): Entity | undefined {
      
        if(this.getPositions().length == 0) return undefined;
        return this.viewer.entities.add({
            polygon: new PolygonGraphics({
                hierarchy: new CallbackProperty(() => ({
                    positions: createStraightArrowPoints([...this.getPositions(), this.tempCursor || new Cartesian3()])
                }), false),
                classificationType: ClassificationType.BOTH,
                material: Color.CYAN.withAlpha(0.3)
            })
        });
    }
    protected onLeftClick(e: any) {
        super.onLeftClick(e);
        // 点只需要 2 次点击即可结束
        if (this.getPositions().length == 2) {
            this.finish();
        }
    }
    protected updateTempEntity(cursor: Cartesian3) {
        this.tempCursor = cursor;
    }
}

2、细直线箭头画法：新建StraightLineArrow类，继承继承自BaseDraw，通过createStraightLineArrowPoints函数进行更新关键点数据

import { CallbackProperty, Cartesian3, Color, Entity, PolylineGraphics, Viewer } from "cesium";
import { BaseDraw, GeometryType } from "../BaseDraw";
import EventDispatcher from "@/system/EventDispatcher/EventDispatcher";
import { createStraightLineArrowPoints } from "@/system/Utils/SituationUtil";
export default class StraightLineArrow extends BaseDraw {
    private tempCursor?: Cartesian3;
    constructor(viewer: Viewer, dispatcher: EventDispatcher) {
        super(viewer, dispatcher);
        this.geometryType = GeometryType.STRAIGHT_LINE_ARROW;
        this.minPointCount = 2;
    }
    protected buildFinalEntity(): Entity {
        return this.viewer.entities.add({
            polyline: new PolylineGraphics({
                positions: new CallbackProperty(() => createStraightLineArrowPoints(this.getPositions()), false),
                width: 3,
                material: Color.ORANGE,
                clampToGround: true
            })
        });
    }
    protected buildTempEntity(): Entity | undefined {
        if(this.getPositions().length == 0) return undefined;
        return this.viewer.entities.add({
            polyline: new PolylineGraphics({
                positions: new CallbackProperty(() => createStraightLineArrowPoints([...this.getPositions(), this.tempCursor || new Cartesian3()]), false),
                width: 3,
                material: Color.YELLOW.withAlpha(0.6),
                clampToGround: true
            })
        });
    }
    protected updateTempEntity(cursor: Cartesian3) {
        this.tempCursor = cursor;
    }
    protected onLeftClick(e: any) {
        super.onLeftClick(e);
        // 需要 2 次点击即可结束
        if (this.getPositions().length == 2) {
            this.finish();
        }
    }
}

3、最终效果

4、更多代码请参阅原文Cesium+Vue3学习系列（10）---态势标绘 直箭头、 细直线箭头画法