cesium/cesium-plot-js
1
0
Fork 0
mirror of https://github.com/ethan-zf/cesium-plot-js.git synced 2025-06-23 19:17:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add growth animation

Browse Source
This commit is contained in:
ethan 2024-03-23 19:08:47 +08:00
parent b234fca7dd
commit 6d45edd800
10 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/arrow/assault-direction.ts
View File

@ -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;

8
src/arrow/attack-arrow.ts
View File

@ -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();
}

10
src/arrow/curved-arrow.ts
View File

@ -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);

10
src/arrow/fine-arrow.ts
View File

@ -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;

5
src/arrow/squad-combat.ts
View File

@ -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);
});

14
src/arrow/straight-arrow.ts
View File

@ -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;

3
src/arrow/swallowtail-attack-arrow.ts
View File

@ -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);
});

3
src/arrow/swallowtail-squad-combat.ts
View File

@ -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);
});

2
src/base.ts
View File

@ -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);

14
src/line/curve.ts
View File

@ -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);
});