From 2f5e3a50a047f15e81f53d0e1e7018a19f9a52c7 Mon Sep 17 00:00:00 2001
From: ethan <zhufeng_solo@163.com>
Date: Tue, 14 May 2024 09:32:07 +0800
Subject: [PATCH] Delete the lines temporarily created during the drawing
 process

---
 debug/index.ts            |  7 ++++++-
 index.html                |  1 +
 src/arrow/attack-arrow.ts |  3 ++-
 src/arrow/double-arrow.ts |  3 ++-
 src/base.ts               | 13 ++++++++++---
 src/polygon/polygon.ts    |  5 +++--
 src/polygon/sector.ts     |  3 ++-
 src/polygon/triangle.ts   |  3 ++-
 8 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/debug/index.ts b/debug/index.ts
index 4431fd7..5d16dd5 100644
--- a/debug/index.ts
+++ b/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:
diff --git a/index.html b/index.html
index cfbcc8f..19cae77 100644
--- a/index.html
+++ b/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';
diff --git a/src/arrow/attack-arrow.ts b/src/arrow/attack-arrow.ts
index 4cfeff4..0126e94 100644
--- a/src/arrow/attack-arrow.ts
+++ b/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();
diff --git a/src/arrow/double-arrow.ts b/src/arrow/double-arrow.ts
index ccefb63..4f9e76a 100644
--- a/src/arrow/double-arrow.ts
+++ b/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();
diff --git a/src/base.ts b/src/base.ts
index e8680e5..6c38502 100644
--- a/src/base.ts
+++ b/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);
     }
   }
 
diff --git a/src/polygon/polygon.ts b/src/polygon/polygon.ts
index ab4e558..3d447b5 100644
--- a/src/polygon/polygon.ts
+++ b/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();
     }
   }
diff --git a/src/polygon/sector.ts b/src/polygon/sector.ts
index 28137e1..f169c9d 100644
--- a/src/polygon/sector.ts
+++ b/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();
diff --git a/src/polygon/triangle.ts b/src/polygon/triangle.ts
index 462d5cb..b886e96 100644
--- a/src/polygon/triangle.ts
+++ b/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();
     }
   }