dynamic drawing while mouse is moving

src/arrow/fine-arrow.ts

@@ -1,19 +1,48 @@
 import Draw from '../draw';
+import * as Utils from '../utils';
 
 export default class FineArrow extends Draw {
   points: any = [];
   constructor(cesium, viewer, style) {
     super(cesium, viewer);
     this.cesium = cesium;
-    this.setPoints = this.setPoints.bind(this);
+    // this.setPoints = this.setPoints.bind(this);
-    this.onClick(this.setPoints);
+    this.onClick();
   }
 
-  setPoints(cartesian) {
+  addPoint(cartesian) {
     this.points.push(cartesian);
     if (this.points.length == 2) {
-      this.addToMap(this.points);
+      const geometryPoints = this.createPolygon(this.points);
+      this.setGeometryPoints(geometryPoints);
+      this.addToMap();
       this.removeEventListener();
     }
   }
+
+  updateMovingPoint(cartesian) {
+    let tempPoints = [].concat(this.points);
+    tempPoints = tempPoints.concat([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]);
+    const len = Utils.getBaseLength([p1, p2]);
+    const tailWidth = len * this.tailWidthFactor;
+    const neckWidth = len * this.neckWidthFactor;
+    const headWidth = len * this.headWidthFactor;
+    const tailLeft = Utils.getThirdPoint(p2, p1, Math.PI / 2, tailWidth, true);
+    const tailRight = Utils.getThirdPoint(p2, p1, Math.PI / 2, tailWidth, false);
+    const headLeft = Utils.getThirdPoint(p1, p2, this.headAngle, headWidth, false);
+    const headRight = Utils.getThirdPoint(p1, p2, this.headAngle, headWidth, true);
+    const neckLeft = Utils.getThirdPoint(p1, p2, this.neckAngle, neckWidth, false);
+    const neckRight = Utils.getThirdPoint(p1, p2, this.neckAngle, neckWidth, true);
+    const points = [...tailLeft, ...neckLeft, ...headLeft, ...p2, ...headRight, ...neckRight, ...tailRight, ...p1];
+    const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points);
+    return cartesianPoints;
+  }
 }

src/draw.ts

@@ -12,6 +12,9 @@ export default class Draw {
   neckAngle: number;
   eventHandler: any;
   clickListener: any;
+  entity: any;
+  renderingPoints: any;
+  geometryPoints: any;
 
   constructor(cesium, viewer) {
     this.cesium = cesium;
@@ -23,13 +26,13 @@ export default class Draw {
     this.neckAngle = Math.PI / 13;
   }
 
-  onClick(callback?: Function) {
+  onClick() {
     // 添加点击事件监听器
     this.eventHandler = new this.cesium.ScreenSpaceEventHandler(this.viewer.canvas);
     this.clickListener = this.eventHandler.setInputAction((evt) => {
-      const ray = this.viewer.camera.getPickRay(evt.position);
+      const cartesian = this.pixelToCartesian(evt.position);
-      const cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
+      this.addPoint(cartesian);
-      callback && callback(cartesian);
+      this.onMouseMove();
     }, this.cesium.ScreenSpaceEventType.LEFT_CLICK);
   }
 
@@ -37,35 +40,38 @@ export default class Draw {
     this.eventHandler.removeInputAction(this.cesium.ScreenSpaceEventType.LEFT_CLICK, this.clickListener);
   }
 
-  onMove() {}
+  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);
 
-  addToMap(positions) {
+      if (distance < 0.0001) {
+        return false;
+      }
+      this.updateMovingPoint(cartesian);
+    }, this.cesium.ScreenSpaceEventType.MOUSE_MOVE);
+  }
+
+  setGeometryPoints(geometryPoints) {
+    this.geometryPoints = geometryPoints;
+  }
+
+  addToMap() {
     const callback = () => {
-      const p1 = this.cartesianToLnglat(positions[0]);
+      return new this.cesium.PolygonHierarchy(this.geometryPoints);
-      const p2 = this.cartesianToLnglat(positions[1]);
-      const len = Utils.getBaseLength([p1, p2]);
-      const tailWidth = len * this.tailWidthFactor;
-      const neckWidth = len * this.neckWidthFactor;
-      const headWidth = len * this.headWidthFactor;
-      const tailLeft = Utils.getThirdPoint(p2, p1, Math.PI / 2, tailWidth, true);
-      const tailRight = Utils.getThirdPoint(p2, p1, Math.PI / 2, tailWidth, false);
-      const headLeft = Utils.getThirdPoint(p1, p2, this.headAngle, headWidth, false);
-      const headRight = Utils.getThirdPoint(p1, p2, this.headAngle, headWidth, true);
-      const neckLeft = Utils.getThirdPoint(p1, p2, this.neckAngle, neckWidth, false);
-      const neckRight = Utils.getThirdPoint(p1, p2, this.neckAngle, neckWidth, true);
-      const points = [...tailLeft, ...neckLeft, ...headLeft, ...p2, ...headRight, ...neckRight, ...tailRight, ...p1];
-      const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points);
-      debugger;
-      return new this.cesium.PolygonHierarchy(cartesianPoints);
     };
-    return this.viewer.entities.add({
+    if (!this.entity) {
-      polygon: new this.cesium.PolygonGraphics({
+      this.entity = this.viewer.entities.add({
-        hierarchy: new this.cesium.CallbackProperty(callback, false),
+        polygon: new this.cesium.PolygonGraphics({
-        show: true,
+          hierarchy: new this.cesium.CallbackProperty(callback, false),
-        // fill: true,
+          show: true,
-        // material: this.cesium.Color.LIGHTSKYBLUE.withAlpha(0.8),
+          // fill: true,
-      }),
+          // material: this.cesium.Color.LIGHTSKYBLUE.withAlpha(0.8),
-    });
+        }),
+      });
+    }
   }
 
   cartesianToLnglat(cartesian) {
@@ -74,4 +80,10 @@ export default class Draw {
     var lng = this.cesium.Math.toDegrees(lnglat.longitude);
     return [lng, lat];
   }
+
+  pixelToCartesian(position) {
+    const ray = this.viewer.camera.getPickRay(position);
+    const cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
+    return cartesian;
+  }
 }