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

Base Class Renaming and Default Style Adjustments

Browse Source
This commit is contained in:
ethan 2023-08-22 19:18:14 +08:00
parent 94900a9ae9
commit 8387b813be
13 changed files with 82 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import FineArrow from './fine-arrow';
import * as Utils from '../utils';
import { Cartesian3 } from '@examples/cesium';
import { PolygonStyle } from '../interface';
export default class AssaultDirection extends FineArrow {
points: Cartesian3[] = [];
@ -13,8 +14,8 @@ export default class AssaultDirection extends FineArrow {
neckAngle: number;
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: any) {
super(cesium, viewer, {});
constructor(cesium: any, viewer: any, style: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.tailWidthFactor = 0.08;

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

@ -1,8 +1,9 @@
import Draw from '../draw';
import Base from '../base';
import * as Utils from '../utils';
import { Cartesian3 } from '@examples/cesium';
import { PolygonStyle } from '../interface';
export default class AttackArrow extends Draw {
export default class AttackArrow extends Base {
points: Cartesian3[] = [];
headHeightFactor: number;
headWidthFactor: number;
@ -11,8 +12,8 @@ export default class AttackArrow extends Draw {
headTailFactor: number;
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: any) {
super(cesium, viewer);
constructor(cesium: any, viewer: any, style: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.headHeightFactor = 0.18;

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

@ -1,16 +1,17 @@
import * as Utils from '../utils';
import Draw from '../draw';
import Base from '../base';
import { Cartesian3 } from '@examples/cesium';
import { PolygonStyle } from '../interface';
export default class CurvedArrow extends Draw {
export default class CurvedArrow extends Base {
points: Cartesian3[] = [];
arrowLengthScale: number = 5;
maxArrowLength: number = 3000000;
type: 'polygon' | 'line';
t: number;
constructor(cesium: any, viewer: any, style: any) {
super(cesium, viewer);
constructor(cesium: any, viewer: any, style: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'line';
this.t = 0.3;

9
src/arrow/double-arrow.ts
View File

@ -1,9 +1,10 @@
import Draw from '../draw';
import Base from '../base';
import * as Utils from '../utils';
import { Cartesian3 } from '@examples/cesium';
import { PolygonStyle } from '../interface';
type Position = [number, number];
export default class DoubleArrow extends Draw {
export default class DoubleArrow extends Base {
points: Cartesian3[] = [];
arrowLengthScale: number = 5;
maxArrowLength: number = 2;
@ -15,8 +16,8 @@ export default class DoubleArrow extends Draw {
connPoint: Position;
tempPoint4: Position;
constructor(cesium: any, viewer: any, style: any) {
super(cesium, viewer);
constructor(cesium: any, viewer: any, style: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.headHeightFactor = 0.25;

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

@ -1,8 +1,9 @@
import Draw from '../draw';
import Base from '../base';
import * as Utils from '../utils';
import { Cartesian3 } from '@examples/cesium';
import { PolygonStyle } from '../interface';
export default class FineArrow extends Draw {
export default class FineArrow extends Base {
points: Cartesian3[] = [];
arrowLengthScale: number = 5;
maxArrowLength: number = 2;
@ -13,8 +14,8 @@ export default class FineArrow extends Draw {
neckAngle: number;
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: any) {
super(cesium, viewer);
constructor(cesium: any, viewer: any, style: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.tailWidthFactor = 0.1;

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

@ -1,6 +1,7 @@
import * as Utils from '../utils';
import AttackArrow from './attack-arrow';
import { Cartesian3 } from '@examples/cesium';
import { PolygonStyle } from '../interface';
export default class SquadCombat extends AttackArrow {
points: Cartesian3[] = [];
@ -11,8 +12,8 @@ export default class SquadCombat extends AttackArrow {
tailWidthFactor: number;
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: any) {
super(cesium, viewer, {});
constructor(cesium: any, viewer: any, style: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.headHeightFactor = 0.18;

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

@ -1,15 +1,16 @@
import * as Utils from '../utils';
import Draw from '../draw';
import Base from '../base';
import { Cartesian3 } from '@examples/cesium';
import { PolygonStyle } from '../interface';
export default class StraightArrow extends Draw {
export default class StraightArrow extends Base {
points: Cartesian3[] = [];
arrowLengthScale: number = 5;
maxArrowLength: number = 3000000;
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: any) {
super(cesium, viewer);
constructor(cesium: any, viewer: any, style: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'line';
this.setState('drawing');

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

@ -1,6 +1,7 @@
import * as Utils from '../utils';
import AttackArrow from './attack-arrow';
import { Cartesian3 } from '@examples/cesium';
import { PolygonStyle } from '../interface';
export default class SwallowtailAttackArrow extends AttackArrow {
points: Cartesian3[] = [];
@ -14,8 +15,8 @@ export default class SwallowtailAttackArrow extends AttackArrow {
swallowTailPnt: [number, number];
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: any) {
super(cesium, viewer, {});
constructor(cesium: any, viewer: any, style: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';

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

@ -1,6 +1,7 @@
import * as Utils from '../utils';
import SquadCombat from './squad-combat';
import { Cartesian3 } from '@examples/cesium';
import { PolygonStyle } from '../interface';
export default class SwallowtailSquadCombat extends SquadCombat {
points: Cartesian3[] = [];
@ -12,8 +13,8 @@ export default class SwallowtailSquadCombat extends SquadCombat {
swallowTailFactor: number;
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: any) {
super(cesium, viewer, {});
constructor(cesium: any, viewer: any, style: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';

26
src/draw.ts → src/base.ts
View File

@ -1,7 +1,7 @@
import * as CesiumTypeOnly from '@examples/cesium';
import { State } from './interface';
import { State, GeometryStyle, PolygonStyle, LineStyle } from './interface';
export default class Draw {
export default class Base {
cesium: typeof CesiumTypeOnly;
viewer: CesiumTypeOnly.Viewer;
eventHandler: CesiumTypeOnly.ScreenSpaceEventHandler;
@ -13,11 +13,13 @@ export default class Draw {
lineEntity: CesiumTypeOnly.Entity;
type!: 'polygon' | 'line';
freehand!: boolean;
style: GeometryStyle;
outlineEntity: CesiumTypeOnly.Entity;
constructor(cesium: typeof CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer) {
constructor(cesium: CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer, style: GeometryStyle) {
this.cesium = cesium;
this.viewer = viewer;
this.style = style;
this.cartesianToLnglat = this.cartesianToLnglat.bind(this);
this.pixelToCartesian = this.pixelToCartesian.bind(this);
this.onClick();
@ -139,14 +141,28 @@ export default class Draw {
return new this.cesium.PolygonHierarchy(this.geometryPoints);
};
if (!this.polygonEntity) {
const style = this.style as PolygonStyle;
this.polygonEntity = this.viewer.entities.add({
polygon: new this.cesium.PolygonGraphics({
hierarchy: new this.cesium.CallbackProperty(callback, false),
show: true,
// fill: true,
// material: this.cesium.Color.LIGHTSKYBLUE.withAlpha(0.8),
material: style.fillColor || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.2)'),
}),
});
// Due to limitations in PolygonGraphics outlining, a separate line style is drawn.
this.outlineEntity = this.viewer.entities.add({
polyline: {
positions: new this.cesium.CallbackProperty(() => {
return [...this.geometryPoints, this.geometryPoints[0]];
}, false),
width: style.outlineWidth || 2,
material: style.outlineColor || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
clampToGround: true,
},
});
}
}
@ -156,7 +172,7 @@ export default class Draw {
polyline: {
positions: new this.cesium.CallbackProperty(() => this.geometryPoints, false),
width: 2,
// material: this.cesium.Color.RED,
material: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
clampToGround: true,
},
});

14
src/interface.ts
View File

@ -1 +1,15 @@
import * as CesiumTypeOnly from '@examples/cesium';
export type PolygonStyle = {
fillColor?: CesiumTypeOnly.Color;
outlineWidth?: number;
outlineColor?: CesiumTypeOnly.Color;
};
export type LineStyle = {
color?: CesiumTypeOnly.Color;
lineWidth?: number;
};
export type State = 'drawing' | 'edit' | 'static';
export type GeometryStyle = PolygonStyle | LineStyle;

9
src/line/freehand-line.ts
View File

@ -1,13 +1,14 @@
import Draw from '../draw';
import Base from '../base';
import { Cartesian3 } from '@examples/cesium';
import { PolygonStyle } from '../interface';
export default class FreehandLine extends Draw {
export default class FreehandLine extends Base {
points: Cartesian3[] = [];
type: 'polygon' | 'line';
freehand: boolean;
constructor(cesium: any, viewer: any, style: any) {
super(cesium, viewer);
constructor(cesium: any, viewer: any, style: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'line';
this.freehand = true;

9
src/polygon/freehand-polygon.ts
View File

@ -1,13 +1,14 @@
import Draw from '../draw';
import Base from '../base';
import { Cartesian3 } from '@examples/cesium';
import { PolygonStyle } from '../interface';
export default class FreehandPolygon extends Draw {
export default class FreehandPolygon extends Base {
points: Cartesian3[] = [];
type: 'polygon' | 'line';
freehand: boolean;
constructor(cesium: any, viewer: any, style: any) {
super(cesium, viewer);
constructor(cesium: any, viewer: any, style: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.freehand = true;