diff --git a/src/arrow/assault-direction.ts b/src/arrow/assault-direction.ts index 849b6e2..5785fd9 100644 --- a/src/arrow/assault-direction.ts +++ b/src/arrow/assault-direction.ts @@ -13,6 +13,7 @@ export default class AssaultDirection extends FineArrow { headWidthFactor: number; headAngle: number; neckAngle: number; + minPointsForShape: number; constructor(cesium: any, viewer: any, style?: PolygonStyle) { super(cesium, viewer, style); @@ -22,10 +23,11 @@ export default class AssaultDirection extends FineArrow { this.headWidthFactor = 0.13; this.headAngle = Math.PI / 4; this.neckAngle = Math.PI * 0.17741; + this.minPointsForShape = 2; this.setState('drawing'); } - createPolygon(positions: Cartesian3[]) { + createGraphic(positions: Cartesian3[]) { const [p1, p2] = positions.map(this.cartesianToLnglat); const len = Utils.getBaseLength([p1, p2]) * 1.5; const tailWidth = len * this.tailWidthFactor; diff --git a/src/arrow/attack-arrow.ts b/src/arrow/attack-arrow.ts index 7ca1b5a..4cfeff4 100644 --- a/src/arrow/attack-arrow.ts +++ b/src/arrow/attack-arrow.ts @@ -11,6 +11,7 @@ export default class AttackArrow extends Base { neckHeightFactor: number; neckWidthFactor: number; headTailFactor: number; + minPointsForShape: number; constructor(cesium: any, viewer: any, style?: PolygonStyle) { super(cesium, viewer, style); @@ -20,6 +21,7 @@ export default class AttackArrow extends Base { this.neckHeightFactor = 0.85; this.neckWidthFactor = 0.15; this.headTailFactor = 0.8; + this.minPointsForShape = 3; this.setState('drawing'); this.onDoubleClick(); } @@ -50,7 +52,7 @@ export default class AttackArrow extends Base { if (tempPoints.length === 2) { this.addFirstLineOfTheArrow(); } else { - const geometryPoints = this.createPolygon(tempPoints); + const geometryPoints = this.createGraphic(tempPoints); this.setGeometryPoints(geometryPoints); this.drawPolygon(); } @@ -59,7 +61,7 @@ export default class AttackArrow extends Base { /** * Generate geometric shapes based on key points. */ - createPolygon(positions: Cartesian3[]): Cartesian3[] { + createGraphic(positions: Cartesian3[]): Cartesian3[] { const lnglatPoints = positions.map((pnt) => { return this.cartesianToLnglat(pnt); }); @@ -143,7 +145,7 @@ export default class AttackArrow extends Base { */ updateDraggingPoint(cartesian: Cartesian3, index: number) { this.points[index] = cartesian; - const geometryPoints = this.createPolygon(this.points); + const geometryPoints = this.createGraphic(this.points); this.setGeometryPoints(geometryPoints); this.drawPolygon(); } diff --git a/src/arrow/curved-arrow.ts b/src/arrow/curved-arrow.ts index 7ca275d..2dd6182 100644 --- a/src/arrow/curved-arrow.ts +++ b/src/arrow/curved-arrow.ts @@ -31,7 +31,7 @@ export default class CurvedArrow extends Base { this.points.push(cartesian); if (this.points.length < 2) { this.onMouseMove(); - } + } } /** @@ -49,8 +49,8 @@ export default class CurvedArrow extends Base { 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); + const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 3, false); + const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 3, true); const points = [...pnt1, ...pnt2, ...leftPnt, ...pnt2, ...rightPnt]; const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points); return cartesianPoints; @@ -86,8 +86,8 @@ export default class CurvedArrow extends Base { const distance = Utils.wholeDistance(lnglatPoints); 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); + const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 3, false); + const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 3, true); const temp = [].concat(...curvePoints); const points = [...temp, ...leftPnt, ...pnt2, ...rightPnt]; const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points); diff --git a/src/arrow/fine-arrow.ts b/src/arrow/fine-arrow.ts index e2bd0c3..67540e1 100644 --- a/src/arrow/fine-arrow.ts +++ b/src/arrow/fine-arrow.ts @@ -13,6 +13,7 @@ export default class FineArrow extends Base { headWidthFactor: number; headAngle: number; neckAngle: number; + minPointsForShape: number; constructor(cesium: any, viewer: any, style?: PolygonStyle) { super(cesium, viewer, style); @@ -22,6 +23,7 @@ export default class FineArrow extends Base { this.headWidthFactor = 0.25; this.headAngle = Math.PI / 8.5; this.neckAngle = Math.PI / 13; + this.minPointsForShape = 2; this.setState('drawing'); } @@ -38,7 +40,7 @@ export default class FineArrow extends Base { this.onMouseMove(); } if (this.points.length === 2) { - const geometryPoints = this.createPolygon(this.points); + const geometryPoints = this.createGraphic(this.points); this.setGeometryPoints(geometryPoints); this.drawPolygon(); this.finishDrawing(); @@ -50,7 +52,7 @@ export default class FineArrow extends Base { */ updateMovingPoint(cartesian: Cartesian3) { const tempPoints = [...this.points, cartesian]; - const geometryPoints = this.createPolygon(tempPoints); + const geometryPoints = this.createGraphic(tempPoints); this.setGeometryPoints(geometryPoints); this.drawPolygon(); } @@ -60,7 +62,7 @@ export default class FineArrow extends Base { */ updateDraggingPoint(cartesian: Cartesian3, index: number) { this.points[index] = cartesian; - const geometryPoints = this.createPolygon(this.points); + const geometryPoints = this.createGraphic(this.points); this.setGeometryPoints(geometryPoints); this.drawPolygon(); } @@ -68,7 +70,7 @@ export default class FineArrow extends Base { /** * Generate geometric shapes based on key points. */ - createPolygon(positions: Cartesian3[]) { + createGraphic(positions: Cartesian3[]) { const [p1, p2] = positions.map(this.cartesianToLnglat); const len = Utils.getBaseLength([p1, p2]); const tailWidth = len * this.tailWidthFactor; diff --git a/src/arrow/squad-combat.ts b/src/arrow/squad-combat.ts index 05610a5..c04cee2 100644 --- a/src/arrow/squad-combat.ts +++ b/src/arrow/squad-combat.ts @@ -20,6 +20,7 @@ export default class SquadCombat extends AttackArrow { this.neckHeightFactor = 0.85; this.neckWidthFactor = 0.15; this.tailWidthFactor = 0.1; + this.minPointsForShape = 2; } /** @@ -43,7 +44,7 @@ export default class SquadCombat extends AttackArrow { if (tempPoints.length < 2) { return; } else { - const geometryPoints = this.createPolygon(tempPoints); + const geometryPoints = this.createGraphic(tempPoints); this.setGeometryPoints(geometryPoints); this.drawPolygon(); } @@ -52,7 +53,7 @@ export default class SquadCombat extends AttackArrow { /** * Generate geometric shapes based on key points. */ - createPolygon(positions: Cartesian3[]): Cartesian3[] { + createGraphic(positions: Cartesian3[]): Cartesian3[] { const lnglatPoints = positions.map((pnt) => { return this.cartesianToLnglat(pnt); }); diff --git a/src/arrow/straight-arrow.ts b/src/arrow/straight-arrow.ts index f3d9b2c..d014b49 100644 --- a/src/arrow/straight-arrow.ts +++ b/src/arrow/straight-arrow.ts @@ -8,10 +8,12 @@ export default class StraightArrow extends Base { points: Cartesian3[] = []; arrowLengthScale: number = 5; maxArrowLength: number = 3000000; + minPointsForShape: number; constructor(cesium: any, viewer: any, style?: LineStyle) { super(cesium, viewer, style); this.cesium = cesium; + this.minPointsForShape = 2; this.setState('drawing'); } @@ -28,7 +30,7 @@ export default class StraightArrow extends Base { this.onMouseMove(); } if (this.points.length === 2) { - const geometryPoints = this.createLine(this.points); + const geometryPoints = this.createGraphic(this.points); this.setGeometryPoints(geometryPoints); this.drawLine(); this.finishDrawing(); @@ -40,7 +42,7 @@ export default class StraightArrow extends Base { */ updateMovingPoint(cartesian: Cartesian3) { const tempPoints = [...this.points, cartesian]; - const geometryPoints = this.createLine(tempPoints); + const geometryPoints = this.createGraphic(tempPoints); this.setGeometryPoints(geometryPoints); this.drawLine(); } @@ -50,7 +52,7 @@ export default class StraightArrow extends Base { */ updateDraggingPoint(cartesian: Cartesian3, index: number) { this.points[index] = cartesian; - const geometryPoints = this.createLine(this.points); + const geometryPoints = this.createGraphic(this.points); this.setGeometryPoints(geometryPoints); this.drawLine(); } @@ -58,13 +60,13 @@ export default class StraightArrow extends Base { /** * Generate geometric shapes based on key points. */ - createLine(positions: Cartesian3[]) { + createGraphic(positions: Cartesian3[]) { const [pnt1, pnt2] = positions.map(this.cartesianToLnglat); 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); + const leftPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 3, false); + const rightPnt = Utils.getThirdPoint(pnt1, pnt2, Math.PI / 6, len / 3, true); const points = [...pnt1, ...pnt2, ...leftPnt, ...pnt2, ...rightPnt]; const cartesianPoints = this.cesium.Cartesian3.fromDegreesArray(points); return cartesianPoints; diff --git a/src/arrow/swallowtail-attack-arrow.ts b/src/arrow/swallowtail-attack-arrow.ts index bdbe034..39ed7ec 100644 --- a/src/arrow/swallowtail-attack-arrow.ts +++ b/src/arrow/swallowtail-attack-arrow.ts @@ -26,12 +26,13 @@ export default class SwallowtailAttackArrow extends AttackArrow { this.headTailFactor = 0.8; this.swallowTailFactor = 1; this.swallowTailPnt = [0, 0]; + this.minPointsForShape = 3; } /** * Generate geometric shapes based on key points. */ - createPolygon(positions: Cartesian3[]): Cartesian3[] { + createGraphic(positions: Cartesian3[]): Cartesian3[] { const lnglatPoints = positions.map((pnt) => { return this.cartesianToLnglat(pnt); }); diff --git a/src/arrow/swallowtail-squad-combat.ts b/src/arrow/swallowtail-squad-combat.ts index 890b75c..cb3fe89 100644 --- a/src/arrow/swallowtail-squad-combat.ts +++ b/src/arrow/swallowtail-squad-combat.ts @@ -23,12 +23,13 @@ export default class SwallowtailSquadCombat extends SquadCombat { this.neckWidthFactor = 0.15; this.tailWidthFactor = 0.1; this.swallowTailFactor = 1; + this.minPointsForShape = 2; } /** * Generate geometric shapes based on key points. */ - createPolygon(positions: Cartesian3[]): Cartesian3[] { + createGraphic(positions: Cartesian3[]): Cartesian3[] { const lnglatPoints = positions.map((pnt) => { return this.cartesianToLnglat(pnt); }); diff --git a/src/base.ts b/src/base.ts index 6827bd6..6e4e905 100644 --- a/src/base.ts +++ b/src/base.ts @@ -710,7 +710,7 @@ export default class Base { tempPoints[tempPoints.length - 1] = newPosition; const geometryPoints = this.createGraphic(tempPoints); this.setGeometryPoints(geometryPoints); - this.showAnimation(0, 0, undefined); + this.showWithAnimation(0, 0, undefined); }; this.viewer.clock.onTick.addEventListener(frameListener); }, delay); diff --git a/src/line/curve.ts b/src/line/curve.ts index c79e2c2..c093399 100644 --- a/src/line/curve.ts +++ b/src/line/curve.ts @@ -23,7 +23,7 @@ export default class Curve extends Base { } /** - * 仅点击事件会添加点 + * Points are only added upon click events. */ addPoint(cartesian: Cartesian3) { this.points.push(cartesian); @@ -36,7 +36,7 @@ export default class Curve extends Base { } /** - * 初次绘制时根据鼠标移动的点位绘制图形. + * Draw the shape based on the mouse movement position during the initial drawing. */ updateMovingPoint(cartesian: Cartesian3) { const tempPoints = [...this.points, cartesian]; @@ -45,25 +45,25 @@ export default class Curve extends Base { this.setGeometryPoints(tempPoints); this.drawLine(); } else { - geometryPoints = this.createLine(tempPoints); + geometryPoints = this.createGraphic(tempPoints); this.setGeometryPoints(geometryPoints); } } /** - * 编辑状态下,拖拽关键点位,更新对应关键点位数据 + * During editing mode, drag key points to update the corresponding data. */ updateDraggingPoint(cartesian: Cartesian3, index: number) { this.points[index] = cartesian; - const geometryPoints = this.createLine(this.points); + const geometryPoints = this.createGraphic(this.points); this.setGeometryPoints(geometryPoints); this.drawLine(); } /** - * 根据关键点生成几何图形点位. + * Generate geometric shape points based on key points.. */ - createLine(positions: Cartesian3[]) { + createGraphic(positions: Cartesian3[]) { const lnglatPoints = positions.map(pnt => { return this.cartesianToLnglat(pnt); });