add sector

debug/index.ts

@@ -55,6 +55,9 @@ buttonGroup.onclick = (evt) => {
     case 'drawCircle':
       geometry = new CesiumPlot.Circle(Cesium, viewer);
       break;
+    case 'drawSector':
+      geometry = new CesiumPlot.Sector(Cesium, viewer);
+      break;
     case 'drawPolygon':
       geometry = new CesiumPlot.Polygon(Cesium, viewer);
       break;
@@ -141,7 +144,7 @@ buttonGroup.onclick = (evt) => {
       break;
     case 'remove':
       geometry && geometry.remove();
-      geometry = null;
+      // geometry = null;
       break;
     case 'addEvent':
       if (geometry) {
@@ -167,6 +170,13 @@ buttonGroup.onclick = (evt) => {
         geometry.startGrowthAnimation();
       }
       break;
+    case 'createGeometryFromData':
+      if (geometry) {
+        const points = geometry.getPoints();
+        debugger;
+        geometry.createGeometryFromData(points);
+      }
+      break;
     default:
       break;
   }

index.html

@@ -49,6 +49,7 @@
       <button id="drawReactangle">矩形</button>
       <button id="drawTriangle">三角形</button>
       <button id="drawCircle">圆形</button>
+      <button id="drawSector">扇形</button>
       <button id="drawStraightArrow">细直箭头</button>
       <button id="drawCurvedArrow">曲线箭头</button>
       <button id="drawFineArrow">直箭头</button>
@@ -69,6 +70,7 @@
       <button id="addEvent">绑定事件</button>
       <button id="removeEvent">解绑事件</button>
       <button id="startGrowthAnimation">生长动画</button>
+      <button id="createGeometryFromData">根据数据生成图形</button>
     </div>
     <script>
       window.CESIUM_BASE_URL = 'node_modules/cesium/Build/Cesium';

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cesium-plot-js",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cesium-plot-js",
-      "version": "0.0.4",
+      "version": "0.0.5",
       "dependencies": {
         "lodash.clonedeep": "^4.5.0",
         "lodash.merge": "^4.6.2"

src/index.ts

@@ -16,6 +16,7 @@ import Reactangle from './polygon/rectangle';
 import Triangle from './polygon/triangle';
 import Polygon from './polygon/polygon';
 import Circle from './polygon/circle';
+import Sector from './polygon/sector';
 
 const CesiumPlot = {
   FineArrow,
@@ -36,6 +37,7 @@ const CesiumPlot = {
   Triangle,
   Polygon,
   Circle,
+  Sector,
 };
 
 export default CesiumPlot;

src/polygon/circle.ts

@@ -37,7 +37,7 @@ export default class Circle extends Base {
    */
   updateMovingPoint(cartesian: Cartesian3) {
     const tempPoints = [...this.points, cartesian];
-    const geometryPoints = this.createCircle(tempPoints);
+    const geometryPoints = this.createGraphic(tempPoints);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
@@ -47,12 +47,12 @@ export default class Circle extends Base {
    */
   updateDraggingPoint(cartesian: Cartesian3, index: number) {
     this.points[index] = cartesian;
-    const geometryPoints = this.createCircle(this.points);
+    const geometryPoints = this.createGraphic(this.points);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
 
-  createCircle(positions: Cartesian3[]) {
+  createGraphic(positions: Cartesian3[]) {
     const lnglatPoints = positions.map((pnt) => {
       return this.cartesianToLnglat(pnt);
     });

src/polygon/ellipse.ts

@@ -37,7 +37,7 @@ export default class Ellipse extends Base {
    */
   updateMovingPoint(cartesian: Cartesian3) {
     const tempPoints = [...this.points, cartesian];
-    const geometryPoints = this.createEllipse(tempPoints);
+    const geometryPoints = this.createGraphic(tempPoints);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
@@ -47,12 +47,12 @@ export default class Ellipse extends Base {
    */
   updateDraggingPoint(cartesian: Cartesian3, index: number) {
     this.points[index] = cartesian;
-    const geometryPoints = this.createEllipse(this.points);
+    const geometryPoints = this.createGraphic(this.points);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
 
-  createEllipse(positions: Cartesian3[]) {
+  createGraphic(positions: Cartesian3[]) {
     const lnglatPoints = positions.map((pnt) => {
       return this.cartesianToLnglat(pnt);
     });

src/polygon/lune.ts

@@ -37,7 +37,7 @@ export default class Lune extends Base {
    */
   updateMovingPoint(cartesian: Cartesian3) {
     const tempPoints = [...this.points, cartesian];
-    const geometryPoints = this.createLune(tempPoints);
+    const geometryPoints = this.createGraphic(tempPoints);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
@@ -47,12 +47,12 @@ export default class Lune extends Base {
    */
   updateDraggingPoint(cartesian: Cartesian3, index: number) {
     this.points[index] = cartesian;
-    const geometryPoints = this.createLune(this.points);
+    const geometryPoints = this.createGraphic(this.points);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
 
-  createLune(positions: Cartesian3[]) {
+  createGraphic(positions: Cartesian3[]) {
     const lnglatPoints = positions.map((pnt) => {
       return this.cartesianToLnglat(pnt);
     });

src/polygon/rectangle.ts

@@ -34,7 +34,7 @@ export default class Rectangle extends Base {
    */
   updateMovingPoint(cartesian: Cartesian3) {
     const tempPoints = [...this.points, cartesian];
-    const geometryPoints = this.createRectangle(tempPoints);
+    const geometryPoints = this.createGraphic(tempPoints);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
@@ -44,12 +44,12 @@ export default class Rectangle extends Base {
    */
   updateDraggingPoint(cartesian: Cartesian3, index: number) {
     this.points[index] = cartesian;
-    const geometryPoints = this.createRectangle(this.points);
+    const geometryPoints = this.createGraphic(this.points);
     this.setGeometryPoints(geometryPoints);
     this.drawPolygon();
   }
 
-  createRectangle(positions: Cartesian3[]) {
+  createGraphic(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/sector.ts

@@ -0,0 +1,76 @@
+import Base from '../base';
+// @ts-ignore
+import { Cartesian3 } from 'cesium';
+import * as Utils from '../utils';
+import { PolygonStyle } from '../interface';
+
+export default class Sector 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 {
+      const geometryPoints = this.createGraphic(tempPoints);
+      this.setGeometryPoints(geometryPoints);
+      this.drawPolygon();
+    }
+  }
+
+  createGraphic(positions: Cartesian3[]) {
+    const lnglatPoints = positions.map((pnt) => {
+      return this.cartesianToLnglat(pnt);
+    });
+    const [center, pnt2, pnt3] = [lnglatPoints[0], lnglatPoints[1], lnglatPoints[2]];
+    const radius = Utils.MathDistance(pnt2, center);
+    const startAngle = Utils.getAzimuth(pnt2, center);
+    const endAngle = Utils.getAzimuth(pnt3, center);
+    const res = Utils.getArcPoints(center, radius, startAngle, endAngle);
+    res.push(center, res[0]);
+
+    const temp = [].concat(...res);
+    const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(temp);
+    return cartesianPoints;
+  }
+
+  /**
+   * In edit mode, drag key points to update corresponding key point data.
+   */
+  updateDraggingPoint(cartesian: Cartesian3, index: number) {
+    this.points[index] = cartesian;
+    const geometryPoints = this.createGraphic(this.points);
+    this.setGeometryPoints(geometryPoints);
+    this.drawPolygon();
+  }
+
+  getPoints() {
+    return this.points;
+  }
+}