Merge pull request #6 from ethan-zf/dev

Dev

CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.0.6
+
+---
+
+#### ✨ New Features
+
+- 新增: 绘制扇形
+
+- 新增: 根据数据回显图形
+
+- 新增: 获取图形关键点位方法：`getPoints`
+
+
+#### 🐞 Bug fixes
+
+- 修复：绘制过程中临时创建的线没有被删除的问题
+
+- 修复：双击控制点导致图形无法拖拽的问题
+
+- 修复：双箭头执行生长动画后，编辑状态无法拖拽的问题
+
+- 修复：双箭头整体被拖拽后生长动画路径不正确的问题
+
+
 ## 0.0.5
 
 ---

README.md

@@ -57,6 +57,7 @@ import CesiumPlot from 'cesium-plot-js';
 | Reactangle             | 'polygon' | 矩形             | ❌       |
 | Triangle               | 'polygon' | 三角形           | ❌       |
 | Circle                 | 'polygon' | 圆形             | ❌       |
+| Sector                 | 'polygon' | 扇形             | ❌       |
 | StraightArrow          | 'line'    | 细直箭头         | ✔️       |
 | CurvedArrow            | 'line'    | 曲线箭头         | ✔️       |
 | FineArrow              | 'polygon' | 直箭头           | ✔️       |
