show,hide,remove

examples/index.ts

@@ -3,10 +3,10 @@ import CesiumPlot from '../src';
 import * as Cesium from './cesium/index';
 
 // let raster = new Cesium.ArcGisMapServerImageryProvider({
-//   url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+//   url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
 // });
 
-let keda = new Cesium.UrlTemplateImageryProvider({
+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'
 });
@@ -22,8 +22,8 @@ const viewer = new Cesium.Viewer('cesiumContainer', {
   timeline: false,
   navigationHelpButton: false,
   baseLayerPicker: false,
+  imageryProvider: raster,
   // imageryProvider: raster,
-  imageryProvider: keda,
   contextOptions: {
     requestWebgl2: true,
   },
@@ -35,56 +35,81 @@ viewer.scene.camera.setView({
   destination: Cesium.Cartesian3.fromDegrees(107.857, 35.594498, 7000000),
 });
 
+const getCameraInfo = () => {
+  var position = viewer.camera.position;
+  var ellipsoid = viewer.scene.globe.ellipsoid;
+  var cartographic = ellipsoid.cartesianToCartographic(position);
+  var longitude = Cesium.Math.toDegrees(cartographic.longitude);
+  var latitude = Cesium.Math.toDegrees(cartographic.latitude);
+  console.error('camera position:', longitude, latitude);
+  var position = viewer.camera.position;
+  var ellipsoid = viewer.scene.globe.ellipsoid;
+  var cartographic = ellipsoid.cartesianToCartographic(position);
+  var height = cartographic.height;
+  console.error('camera height:', height);
+};
+
+let geometry: any;
 const buttonGroup = document.getElementById('button-group') as HTMLElement;
 buttonGroup.onclick = (evt) => {
   const targetElement = evt.target as HTMLElement;
   switch (targetElement.id) {
     case 'drawFineArrow':
-      new CesiumPlot.FineArrow(Cesium, viewer, {
+      geometry = new CesiumPlot.FineArrow(Cesium, viewer, {
         fillColor: Cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.5)'),
       });
       break;
     case 'drawAttackArrow':
-      new CesiumPlot.AttackArrow(Cesium, viewer, {
+      geometry = new CesiumPlot.AttackArrow(Cesium, viewer, {
         outlineColor: Cesium.Color.RED,
       });
       break;
     case 'drawSwallowtailAttackArrow':
-      new CesiumPlot.SwallowtailAttackArrow(Cesium, viewer, {
+      geometry = new CesiumPlot.SwallowtailAttackArrow(Cesium, viewer, {
         outlineColor: Cesium.Color.BLUE,
       });
       break;
     case 'drawSquadCombat':
-      new CesiumPlot.SquadCombat(Cesium, viewer);
+      geometry = new CesiumPlot.SquadCombat(Cesium, viewer);
       break;
     case 'drawSwallowtailSquadCombat':
-      new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer);
+      geometry = new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer);
       break;
     case 'drawStraightArrow':
-      new CesiumPlot.StraightArrow(Cesium, viewer, {
+      geometry = new CesiumPlot.StraightArrow(Cesium, viewer, {
         lineColor: Cesium.Color.RED,
       });
       break;
     case 'drawAssaultDirection':
-      new CesiumPlot.AssaultDirection(Cesium, viewer);
+      geometry = new CesiumPlot.AssaultDirection(Cesium, viewer);
       break;
     case 'drawCurvedArrow':
-      new CesiumPlot.CurvedArrow(Cesium, viewer, {
+      geometry = new CesiumPlot.CurvedArrow(Cesium, viewer, {
         lineColor: Cesium.Color.BLUE,
       });
       break;
     case 'drawDoubleArrow':
-      new CesiumPlot.DoubleArrow(Cesium, viewer, {
+      geometry = new CesiumPlot.DoubleArrow(Cesium, viewer, {
         outlineColor: Cesium.Color.GREEN,
       });
       break;
     case 'drawFreehandLine':
-      new CesiumPlot.FreehandLine(Cesium, viewer);
+      geometry = new CesiumPlot.FreehandLine(Cesium, viewer);
       break;
     case 'drawFreehandPolygon':
-      new CesiumPlot.FreehandPolygon(Cesium, viewer);
+      geometry = new CesiumPlot.FreehandPolygon(Cesium, viewer);
+      break;
+    case 'hide':
+      geometry && geometry.hide();
+      // setTimeout(getCameraInfo, 2000);
+      break;
+    case 'show':
+      geometry && geometry.show();
+      break;
+    case 'remove':
+      geometry && geometry.remove();
+      geometry = null;
       break;
-
     default:
       break;
   }

index.html

@@ -50,6 +50,9 @@
       <button id="drawDoubleArrow" class="button">双箭头</button>
       <button id="drawFreehandLine" class="button">自由线</button>
       <button id="drawFreehandPolygon" class="button">自由面</button>
+      <button id="hide" class="button">隐藏</button>
+      <button id="show" class="button">显示</button>
+      <button id="remove" class="button">删除</button>
     </div>
     <script>
       window.CESIUM_BASE_URL = './examples/cesium';

src/arrow/curved-arrow.ts

@@ -52,8 +52,8 @@ export default class CurvedArrow extends Base {
 
   createStraightArrow(positions: Cartesian3[]) {
     const [pnt1, pnt2] = positions.map(this.cartesianToLnglat);
-    let len = 1.5;
+    const distance = Utils.MathDistance(pnt1, pnt2);
-
+    let len = distance / this.arrowLengthScale;
     len = len > this.maxArrowLength ? this.maxArrowLength : len;
     const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, false);
     const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, true);
@@ -83,10 +83,8 @@ export default class CurvedArrow extends Base {
     const pnt1 = lnglatPoints[lnglatPoints.length - 2];
     const pnt2 = lnglatPoints[lnglatPoints.length - 1];
 
-    // const distance = Utils.MathDistance(pnt1, pnt2);
+    const distance = Utils.wholeDistance(lnglatPoints);
-    // const distance = Utils.wholeDistance(lnglatPoints);
+    let len = distance / this.arrowLengthScale;
-    // let len = distance / this.arrowLengthScale;
-    let len = 1.5;
     len = len > this.maxArrowLength ? this.maxArrowLength : len;
     const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, false);
     const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len, true);

src/base.ts

@@ -124,7 +124,6 @@ export default class Base {
   }
 
   onDoubleClick() {
-    // this.eventHandler = new this.cesium.ScreenSpaceEventHandler(this.viewer.canvas);
     this.eventHandler.setInputAction((evt: any) => {
       this.finishDrawing();
     }, this.cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
@@ -169,7 +168,7 @@ export default class Base {
         polygon: new this.cesium.PolygonGraphics({
           hierarchy: new this.cesium.CallbackProperty(callback, false),
           show: true,
-          material: style.fillColor, // || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.2)'),
+          material: style.fillColor,
         }),
       });
 
@@ -179,8 +178,8 @@ export default class Base {
           positions: new this.cesium.CallbackProperty(() => {
             return [...this.geometryPoints, this.geometryPoints[0]];
           }, false),
-          width: style.outlineWidth, // || 2,
+          width: style.outlineWidth,
-          material: style.outlineColor, // || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
+          material: style.outlineColor,
           clampToGround: true,
         },
       });
@@ -210,8 +209,8 @@ export default class Base {
     const entity = this.viewer.entities.add({
       polyline: {
         positions: new this.cesium.CallbackProperty(() => this.geometryPoints, false),
-        width: style.lineWidth, // || 2,
+        width: style.lineWidth,
-        material: style.lineColor, // || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
+        material: style.lineColor,
         clampToGround: true,
       },
     });
@@ -306,11 +305,21 @@ export default class Base {
     }
   }
 
+  /**
+   * Uncertain whether it's a Cesium bug, but the lines do not render properly when 'clampToGround'
+   * is not set (display irregularities). After drawing, the camera adjusts its view based on the shape,
+   * which is not desired. Setting 'clampToGround' to true results in proper rendering and no change in
+   * the camera's perspective. However, when hiding this entity, the camera strangely moves towards the Earth's
+   * center at a precision-less position. Thus, when toggling the visibility state, adjust the 'clampToGround'
+   *  status first to avoid this issue.
+   */
   show() {
     if (this.type === 'polygon') {
       this.polygonEntity.show = true;
+      this.outlineEntity.polyline.clampToGround = true;
       this.outlineEntity.show = true;
     } else if (this.type === 'line') {
+      this.lineEntity.polyline.clampToGround = true;
       this.lineEntity.show = true;
     }
   }
@@ -318,12 +327,23 @@ export default class Base {
   hide() {
     if (this.type === 'polygon') {
       this.polygonEntity.show = false;
+      this.outlineEntity.polyline.clampToGround = false;
       this.outlineEntity.show = false;
     } else if (this.type === 'line') {
+      this.lineEntity.polyline.clampToGround = false;
       this.lineEntity.show = false;
     }
   }
 
+  remove() {
+    if (this.type === 'polygon') {
+      this.viewer.entities.remove(this.polygonEntity);
+      this.viewer.entities.remove(this.outlineEntity);
+    } else if (this.type === 'line') {
+      this.viewer.entities.remove(this.lineEntity);
+    }
+  }
+
   addPoint(cartesian: CesiumTypeOnly.Cartesian3) {
     //Abstract method that must be implemented by subclasses.
   }