Delete the lines temporarily created during the drawing process

debug/index.ts

@@ -174,7 +174,12 @@ buttonGroup.onclick = (evt) => {
       if (geometry) {
         const points = geometry.getPoints();
         debugger;
-        geometry.createGeometryFromData(points);
+        CesiumPlot.createGeometryFromData(points);
+      }
+      break;
+    case 'cancelDraw':
+      if (geometry) {
+        geometry.remove();
       }
       break;
     default:

index.html

@@ -71,6 +71,7 @@
       <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';

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

@@ -82,8 +82,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() {
-    if (!this.lineEntity) {
+  addTempLine() {
+    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);
     }
   }
 

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/sector.ts

@@ -36,8 +36,9 @@ export default class Sector 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/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();
     }
   }