add triangle

examples/index.ts

@@ -69,6 +69,9 @@ buttonGroup.onclick = (evt) => {
     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)'),

index.html

@@ -46,6 +46,7 @@
     <div id="cesiumContainer"></div>
     <div class="button-container" id="button-group">
       <button id="drawReactangle">矩形</button>
+      <button id="drawTriangle">三角形</button>
       <button id="drawStraightArrow">细直箭头</button>
       <button id="drawCurvedArrow">曲线箭头</button>
       <button id="drawFineArrow">直箭头</button>

src/index.ts

@@ -13,6 +13,7 @@ import Curve from './line/curve';
 import Ellipse from './polygon/ellipse';
 import Lune from './polygon/lune';
 import Reactangle from './polygon/rectangle';
+import Triangle from './polygon/triangle';
 
 const CesiumPlot = {
   FineArrow,
@@ -29,7 +30,8 @@ const CesiumPlot = {
   Curve,
   Ellipse,
   Lune,
-  Reactangle
+  Reactangle,
+  Triangle
 };
 
 export default CesiumPlot;

src/polygon/rectangle.ts

@@ -1,5 +1,4 @@
 import Base from '../base';
-import * as Utils from '../utils';
 // @ts-ignore
 import { Cartesian3 } from '@examples/cesium';
 
@@ -35,7 +34,7 @@ export default class Rectangle extends Base {
    */
   updateMovingPoint(cartesian: Cartesian3) {
     const tempPoints = [...this.points, cartesian];
-    const geometryPoints = this.createEllipse(tempPoints);
+    const geometryPoints = this.createRectangle(tempPoints);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
@@ -45,12 +44,12 @@ export default class Rectangle extends Base {
    */
   updateDraggingPoint(cartesian: Cartesian3, index: number) {
     this.points[index] = cartesian;
-    const geometryPoints = this.createEllipse(this.points);
+    const geometryPoints = this.createRectangle(this.points);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
 
-  createEllipse(positions: Cartesian3[]) {
+  createRectangle(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/triangle.ts

@@ -0,0 +1,57 @@
+import Base from '../base';
+// @ts-ignore
+import { Cartesian3 } from '@examples/cesium';
+
+import { PolygonStyle } from '../interface';
+
+export default class Triangle 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.addFirstLineOfTheArrow();
+    } else {
+      this.drawPolygon();
+    }
+  }
+
+  /**
+   * In edit mode, drag key points to update corresponding key point data.
+   */
+  updateDraggingPoint(cartesian: Cartesian3, index: number) {
+    this.points[index] = cartesian;
+    this.setGeometryPoints(this.points);
+    this.drawPolygon();
+  }
+
+  getPoints() {
+    return this.points;
+  }
+}