add rectangle

examples/index.ts

@@ -2,14 +2,10 @@ import CesiumPlot from '../src';
 // import CesiumPlot from "../dist/CesiumPlot";
 import * as Cesium from './cesium/index';
 
-// let raster = new Cesium.ArcGisMapServerImageryProvider({
-//   url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
-// });
-
-let raster = new Cesium.UrlTemplateImageryProvider({
-  url: 'https://10.68.8.41:9043/kmap-server/gridMap/tile/{z}/{y}/{x}',
-  // url: 'http://10.68.8.58:8080/3d/dom2/{z}/{x}/{y}.png'
+let raster = new Cesium.ArcGisMapServerImageryProvider({
+  url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
 });
+
 const viewer = new Cesium.Viewer('cesiumContainer', {
   animation: false,
   shouldAnimate: true,
@@ -26,12 +22,11 @@ const viewer = new Cesium.Viewer('cesiumContainer', {
   contextOptions: {
     requestWebgl2: true,
   },
-  // msaaSamples: 4,
 });
 
 viewer.scene.postProcessStages.fxaa.enabled = true;
 viewer.scene.camera.setView({
-  destination: Cesium.Cartesian3.fromDegrees(107.857, 35.594498, 7000000),
+  destination: Cesium.Cartesian3.fromDegrees(107.857, 35.594498, 10000),
 });
 
 const getCameraInfo = () => {
@@ -71,6 +66,9 @@ const buttonGroup = document.getElementById('button-group') as HTMLElement;
 buttonGroup.onclick = (evt) => {
   const targetElement = evt.target as HTMLElement;
   switch (targetElement.id) {
+    case 'drawReactangle':
+      geometry = new CesiumPlot.Reactangle(Cesium, viewer);
+      break;
     case 'drawFineArrow':
       geometry = new CesiumPlot.FineArrow(Cesium, viewer, {
         material: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.5)'),

index.html

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

src/base.ts

@@ -157,7 +157,9 @@ export default class Base {
 
   finishDrawing() {
     this.removeMoveListener();
-    this.setState('static');
+    this.setState('edit');
+    this.addControlPoints();
+    this.draggable();
     const entity = this.polygonEntity || this.lineEntity;
     this.entityId = entity.id;
     /**

src/index.ts

@@ -12,6 +12,7 @@ import FreehandPolygon from './polygon/freehand-polygon';
 import Curve from './line/curve';
 import Ellipse from './polygon/ellipse';
 import Lune from './polygon/lune';
+import Reactangle from './polygon/rectangle';
 
 const CesiumPlot = {
   FineArrow,
@@ -28,6 +29,7 @@ const CesiumPlot = {
   Curve,
   Ellipse,
   Lune,
+  Reactangle
 };
 
 export default CesiumPlot;

src/polygon/rectangle.ts

@@ -0,0 +1,63 @@
+import Base from '../base';
+import * as Utils from '../utils';
+// @ts-ignore
+import { Cartesian3 } from '@examples/cesium';
+
+import { PolygonStyle } from '../interface';
+
+export default class Rectangle 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 > 1) {
+      this.finishDrawing();
+    }
+  }
+
+  /**
+   * Draw a shape based on mouse movement points during the initial drawing.
+   */
+  updateMovingPoint(cartesian: Cartesian3) {
+    const tempPoints = [...this.points, cartesian];
+    const geometryPoints = this.createEllipse(tempPoints);
+    this.setGeometryPoints(geometryPoints);
+    this.drawPolygon();
+  }
+
+  /**
+   * In edit mode, drag key points to update corresponding key point data.
+   */
+  updateDraggingPoint(cartesian: Cartesian3, index: number) {
+    this.points[index] = cartesian;
+    const geometryPoints = this.createEllipse(this.points);
+    this.setGeometryPoints(geometryPoints);
+    this.drawPolygon();
+  }
+
+  createEllipse(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);
+    return cartesianPoints;
+  }
+
+  getPoints() {
+    return this.points;
+  }
+}