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

update style

Browse Source
This commit is contained in:
ethan 2023-08-23 14:51:36 +08:00
parent 81b09a958d
commit f944d2e68e
13 changed files with 100 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
examples/index.ts
View File

@ -55,10 +55,10 @@ buttonGroup.onclick = (evt) => {
});
break;
case 'drawSquadCombat':
new CesiumPlot.SquadCombat(Cesium, viewer, {});
new CesiumPlot.SquadCombat(Cesium, viewer);
break;
case 'drawSwallowtailSquadCombat':
new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer, {});
new CesiumPlot.SwallowtailSquadCombat(Cesium, viewer);
break;
case 'drawStraightArrow':
new CesiumPlot.StraightArrow(Cesium, viewer, {
@ -66,7 +66,7 @@ buttonGroup.onclick = (evt) => {
});
break;
case 'drawAssaultDirection':
new CesiumPlot.AssaultDirection(Cesium, viewer, {});
new CesiumPlot.AssaultDirection(Cesium, viewer);
break;
case 'drawCurvedArrow':
new CesiumPlot.CurvedArrow(Cesium, viewer, {
@ -79,10 +79,10 @@ buttonGroup.onclick = (evt) => {
});
break;
case 'drawFreehandLine':
new CesiumPlot.FreehandLine(Cesium, viewer, {});
new CesiumPlot.FreehandLine(Cesium, viewer);
break;
case 'drawFreehandPolygon':
new CesiumPlot.FreehandPolygon(Cesium, viewer, {});
new CesiumPlot.FreehandPolygon(Cesium, viewer);
break;
default:

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

@ -13,12 +13,10 @@ export default class AssaultDirection extends FineArrow {
headWidthFactor: number;
headAngle: number;
neckAngle: number;
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: PolygonStyle) {
constructor(cesium: any, viewer: any, style?: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.tailWidthFactor = 0.08;
this.neckWidthFactor = 0.1;
this.headWidthFactor = 0.13;

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

@ -11,12 +11,10 @@ export default class AttackArrow extends Base {
neckHeightFactor: number;
neckWidthFactor: number;
headTailFactor: number;
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: PolygonStyle) {
constructor(cesium: any, viewer: any, style?: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.headHeightFactor = 0.18;
this.headWidthFactor = 0.3;
this.neckHeightFactor = 0.85;
@ -26,6 +24,10 @@ export default class AttackArrow extends Base {
this.onDoubleClick();
}
getType(): 'polygon' | 'line' {
return 'polygon';
}
/**
* Add points only on click events
*/

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

@ -2,24 +2,26 @@ import * as Utils from '../utils';
import Base from '../base';
// @ts-ignore
import { Cartesian3 } from '@examples/cesium';
import { PolygonStyle } from '../interface';
import { LineStyle } from '../interface';
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: PolygonStyle) {
constructor(cesium: any, viewer: any, style?: LineStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'line';
this.t = 0.3;
this.setState('drawing');
this.onDoubleClick();
}
getType(): 'polygon' | 'line' {
return 'line';
}
/**
* Add points only on click events
*/

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

@ -11,16 +11,14 @@ export default class DoubleArrow extends Base {
maxArrowLength: number = 2;
neckWidthFactor: number;
headWidthFactor: number;
type: 'polygon' | 'line';
headHeightFactor: number;
neckHeightFactor: number;
connPoint: Position;
tempPoint4: Position;
constructor(cesium: any, viewer: any, style: PolygonStyle) {
constructor(cesium: any, viewer: any, style?: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.headHeightFactor = 0.25;
this.headWidthFactor = 0.3;
this.neckHeightFactor = 0.85;
@ -30,6 +28,10 @@ export default class DoubleArrow extends Base {
this.setState('drawing');
}
getType(): 'polygon' | 'line' {
return 'polygon';
}
/**
* Add points only on click events
*/

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

@ -13,12 +13,10 @@ export default class FineArrow extends Base {
headWidthFactor: number;
headAngle: number;
neckAngle: number;
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: PolygonStyle) {
constructor(cesium: any, viewer: any, style?: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.tailWidthFactor = 0.1;
this.neckWidthFactor = 0.2;
this.headWidthFactor = 0.25;
@ -27,6 +25,10 @@ export default class FineArrow extends Base {
this.setState('drawing');
}
getType(): 'polygon' | 'line' {
return 'polygon';
}
/**
* Add points only on click events
*/

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

@ -11,12 +11,10 @@ export default class SquadCombat extends AttackArrow {
neckHeightFactor: number;
neckWidthFactor: number;
tailWidthFactor: number;
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: PolygonStyle) {
constructor(cesium: any, viewer: any, style?: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.headHeightFactor = 0.18;
this.headWidthFactor = 0.3;
this.neckHeightFactor = 0.85;

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

@ -8,15 +8,17 @@ export default class StraightArrow extends Base {
points: Cartesian3[] = [];
arrowLengthScale: number = 5;
maxArrowLength: number = 3000000;
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: LineStyle) {
constructor(cesium: any, viewer: any, style?: LineStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'line';
this.setState('drawing');
}
getType(): 'polygon' | 'line' {
return 'line';
}
/**
* Add points only on click events
*/

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

@ -14,13 +14,10 @@ export default class SwallowtailAttackArrow extends AttackArrow {
tailWidthFactor: number;
swallowTailFactor: number;
swallowTailPnt: [number, number];
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.headHeightFactor = 0.18;
this.headWidthFactor = 0.3;
this.neckHeightFactor = 0.85;

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

@ -12,13 +12,11 @@ export default class SwallowtailSquadCombat extends SquadCombat {
neckWidthFactor: number;
tailWidthFactor: number;
swallowTailFactor: number;
type: 'polygon' | 'line';
constructor(cesium: any, viewer: any, style: PolygonStyle) {
constructor(cesium: any, viewer: any, style?: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.headHeightFactor = 0.18;
this.headWidthFactor = 0.3;
this.neckHeightFactor = 0.85;

63
src/base.ts
View File

@ -14,18 +14,40 @@ export default class Base {
lineEntity: CesiumTypeOnly.Entity;
type!: 'polygon' | 'line';
freehand!: boolean;
style: GeometryStyle;
style: GeometryStyle | undefined;
outlineEntity: CesiumTypeOnly.Entity;
constructor(cesium: CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer, style: GeometryStyle) {
constructor(cesium: CesiumTypeOnly, viewer: CesiumTypeOnly.Viewer, style?: GeometryStyle) {
this.cesium = cesium;
this.viewer = viewer;
this.style = style;
this.type = this.getType();
this.mergeStyle(style);
this.cartesianToLnglat = this.cartesianToLnglat.bind(this);
this.pixelToCartesian = this.pixelToCartesian.bind(this);
this.onClick();
}
mergeStyle(style: GeometryStyle | undefined) {
if (this.type === 'polygon') {
this.style = Object.assign(
{
fillColor: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.2)'),
outlineColor: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
outlineWidth: 2,
},
style,
);
} else if (this.type === 'line') {
this.style = Object.assign(
{
lineColor: this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
lineWidth: 2,
},
style,
);
}
}
/**
* The base class provides a method to change the state, and different logic is implemented based on the state.
* The state is controlled by individual sub-components according to the actual situation.
@ -147,9 +169,7 @@ export default class Base {
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)'),
material: style.fillColor, // || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 0.2)'),
}),
});
@ -159,8 +179,8 @@ export default class Base {
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)'),
width: style.outlineWidth, // || 2,
material: style.outlineColor, // || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
clampToGround: true,
},
});
@ -190,8 +210,8 @@ export default class Base {
const entity = this.viewer.entities.add({
polyline: {
positions: new this.cesium.CallbackProperty(() => this.geometryPoints, false),
width: style.lineWidth || 2,
material: style.lineColor || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
width: style.lineWidth, // || 2,
material: style.lineColor, // || this.cesium.Color.fromCssColorString('rgba(59, 178, 208, 1.0)'),
clampToGround: true,
},
});
@ -286,6 +306,24 @@ export default class Base {
}
}
show() {
if (this.type === 'polygon') {
this.polygonEntity.show = true;
this.outlineEntity.show = true;
} else if (this.type === 'line') {
this.lineEntity.show = true;
}
}
hide() {
if (this.type === 'polygon') {
this.polygonEntity.show = false;
this.outlineEntity.show = false;
} else if (this.type === 'line') {
this.lineEntity.show = false;
}
}
addPoint(cartesian: CesiumTypeOnly.Cartesian3) {
//Abstract method that must be implemented by subclasses.
}
@ -302,4 +340,9 @@ export default class Base {
updateDraggingPoint(cartesian: CesiumTypeOnly.Cartesian3, index: number) {
//Abstract method that must be implemented by subclasses.
}
getType(): 'polygon' | 'line' {
return 'polygon';
//Abstract method that must be implemented by subclasses.
}
}

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

@ -5,17 +5,19 @@ import { PolygonStyle } from '../interface';
export default class FreehandLine extends Base {
points: Cartesian3[] = [];
type: 'polygon' | 'line';
freehand: boolean;
constructor(cesium: any, viewer: any, style: PolygonStyle) {
constructor(cesium: any, viewer: any, style?: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'line';
this.freehand = true;
this.setState('drawing');
}
getType(): 'polygon' | 'line' {
return 'line';
}
/**
* Add points only on click events
*/

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

@ -5,17 +5,19 @@ import { PolygonStyle } from '../interface';
export default class FreehandPolygon extends Base {
points: Cartesian3[] = [];
type: 'polygon' | 'line';
freehand: boolean;
constructor(cesium: any, viewer: any, style: PolygonStyle) {
constructor(cesium: any, viewer: any, style?: PolygonStyle) {
super(cesium, viewer, style);
this.cesium = cesium;
this.type = 'polygon';
this.freehand = true;
this.setState('drawing');
}
getType(): 'polygon' | 'line' {
return 'polygon';
}
/**
* Add points only on click events
*/