@@ -119,6 +120,7 @@ const geometry = new CesiumPlot.FineArrow(Cesium, viewer, {
 | hide                 | options?: [AnimationOpts](#AnimationOpts)                             | 隐藏，options 可配置动画参数，参数缺省时，不显示动画 |
 | show                 | options?: [AnimationOpts](#AnimationOpts)                             | 显示，options 可配置动画参数，参数缺省时，不显示动画 |
 | startGrowthAnimation | options?: [AnimationOpts](#AnimationOpts)                             | 生长动画，options 可配置动画参数                     |
+| getPoints            |                                                                       | 获取图形关键点位                                     |
 | remove               |                                                                       | 删除                                                 |
 | on                   | (event: [EventType](#EventType), listener: (eventData?: any) => void) | 绑定事件                                             |
 | off                  | (event: [EventType](#EventType))                                      | 解绑事件                                             |
@@ -145,6 +147,22 @@ geometry.on('drawEnd', (data)=>{
 });
 ```
 
+### 静态方法
+
+**CesiumPlot.createGeometryFromData(cesium: Cesium, viewer: Cesium.Viewer, options:[CreateGeometryFromDataOpts](#CreateGeometryFromDataOpts))**
+
+根据图形的关键点位重新生成图形
+
+<h5 id='CreateGeometryFromDataOpts'>CreateGeometryFromDataOpts参数类型</h5>
+
+```
+{
+  type: 'FineArrow'|'AttackArrow'|'SwallowtailAttackArrow'|'SquadCombat'|'SwallowtailSquadCombat'|'StraightArrow'|'CurvedArrow'|'AssaultDirection'|'DoubleArrow'|'FreehandLine'|'FreehandPolygon'|'Curve'|'Ellipse'|'Lune'|'Reactangle'|'Triangle'|'Polygon'|'Circle'|'Sector', // 图形类型
+  cartesianPoints: Cesium.Cartesian3[], // 图形关键点位，可通过实例方法getPoints或者drawEnd事件获得
+  style?: PolygonStyle | LineStyle // 样式
+}
+```
+
 <h3 id='EventType'>Events</h3>
 
 - **drawStart**

debug/index.ts

@@ -29,6 +29,7 @@ viewer.scene.camera.setView({
 });
 
 let geometry: any;
+let geometryType: string;
 const dragStartHandler = () => {
   console.error('start');
 };
@@ -50,85 +51,19 @@ const editEndHandler = (geometryPoints: any) => {
 
 const buttonGroup = document.getElementById('button-group') as HTMLElement;
 buttonGroup.onclick = (evt) => {
+  const targetElement = evt.target as HTMLElement;
+  geometryType = targetElement.id;
+  geometry = new CesiumPlot[geometryType](Cesium, viewer, {
+    material: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.5)'),
+    outlineMaterial: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 1)'),
+    outlineWidth: 3,
+  });
+};
+
+const operationButtonGroup = document.getElementById('operation-button-group') as HTMLElement;
+operationButtonGroup.onclick = (evt) => {
   const targetElement = evt.target as HTMLElement;
   switch (targetElement.id) {
-    case 'drawCircle':
-      geometry = new CesiumPlot.Circle(Cesium, viewer);
-      break;
-    case 'drawPolygon':
-      geometry = new CesiumPlot.Polygon(Cesium, viewer);
-      break;
-    case 'drawReactangle':
-      geometry = new CesiumPlot.Reactangle(Cesium, viewer);
-      break;
-    case 'drawTriangle':
-      geometry = new CesiumPlot.Triangle(Cesium, viewer);
-      break;
-    case 'drawFineArrow':
-      geometry = new CesiumPlot.FineArrow(Cesium, viewer, {
-        material: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.5)'),
-        outlineMaterial: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 1)'),
-        outlineWidth: 3,
-      });
-      break;
-    case 'drawAttackArrow':
-      geometry = new CesiumPlot.AttackArrow(Cesium, viewer, {
-        outlineMaterial: Cesium.Color.RED,
-      });
-      break;
-    case 'drawSwallowtailAttackArrow':
-      geometry = new CesiumPlot.SwallowtailAttackArrow(Cesium, viewer, {
-        outlineMaterial: Cesium.Color.BLUE,
-      });
-      break;
-    case 'drawSquadCombat':
-      geometry = new CesiumPlot.SquadCombat(Cesium, viewer, {
-        outlineMaterial: new Cesium.PolylineDashMaterialProperty({
-          color: Cesium.Color.RED,
-          dashLength: 16.0,
-        }),
-      });
-      break;
-    case 'drawSwallowtailSquadCombat':
-      geometry = new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer);
-      break;
-    case 'drawStraightArrow':
-      geometry = new CesiumPlot.StraightArrow(Cesium, viewer, {
-        material: Cesium.Color.RED,
-      });
-      break;
-    case 'drawAssaultDirection':
-      geometry = new CesiumPlot.AssaultDirection(Cesium, viewer);
-      break;
-    case 'drawCurvedArrow':
-      geometry = new CesiumPlot.CurvedArrow(Cesium, viewer, {
-        material: Cesium.Color.BLUE,
-      });
-      break;
-    case 'drawDoubleArrow':
-      geometry = new CesiumPlot.DoubleArrow(Cesium, viewer, {
-        outlineMaterial: Cesium.Color.GREEN,
-      });
-      break;
-    case 'drawFreehandLine':
-      geometry = new CesiumPlot.FreehandLine(Cesium, viewer);
-      break;
-    case 'drawCurve':
-      geometry = new CesiumPlot.Curve(Cesium, viewer);
-      break;
-    case 'drawEllipse':
-      geometry = new CesiumPlot.Ellipse(Cesium, viewer);
-      break;
-    case 'drawLune':
-      geometry = new CesiumPlot.Lune(Cesium, viewer);
-      break;
-    case 'drawFreehandPolygon':
-      geometry = new CesiumPlot.FreehandPolygon(Cesium, viewer, {
-        material: Cesium.Color.GREEN,
-        outlineMaterial: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 1)'),
-        outlineWidth: 2,
-      });
-      break;
     case 'hide':
       geometry &&
         geometry.hide({
@@ -141,7 +76,7 @@ buttonGroup.onclick = (evt) => {
       break;
     case 'remove':
       geometry && geometry.remove();
-      geometry = null;
+      // geometry = null;
       break;
     case 'addEvent':
       if (geometry) {
@@ -161,12 +96,30 @@ buttonGroup.onclick = (evt) => {
         geometry.off('editEnd', editEndHandler);
       }
       break;
-
     case 'startGrowthAnimation':
       if (geometry) {
         geometry.startGrowthAnimation();
       }
       break;
+    case 'createGeometryFromData':
+      if (geometry) {
+        const points = geometry.getPoints();
+        geometry = CesiumPlot.createGeometryFromData(Cesium, viewer, {
+          type: geometryType,
+          cartesianPoints: points,
+          style: {
+            material: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.5)'),
+            outlineMaterial: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 1)'),
+            outlineWidth: 3,
+          },
+        });
+      }
+      break;
+    case 'cancelDraw':
+      if (geometry) {
+        geometry.remove();
+      }
+      break;
     default:
       break;
   }

index.html

@@ -45,30 +45,35 @@
     <div id="root"></div>
     <div id="cesiumContainer"></div>
     <div class="button-container" id="button-group">
-      <button id="drawPolygon">多边形</button>
+      <button id="Polygon">多边形</button>
-      <button id="drawReactangle">矩形</button>
+      <button id="Reactangle">矩形</button>
-      <button id="drawTriangle">三角形</button>
+      <button id="Triangle">三角形</button>
-      <button id="drawCircle">圆形</button>
+      <button id="Circle">圆形</button>
-      <button id="drawStraightArrow">细直箭头</button>
+      <button id="Sector">扇形</button>
-      <button id="drawCurvedArrow">曲线箭头</button>
+      <button id="StraightArrow">细直箭头</button>
-      <button id="drawFineArrow">直箭头</button>
+      <button id="CurvedArrow">曲线箭头</button>
-      <button id="drawAttackArrow">进攻方向箭头</button>
+      <button id="FineArrow">直箭头</button>
-      <button id="drawSwallowtailAttackArrow">进攻方向箭头(燕尾)</button>
+      <button id="AttackArrow">进攻方向箭头</button>
-      <button id="drawSquadCombat">分队战斗方向</button>
+      <button id="SwallowtailAttackArrow">进攻方向箭头(燕尾)</button>
-      <button id="drawSwallowtailSquadCombat">分队战斗方向(燕尾)</button>
+      <button id="SquadCombat">分队战斗方向</button>
-      <button id="drawAssaultDirection">突击方向</button>
+      <button id="SwallowtailSquadCombat">分队战斗方向(燕尾)</button>
-      <button id="drawDoubleArrow">双箭头</button>
+      <button id="AssaultDirection">突击方向</button>
-      <button id="drawFreehandLine">自由线</button>
+      <button id="DoubleArrow">双箭头</button>
-      <button id="drawFreehandPolygon">自由面</button>
+      <button id="FreehandLine">自由线</button>
-      <button id="drawCurve">曲线</button>
+      <button id="FreehandPolygon">自由面</button>
-      <button id="drawEllipse">椭圆</button>
+      <button id="Curve">曲线</button>
-      <button id="drawLune">半月面</button>
+      <button id="Ellipse">椭圆</button>
+      <button id="Lune">半月面</button>
+    </div>
+    <div class="button-container" id="operation-button-group" style="top: 50px;">
       <button id="hide">隐藏</button>
       <button id="show">显示</button>
       <button id="remove">删除</button>
       <button id="addEvent">绑定事件</button>
       <button id="removeEvent">解绑事件</button>
       <button id="startGrowthAnimation">生长动画</button>
+      <button id="createGeometryFromData">根据数据生成图形</button>
+      <button id="cancelDraw">取消绘制</button>
     </div>
     <script>
       window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium';

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cesium-plot-js",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cesium-plot-js",
-      "version": "0.0.4",
+      "version": "0.0.5",
       "dependencies": {
         "lodash.clonedeep": "^4.5.0",
         "lodash.merge": "^4.6.2"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cesium-plot-js",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "main": "dist/CesiumPlot.umd.js",
   "homepage": "https://github.com/ethan-zf/cesium-plot-js",
   "repository": {

src/arrow/attack-arrow.ts

@@ -50,8 +50,9 @@ export default class AttackArrow extends Base {
     const tempPoints = [...this.points, cartesian];
     this.setGeometryPoints(tempPoints);
     if (tempPoints.length === 2) {
-      this.addFirstLineOfTheArrow();
+      this.addTempLine();
     } else {
+      this.removeTempLine();
       const geometryPoints = this.createGraphic(tempPoints);
       this.setGeometryPoints(geometryPoints);
       this.drawPolygon();

src/arrow/double-arrow.ts

@@ -53,11 +53,9 @@ export default class DoubleArrow extends Base {
       this.lineEntity && this.viewer.entities.remove(this.lineEntity);
     } else {
       this.finishDrawing();
-      this.curveControlPointLeft = this.cesium.Cartesian3.fromDegrees(this.llBodyPnts[2][0], this.llBodyPnts[2][1]);
-      this.curveControlPointRight = this.cesium.Cartesian3.fromDegrees(this.rrBodyPnts[1][0], this.rrBodyPnts[1][1]);
 
-      // 辅助查看插值控制点位置
+      // // 辅助查看插值控制点位置
-      // this.CesiumViewer.entities.add({
+      // this.viewer.entities.add({
       // 	position: this.curveControlPointLeft,
       // 	point: {
       // 		pixelSize: 10,
@@ -65,7 +63,7 @@ export default class DoubleArrow extends Base {
       // 		color: this.cesium.Color.RED,
       // 	},
       // });
-      // this.CesiumViewer.entities.add({
+      // this.viewer.entities.add({
       // 	position: this.curveControlPointRight,
       // 	point: {
       // 		pixelSize: 10,
@@ -75,6 +73,12 @@ export default class DoubleArrow extends Base {
       // });
     }
   }
+
+  finishDrawing() {
+    this.curveControlPointLeft = this.cesium.Cartesian3.fromDegrees(this.llBodyPnts[2][0], this.llBodyPnts[2][1]);
+    this.curveControlPointRight = this.cesium.Cartesian3.fromDegrees(this.rrBodyPnts[1][0], this.rrBodyPnts[1][1]);
+    super.finishDrawing();
+  }
   /**
    * Draw a shape based on mouse movement points during the initial drawing.
    */
@@ -82,8 +86,9 @@ export default class DoubleArrow extends Base {
     const tempPoints = [...this.points, cartesian];
     this.setGeometryPoints(tempPoints);
     if (tempPoints.length === 2) {
-      this.addFirstLineOfTheArrow();
+      this.addTempLine();
     } else if (tempPoints.length > 2) {
+      this.removeTempLine();
       const geometryPoints = this.createGraphic(tempPoints);
       this.setGeometryPoints(geometryPoints);
       this.drawPolygon();

src/base.ts

@@ -35,6 +35,7 @@ export default class Base {
   points: CesiumTypeOnly.Cartesian3[] = [];
   styleCache: GeometryStyle | undefined;
   minPointsForShape: number = 0;
+  tempLineEntity: CesiumTypeOnly.Entity;
 
   constructor(cesium: CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer, style?: GeometryStyle) {
     this.cesium = cesium;
@@ -266,15 +267,21 @@ export default class Base {
     }
   }
 
-  addFirstLineOfTheArrow() {
+  addTempLine() {
-    if (!this.lineEntity) {
+    if (!this.tempLineEntity) {
       // The line style between the first two points matches the outline style.
       const style = this.style as PolygonStyle;
       const lineStyle = {
         material: style.outlineMaterial,
         lineWidth: style.outlineWidth,
       };
-      this.lineEntity = this.addLineEntity(lineStyle);
+      this.tempLineEntity = this.addLineEntity(lineStyle);
+    }
+  }
+
+  removeTempLine() {
+    if (this.tempLineEntity) {
+      this.viewer.entities.remove(this.tempLineEntity);
     }
   }
 
@@ -434,6 +441,11 @@ export default class Base {
           });
 
           this.setGeometryPoints(newPoints);
+          if (this.minPointsForShape === 4) {
+            // 双箭头在整体被拖拽时，需要同步更新生长动画的插值点
+            this.curveControlPointLeft = this.cesium.Cartesian3.add(this.curveControlPointLeft, translation, new this.cesium.Cartesian3());
+            this.curveControlPointRight = this.cesium.Cartesian3.add(this.curveControlPointRight, translation, new this.cesium.Cartesian3());
+          }
           startPosition = newPosition;
         }
       } else {
@@ -718,10 +730,7 @@ export default class Base {
 
   private doubleArrowGrowthAnimation(duration: number = 2000, delay: number = 0, callback?: Function) {
     setTimeout(() => {
-      this.viewer.entities.remove(this.polygonEntity);
+      this.hideWithAnimation(0, 0, undefined);
-      this.viewer.entities.remove(this.outlineEntity);
-      this.polygonEntity = null;
-      this.outlineEntity = null;
       const points = this.getPoints();
       let startTime = Date.now();
       this.viewer.clock.shouldAnimate = true;
@@ -776,7 +785,7 @@ export default class Base {
         tempPoints[3] = newPositionLeft;
         const geometryPoints = this.createGraphic(tempPoints);
         this.setGeometryPoints(geometryPoints);
-        this.drawPolygon();
+        this.showWithAnimation(0, 0, undefined);
       };
       this.viewer.clock.onTick.addEventListener(frameListener);
     }, delay);

src/index.ts

@@ -16,8 +16,12 @@ import Reactangle from './polygon/rectangle';
 import Triangle from './polygon/triangle';
 import Polygon from './polygon/polygon';
 import Circle from './polygon/circle';
+import Sector from './polygon/sector';
 
-const CesiumPlot = {
+import { GeometryStyle } from './interface';
+import * as CesiumTypeOnly from 'cesium';
+
+const CesiumPlot: any = {
   FineArrow,
   AttackArrow,
   SwallowtailAttackArrow,
@@ -36,6 +40,33 @@ const CesiumPlot = {
   Triangle,
   Polygon,
   Circle,
+  Sector,
+};
+
+type CreateGeometryFromDataOpts = {
+  type: string;
+  cartesianPoints: CesiumTypeOnly.Cartesian3[];
+  style: GeometryStyle;
+};
+/**
+ * 根据点位数据生成几何图形
+ * @param points
+ */
+CesiumPlot.createGeometryFromData = (cesium: any, viewer: any, opts: CreateGeometryFromDataOpts) => {
+  const { type, style, cartesianPoints } = opts;
+  const geometry = new CesiumPlot[type](cesium, viewer, style);
+
+  geometry.points = cartesianPoints;
+  const geometryPoints = geometry.createGraphic(cartesianPoints);
+  geometry.setGeometryPoints(geometryPoints);
+  if (geometry.type == 'polygon') {
+    geometry.drawPolygon();
+  } else {
+    geometry.drawLine();
+  }
+  geometry.finishDrawing();
+  geometry.onClick();
+  return geometry;
 };
 
 export default CesiumPlot;

src/polygon/circle.ts

@@ -37,7 +37,7 @@ export default class Circle extends Base {
    */
   updateMovingPoint(cartesian: Cartesian3) {
     const tempPoints = [...this.points, cartesian];
-    const geometryPoints = this.createCircle(tempPoints);
+    const geometryPoints = this.createGraphic(tempPoints);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
@@ -47,12 +47,12 @@ export default class Circle extends Base {
    */
   updateDraggingPoint(cartesian: Cartesian3, index: number) {
     this.points[index] = cartesian;
-    const geometryPoints = this.createCircle(this.points);
+    const geometryPoints = this.createGraphic(this.points);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
 
-  createCircle(positions: Cartesian3[]) {
+  createGraphic(positions: Cartesian3[]) {
     const lnglatPoints = positions.map((pnt) => {
       return this.cartesianToLnglat(pnt);
     });

src/polygon/ellipse.ts

@@ -37,7 +37,7 @@ export default class Ellipse extends Base {
    */
   updateMovingPoint(cartesian: Cartesian3) {
     const tempPoints = [...this.points, cartesian];
-    const geometryPoints = this.createEllipse(tempPoints);
+    const geometryPoints = this.createGraphic(tempPoints);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
@@ -47,12 +47,12 @@ export default class Ellipse extends Base {
    */
   updateDraggingPoint(cartesian: Cartesian3, index: number) {
     this.points[index] = cartesian;
-    const geometryPoints = this.createEllipse(this.points);
+    const geometryPoints = this.createGraphic(this.points);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
 
-  createEllipse(positions: Cartesian3[]) {
+  createGraphic(positions: Cartesian3[]) {
     const lnglatPoints = positions.map((pnt) => {
       return this.cartesianToLnglat(pnt);
     });

src/polygon/lune.ts

@@ -37,7 +37,7 @@ export default class Lune extends Base {
    */
   updateMovingPoint(cartesian: Cartesian3) {
     const tempPoints = [...this.points, cartesian];
-    const geometryPoints = this.createLune(tempPoints);
+    const geometryPoints = this.createGraphic(tempPoints);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
@@ -47,12 +47,12 @@ export default class Lune extends Base {
    */
   updateDraggingPoint(cartesian: Cartesian3, index: number) {
     this.points[index] = cartesian;
-    const geometryPoints = this.createLune(this.points);
+    const geometryPoints = this.createGraphic(this.points);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
 
-  createLune(positions: Cartesian3[]) {
+  createGraphic(positions: Cartesian3[]) {
     const lnglatPoints = positions.map((pnt) => {
       return this.cartesianToLnglat(pnt);
     });

src/polygon/polygon.ts

@@ -25,7 +25,7 @@ export default class Polygon extends Base {
     this.points.push(cartesian);
     if (this.points.length === 1) {
       this.onMouseMove();
-    } 
+    }
   }
 
   /**
@@ -35,8 +35,9 @@ export default class Polygon extends Base {
     const tempPoints = [...this.points, cartesian];
     this.setGeometryPoints(tempPoints);
     if (tempPoints.length === 2) {
-      this.addFirstLineOfTheArrow();
+      this.addTempLine();
     } else {
+      this.removeTempLine();
       this.drawPolygon();
     }
   }

src/polygon/rectangle.ts

@@ -34,7 +34,7 @@ export default class Rectangle extends Base {
    */
   updateMovingPoint(cartesian: Cartesian3) {
     const tempPoints = [...this.points, cartesian];
-    const geometryPoints = this.createRectangle(tempPoints);
+    const geometryPoints = this.createGraphic(tempPoints);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
@@ -44,12 +44,12 @@ export default class Rectangle extends Base {
    */
   updateDraggingPoint(cartesian: Cartesian3, index: number) {
     this.points[index] = cartesian;
-    const geometryPoints = this.createRectangle(this.points);
+    const geometryPoints = this.createGraphic(this.points);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
 
-  createRectangle(positions: Cartesian3[]) {
+  createGraphic(positions: Cartesian3[]) {
     const [p1, p2] = positions.map(this.cartesianToLnglat);
     const coords = [...p1, p1[0], p2[1], ...p2, p2[0], p1[1], ...p1];
     const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(coords);

src/polygon/sector.ts

@@ -0,0 +1,77 @@
+import Base from '../base';
+// @ts-ignore
+import { Cartesian3 } from 'cesium';
+import * as Utils from '../utils';
+import { PolygonStyle } from '../interface';
+
+export default class Sector extends Base {
+  points: Cartesian3[] = [];
+
+  constructor(cesium: any, viewer: any, style?: PolygonStyle) {
+    super(cesium, viewer, style);
+    this.cesium = cesium;
+    this.setState('drawing');
+  }
+
+  getType(): 'polygon' | 'line' {
+    return 'polygon';
+  }
+
+  /**
+   * Add points only on click events
+   */
+  addPoint(cartesian: Cartesian3) {
+    this.points.push(cartesian);
+    if (this.points.length === 1) {
+      this.onMouseMove();
+    }else if (this.points.length === 3) {
+      this.finishDrawing();
+    }
+  }
+
+  /**
+   * Draw a shape based on mouse movement points during the initial drawing.
+   */
+  updateMovingPoint(cartesian: Cartesian3) {
+    const tempPoints = [...this.points, cartesian];
+    this.setGeometryPoints(tempPoints);
+    if (tempPoints.length === 2) {
+      this.addTempLine();
+    } else {
+      this.removeTempLine();
+      const geometryPoints = this.createGraphic(tempPoints);
+      this.setGeometryPoints(geometryPoints);
+      this.drawPolygon();
+    }
+  }
+
+  createGraphic(positions: Cartesian3[]) {
+    const lnglatPoints = positions.map((pnt) => {
+      return this.cartesianToLnglat(pnt);
+    });
+    const [center, pnt2, pnt3] = [lnglatPoints[0], lnglatPoints[1], lnglatPoints[2]];
+    const radius = Utils.MathDistance(pnt2, center);
+    const startAngle = Utils.getAzimuth(pnt2, center);
+    const endAngle = Utils.getAzimuth(pnt3, center);
+    const res = Utils.getArcPoints(center, radius, startAngle, endAngle);
+    res.push(center, res[0]);
+
+    const temp = [].concat(...res);
+    const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(temp);
+    return cartesianPoints;
+  }
+
+  /**
+   * In edit mode, drag key points to update corresponding key point data.
+   */
+  updateDraggingPoint(cartesian: Cartesian3, index: number) {
+    this.points[index] = cartesian;
+    const geometryPoints = this.createGraphic(this.points);
+    this.setGeometryPoints(geometryPoints);
+    this.drawPolygon();
+  }
+
+  getPoints() {
+    return this.points;
+  }
+}

src/polygon/triangle.ts

@@ -36,8 +36,9 @@ export default class Triangle extends Base {
     const tempPoints = [...this.points, cartesian];
     this.setGeometryPoints(tempPoints);
     if (tempPoints.length === 2) {
-      this.addFirstLineOfTheArrow();
+      this.addTempLine();
     } else {
+      this.removeTempLine();
       this.drawPolygon();
     }
   }