Unbind 'mousemove' event after drawing is complete, and enhance TypeScript type validation

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "vite build",
     "lint": "eslint . --ext ts --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },

src/arrow/fine-arrow.ts

@@ -1,36 +1,48 @@
 import Draw from '../draw';
 import * as Utils from '../utils';
+import { Cartesian3 } from '../../examples/cesium';
 
 export default class FineArrow extends Draw {
-  points: any = [];
-  constructor(cesium, viewer, style) {
+  points: Cartesian3[] = [];
+
+  constructor(cesium: any, viewer: any, style: any) {
     super(cesium, viewer);
     this.cesium = cesium;
-    // this.setPoints = this.setPoints.bind(this);
     this.onClick();
   }
 
-  addPoint(cartesian) {
+  /**
+   * Add points only on click events
+   */
+  addPoint(cartesian: Cartesian3) {
     this.points.push(cartesian);
-    if (this.points.length == 2) {
+    if (this.points.length === 1) {
+      this.onMouseMove();
+    }
+    if (this.points.length === 2) {
       const geometryPoints = this.createPolygon(this.points);
       this.setGeometryPoints(geometryPoints);
       this.addToMap();
-      this.removeEventListener();
+      this.removeClickListener();
+      this.removeMoveListener();
     }
   }
 
-  updateMovingPoint(cartesian) {
-    let tempPoints = [].concat(this.points);
-    tempPoints = tempPoints.concat([cartesian]);
+  /**
+   * Update the last point as the mouse moves.
+   */
+  updateMovingPoint(cartesian: Cartesian3) {
+    let tempPoints = [...this.points, cartesian];
     const geometryPoints = this.createPolygon(tempPoints);
     this.setGeometryPoints(geometryPoints);
     this.addToMap();
   }
 
-  createPolygon(positions) {
-    const p1 = this.cartesianToLnglat(positions[0]);
-    const p2 = this.cartesianToLnglat(positions[1]);
+  /**
+   * Generate geometric shapes based on key points.
+   */
+  createPolygon(positions: Cartesian3[]) {
+    const [p1, p2] = positions.map(this.cartesianToLnglat);
     const len = Utils.getBaseLength([p1, p2]);
     const tailWidth = len * this.tailWidthFactor;
     const neckWidth = len * this.neckWidthFactor;

src/draw.ts

@@ -1,8 +1,9 @@
 import * as Utils from './utils';
+import * as CesiumTypeOnly from '../examples/cesium';
 
 export default class Draw {
-  cesium: any;
-  viewer: any;
+  cesium: typeof CesiumTypeOnly;
+  viewer: CesiumTypeOnly.Viewer;
   arrowLengthScale: number = 5;
   maxArrowLength: number = 2;
   tailWidthFactor: number;
@@ -10,13 +11,11 @@ export default class Draw {
   headWidthFactor: number;
   headAngle: number;
   neckAngle: number;
-  eventHandler: any;
-  clickListener: any;
-  entity: any;
-  renderingPoints: any;
-  geometryPoints: any;
+  eventHandler: CesiumTypeOnly.ScreenSpaceEventHandler;
+  entity: CesiumTypeOnly.Entity;
+  geometryPoints: CesiumTypeOnly.Cartesian3[] | undefined;
 
-  constructor(cesium, viewer) {
+  constructor(cesium: typeof CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer) {
     this.cesium = cesium;
     this.viewer = viewer;
     this.tailWidthFactor = 0.1;
@@ -24,37 +23,41 @@ export default class Draw {
     this.headWidthFactor = 0.25;
     this.headAngle = Math.PI / 8.5;
     this.neckAngle = Math.PI / 13;
+    this.cartesianToLnglat = this.cartesianToLnglat.bind(this);
+    this.pixelToCartesian = this.pixelToCartesian.bind(this);
   }
 
   onClick() {
-    // 添加点击事件监听器
     this.eventHandler = new this.cesium.ScreenSpaceEventHandler(this.viewer.canvas);
-    this.clickListener = this.eventHandler.setInputAction((evt) => {
+    this.eventHandler.setInputAction((evt) => {
       const cartesian = this.pixelToCartesian(evt.position);
       this.addPoint(cartesian);
-      this.onMouseMove();
     }, this.cesium.ScreenSpaceEventType.LEFT_CLICK);
   }
 
-  removeEventListener() {
-    this.eventHandler.removeInputAction(this.cesium.ScreenSpaceEventType.LEFT_CLICK, this.clickListener);
-  }
-
   onMouseMove() {
     this.eventHandler.setInputAction((evt) => {
       const cartesian = this.pixelToCartesian(evt.endPosition);
       const lnglat = this.cartesianToLnglat(cartesian);
       const lastPoint = this.cartesianToLnglat(this.points[this.points.length - 1]);
       const distance = Utils.MathDistance(lnglat, lastPoint);
-
       if (distance < 0.0001) {
         return false;
       }
+      // Synchronize data to subclasses.
       this.updateMovingPoint(cartesian);
     }, this.cesium.ScreenSpaceEventType.MOUSE_MOVE);
   }
 
-  setGeometryPoints(geometryPoints) {
+  removeClickListener() {
+    this.eventHandler.removeInputAction(this.cesium.ScreenSpaceEventType.LEFT_CLICK);
+  }
+
+  removeMoveListener() {
+    this.eventHandler.removeInputAction(this.cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  }
+
+  setGeometryPoints(geometryPoints: CesiumTypeOnly.Cartesian3[]) {
     this.geometryPoints = geometryPoints;
   }
 
@@ -74,14 +77,14 @@ export default class Draw {
     }
   }
 
-  cartesianToLnglat(cartesian) {
-    var lnglat = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
-    var lat = this.cesium.Math.toDegrees(lnglat.latitude);
-    var lng = this.cesium.Math.toDegrees(lnglat.longitude);
+  cartesianToLnglat(cartesian: CesiumTypeOnly.Cartesian3): number[] {
+    const lnglat = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
+    const lat = this.cesium.Math.toDegrees(lnglat.latitude);
+    const lng = this.cesium.Math.toDegrees(lnglat.longitude);
     return [lng, lat];
   }
 
-  pixelToCartesian(position) {
+  pixelToCartesian(position: CesiumTypeOnly.Cartesian2): CesiumTypeOnly.Cartesian3 | undefined {
     const ray = this.viewer.camera.getPickRay(position);
     const cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
     return cartesian;