fix(drawer): incorrect drawing of circles and rectangles

hongfaqiu · Aug 20, 2024 · 9ff29f1 · 9ff29f1
1 parent 27d576d
commit 9ff29f1
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 33 deletions.
diff --git a/doc/src/utils/initMap.ts b/doc/src/utils/initMap.ts
@@ -1,4 +1,4 @@
-import { Viewer, Cartesian3, Math as CMath, Ion } from 'cesium';
+import { Viewer, Cartesian3, Math as CMath, Ion, ArcGisMapServerImageryProvider, ImageryLayer } from 'cesium';
 
 import 'cesium/Build/Cesium/Widgets/widgets.css';
 
@@ -16,6 +16,9 @@ export function initMap(
   } = {},
 ) {
   const viewer: Viewer = new Viewer(cesiumContainer, {
+    baseLayer: ImageryLayer.fromProviderAsync(ArcGisMapServerImageryProvider.fromUrl('https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer', {
+      enablePickFeatures: false
+    }), {}),
     baseLayerPicker: false, // 图层选择器
     animation: false, // 左下角仪表
     fullscreenButton: false, // 全屏按钮

diff --git a/packages/drawer/src/base.ts b/packages/drawer/src/base.ts
@@ -71,6 +71,7 @@ export default class BasicGraphices {
     )
       return;
 
+    // 如果当前没有点则动态绘制
     if (!this.painter._activeShapePoints.length) {
       this.dynamicUpdate(earthPosition, createShape);
     }
@@ -116,7 +117,12 @@ export default class BasicGraphices {
   }
 
   protected _cancel(createShape: (positions: Cartesian3[]) => Entity): void {
-    this.painter._activeShapePoints.pop();
+    if (this.painter._activeShapePoints.length < 3) {
+      this.painter.reset();
+      return;
+    }
+    // 移除最后一个固定点
+    this.painter._activeShapePoints.splice(-2, 1);
     if (this._onPointsChange)
       this._onPointsChange([...this.painter._activeShapePoints]);
     this.result = createShape(this.painter._activeShapePoints);

diff --git a/packages/drawer/src/shape/circle.ts b/packages/drawer/src/shape/circle.ts
@@ -7,54 +7,42 @@ import {
 
 import BasicGraphices from "../base";
 
-import type { Cartesian3 } from "cesium";
+import { Cartesian3 } from "cesium";
 import type { EventArgs } from "@cesium-extends/subscriber";
 import type { LifeCycle } from "../base";
 
 export default class Circle extends BasicGraphices implements LifeCycle {
   dropPoint(move: EventArgs): void {
-    if (this.painter._breakPointEntities.length < 1) {
-      this._dropPoint(move, this.createShape.bind(this));
-    }
+    this._dropPoint(move, this.createShape.bind(this));
   }
 
   playOff(): Entity {
     return this._playOff(this.createShape.bind(this));
   }
 
   cancel(): void {
-    this.painter.clear();
-    if (this._onPointsChange)
-      this._onPointsChange([...this.painter._activeShapePoints]);
+    this._cancel(this.createShape.bind(this));
   }
 
   createShape(
     hierarchy: Cartesian3[] | CallbackProperty,
     isDynamic = false,
   ): Entity {
     const target: Cartesian3[] = Array.isArray(hierarchy)
-      ? hierarchy
-      : hierarchy.getValue(JulianDate.now());
+    ? hierarchy
+    : hierarchy.getValue(JulianDate.now());
+
+    const radiusFuc = new CallbackProperty(function () {
+      const distance = Cartesian3.distance(target[0], target[target.length - 1]);
+      return distance || 1;
+    }, false)
 
     const ellipse = Object.assign(
       {},
       isDynamic && !this.sameStyle ? this.dynamicOptions : this.finalOptions,
       {
-        semiMinorAxis: new CallbackProperty(function () {
-          // 半径 两点间距离
-          const radius = Math.sqrt(
-            Math.pow(target[0].x - target[target.length - 1].x, 2) +
-              Math.pow(target[0].y - target[target.length - 1].y, 2),
-          );
-          return radius || radius + 1;
-        }, false),
-        semiMajorAxis: new CallbackProperty(function () {
-          const radius = Math.sqrt(
-            Math.pow(target[0].x - target[target.length - 1].x, 2) +
-              Math.pow(target[0].y - target[target.length - 1].y, 2),
-          );
-          return radius || radius + 1;
-        }, false),
+        semiMinorAxis: radiusFuc,
+        semiMajorAxis: radiusFuc,
         classificationType: this.painter._model
           ? ClassificationType.CESIUM_3D_TILE
           : undefined,

diff --git a/packages/drawer/src/shape/rectangle.ts b/packages/drawer/src/shape/rectangle.ts
@@ -15,9 +15,7 @@ import type { LifeCycle } from "../base";
 
 export default class Rectangle extends BasicGraphices implements LifeCycle {
   dropPoint(move: EventArgs): void {
-    if (this.painter._breakPointEntities.length < 1) {
-      this._dropPoint(move, this.createShape.bind(this));
-    }
+    this._dropPoint(move, this.createShape.bind(this));
   }
 
   playOff(): Entity {
@@ -49,9 +47,7 @@ export default class Rectangle extends BasicGraphices implements LifeCycle {
   }
 
   cancel(): void {
-    this.painter.clear();
-    if (this._onPointsChange)
-      this._onPointsChange([...this.painter._activeShapePoints]);
+    this._cancel(this.createShape.bind(this));
   }
 
   createShape(

diff --git a/vite-example/src/index.ts b/vite-example/src/index.ts
@@ -1,4 +1,4 @@
-import { Viewer, Cartesian3, Math as CMath, DataSource, GeoJsonDataSource } from 'cesium';
+import { Viewer, Cartesian3, Math as CMath, DataSource, GeoJsonDataSource, ArcGisMapServerImageryProvider, ImageryLayer } from 'cesium';
 import './style.css';
 import 'cesium/Build/Cesium/Widgets/widgets.css';
 import { GeoJsonRenderConfig, updateDataSourcePosition, renderGeoJson, GeoJsonPrimitiveLayer, renderPrimitiveGeoJson } from 'cesium-extends';
@@ -14,6 +14,9 @@ function initMap(
   } = {},
 ) {
   const viewer: Viewer = new Viewer(cesiumContainer, {
+    baseLayer: ImageryLayer.fromProviderAsync(ArcGisMapServerImageryProvider.fromUrl('https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer', {
+      enablePickFeatures: false
+    }), {}),
     baseLayerPicker: false, // 图层选择器
     animation: false, // 左下角仪表
     fullscreenButton: false, // 全屏按钮