From 6fea1e764ff6cedb5e9958033f34a369a6f3be20 Mon Sep 17 00:00:00 2001 From: liqikun Date: Wed, 29 May 2024 20:13:32 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9ETag=E7=B1=BB=E3=80=90?= =?UTF-8?q?=E6=A0=87=E7=AD=BE=E5=8A=9F=E8=83=BD=E3=80=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/arrow/attack-arrow.ts | 4 +- src/arrow/curved-arrow.ts | 4 +- src/arrow/double-arrow.ts | 4 +- src/arrow/fine-arrow.ts | 4 +- src/arrow/straight-arrow.ts | 4 +- src/assets/tag_active.png | Bin 0 -> 1437 bytes src/assets/tag_default.png | Bin 0 -> 1464 bytes src/base.ts | 39 +++++++++++++-- src/index.ts | 6 ++- src/interface.ts | 11 ++++- src/line/curve.ts | 4 +- src/line/freehand-line.ts | 4 +- src/polygon/circle.ts | 4 +- src/polygon/ellipse.ts | 4 +- src/polygon/freehand-polygon.ts | 4 +- src/polygon/lune.ts | 4 +- src/polygon/polygon.ts | 4 +- src/polygon/rectangle.ts | 4 +- src/polygon/sector.ts | 4 +- src/polygon/triangle.ts | 4 +- src/tag/tag.ts | 85 ++++++++++++++++++++++++++++++++ 21 files changed, 165 insertions(+), 36 deletions(-) create mode 100644 src/assets/tag_active.png create mode 100644 src/assets/tag_default.png create mode 100644 src/tag/tag.ts diff --git a/src/arrow/attack-arrow.ts b/src/arrow/attack-arrow.ts index 0126e94..711256e 100644 --- a/src/arrow/attack-arrow.ts +++ b/src/arrow/attack-arrow.ts @@ -2,7 +2,7 @@ import Base from '../base'; import * as Utils from '../utils'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { PolygonStyle } from '../interface'; +import { PolygonStyle, Shape } from '../interface'; export default class AttackArrow extends Base { points: Cartesian3[] = []; @@ -26,7 +26,7 @@ export default class AttackArrow extends Base { this.onDoubleClick(); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'polygon'; } diff --git a/src/arrow/curved-arrow.ts b/src/arrow/curved-arrow.ts index f8e4fa4..46702a4 100644 --- a/src/arrow/curved-arrow.ts +++ b/src/arrow/curved-arrow.ts @@ -2,7 +2,7 @@ import * as Utils from '../utils'; import Base from '../base'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { LineStyle } from '../interface'; +import { LineStyle, Shape } from '../interface'; export default class CurvedArrow extends Base { points: Cartesian3[] = []; @@ -20,7 +20,7 @@ export default class CurvedArrow extends Base { this.onDoubleClick(); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'line'; } diff --git a/src/arrow/double-arrow.ts b/src/arrow/double-arrow.ts index 38ed574..97688e3 100644 --- a/src/arrow/double-arrow.ts +++ b/src/arrow/double-arrow.ts @@ -2,7 +2,7 @@ import Base from '../base'; import * as Utils from '../utils'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { PolygonStyle } from '../interface'; +import { PolygonStyle, Shape } from '../interface'; type Position = [number, number]; export default class DoubleArrow extends Base { @@ -35,7 +35,7 @@ export default class DoubleArrow extends Base { this.setState('drawing'); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'polygon'; } diff --git a/src/arrow/fine-arrow.ts b/src/arrow/fine-arrow.ts index 67540e1..96fa00e 100644 --- a/src/arrow/fine-arrow.ts +++ b/src/arrow/fine-arrow.ts @@ -2,7 +2,7 @@ import Base from '../base'; import * as Utils from '../utils'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { PolygonStyle } from '../interface'; +import { PolygonStyle, Shape } from '../interface'; export default class FineArrow extends Base { points: Cartesian3[] = []; @@ -27,7 +27,7 @@ export default class FineArrow extends Base { this.setState('drawing'); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'polygon'; } diff --git a/src/arrow/straight-arrow.ts b/src/arrow/straight-arrow.ts index 3c3bce4..5f94476 100644 --- a/src/arrow/straight-arrow.ts +++ b/src/arrow/straight-arrow.ts @@ -2,7 +2,7 @@ import * as Utils from '../utils'; import Base from '../base'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { LineStyle } from '../interface'; +import { LineStyle, Shape } from '../interface'; export default class StraightArrow extends Base { points: Cartesian3[] = []; @@ -17,7 +17,7 @@ export default class StraightArrow extends Base { this.setState('drawing'); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'line'; } diff --git a/src/assets/tag_active.png b/src/assets/tag_active.png new file mode 100644 index 0000000000000000000000000000000000000000..9eeb1fa1656962e8f27584a92b1e0499ab4a1aa1 GIT binary patch literal 1437 zcmV;O1!DS%P)Px)S4l)cRCr$PU2S&SFc6ezuThemqU28@CuulIl9QC2q^5sDP7#M*qo7vCO8xx6 zA9!Z9;yHhs7i?MH@yzV5WNOX$qbdSc)ojMem=O?V55Wk?2#B%>D4Wj6kP(n!5m>zZ zUKr!9{V4m1yRyy}zZ+xxzqzw6pX}|sF*ZN^`A?qR-ju%&ySBvHNibybvb}fK%>M=a z{>-3c)|qExcA0i?)B;k1@ZA`*I1_|Zr)AE%Y_i`!YXnCfAm3i!AFQ*FU=WTDXPsGU zV~rX>N=7`CULb)-xJGWBdC~$*bU?gGJL^0UXld#TYG&PT8C%Ap0#btUvv1^>$9oye zZl^2eHJZkb28g6r^bM}F?(x^xtEax_A&!p%$b7T)tcWd9ZSh-Kw|kP7FmXT<0V9AV z?kl2zBnCzSinM%*0ixM6+O$g&6cIo)W>ak-)IYb*-etF6vcBi_J)RE8;^pny*-vkM zC#Lau>vlJ6lcxicqHi=j46F5Qx@0~qR6s6?9RUP3OQ?Wc7&|^v;q`2K$6^T$kV`P~ zQ$c68S7?CDH(PJyVKtBSK*bt2w{CaGFn9_eLf*0Zzg)X3)6vh@`^kQ8o%L-Q|1i)V z2v!o9&MQ%f4;w>pYLPfvTTV0GV&LuFoVo9-CWdmwk(~(#t$BXtw0* z+4QF4+&doz2ZSV7gKwVUX^a#Y4hTc85PHpE3Zusb2LxSvAa9!Ruw>|(gaHWBKL$%x zUA)oKwVq9(F@z3=_75aG0x;$77H{&9AGD9C1_a?9^{Ase2+9E|w)DVuk)Y)ufP+lS z(GLxnA;lhClpMhQqXG!5t%L4sK>-10G4Kqg0tjr^i)uj7hM9t7p%V`%L(qVr4bw9O zoe3&u2-eimH+ujCJxA>32Pi}Q4I>LLv>f>Pfql-PWmPpGK7dHsLd%tZg$~{EWdMR+ zgMejQn)_@YnavDQevUNmWi`^!N*PQKp`7V3dal%mJ zFeW^^qM3Ram|>#K2=^Hqkz|~@9>vrdEs8z?V;_sGjp}oy0aD5q%iP&9ZyFy~7ah9@ z6%bOo850aj?NPlUDjWVYu0$3u#4l#!K3#H5w3GWay^(q~atBHbcF2)W~h8(JQ?0U8YD2z3arg_urkov_F zV~Hp`#2JzrOPD>YQ!Ei@NGd%psWi6^OcX%M-5-8CC;GiVn603<_jH|D6hO46!Lis8 z#X}NEgT;+JN~L~`vKos;=`>e`htyaCdo`e|PB$D!U3}^?zi1v3Ca1~ZW2Cw27^21C zV;Z>{4^d?BQH@+BATj$~v5j0MAQ7dDvL&>Ofgd|2x~WHQKB|$b5C?UDNY*Bj3r}4c zqYjX=`6yAFM6WrLkgP+CzWDNGX7f>D$FfpcdX{kAqVMv%LX?0PhRHx>QS5Qh)%mF11;e%5HC$qG^b9Y3fzA-K%;Jsda?U zc_S+csY*(+2DIsuk*Z_?>C>i9Nve_sq-&c#g%mfrO1;SdTdMfvq$+8Kv{muitMQ~O z^`^-m`GWnk{!5FtR8;cwq|)9~f$_k!eHo2pP={RWA^;f@0Bz@vfG9&`1Y`t6Sp<|# rXJp6-h_VPMo6g9P5fEh&P&S>vNaX*6(b8Mg00000NkvXXu0mjf@%fUK literal 0 HcmV?d00001 diff --git a/src/assets/tag_default.png b/src/assets/tag_default.png new file mode 100644 index 0000000000000000000000000000000000000000..e1ffa0b41a53d49560868d6445bbcc2ed2ddffbb GIT binary patch literal 1464 zcmV;p1xNacP)Px)a!Eu%RCr$PT~Sh_KoFfFYV9FbH-4$7P*1XY67?kNNz5(OuZ?jJv85Kh4go8s zLV)mIPfv<`rAh)#Ki+%Y&4AtwA5$6drlJ{waRVU6E`kA&0T5#uFc!|hkO7c>8F>7; zbLPAshrMLp|8mY1-$i8Xy`MVgrn$(A6A9m)+u50(O#jWlC-6yvA&>jJ7n%2`;@rhX zITe|RbN6mEnpg+NEFb{{@7!AD7LgjTdd%I*_EL1?Yi5(RPY?e>~*(P=@mcqxc z@8>L*&;Z#6Bd?#}^TsPQK%Nfvf{_<@^S1Cal`K1F7(4|K4etmB`*pi^G@6&AA0Oi^ z%T7h4y3I?wAXsHE1rTNv*rn2WKG?h6__lA0Sr?5B`}-o?mut&Pp%4 zCCKOWc=mRPK1(lofsJ+0%Z8wUK&u!+1@i?6aMg=xK+uMnf@Gl!4=6*>fS?UC zFa%u*+GYsY)X^tf0D_JYy!ZjikZ{7t#tSV6AwHny^L;x*Q3(`VaGzXWgqO`=0P?jlN+{$fw{+#{HVjsq?(Jr1VoC}CdFgU zA}{5$?BOwL+G>+B7I<|-DZ146d83#rZI$2^KX_t!mp6M(Q1>NCkvcZnjGtX)8wWu^1{95H)irC4a?kX=YA0_38lR5?Bw4`75C4 zFBPCOWQ$lrX9ulQU%qU&p#)}@x~d*h9gH#GQq(IIcBnC=EP>VDgM|i4!#mVWeK9$S zvP6v?stgGSOR+Cu_Z_O8`YP#2j3uhU>V64_Q$Lo1bxMmATO+t6<6e z{U_noe(d`e8y8&Yqf=(8VVwRY^0Xsf)MXjVIlyuM2*~3-&kqmljQ>sOI03Dtqe^6M$)Y z8I5LA`y6X40O^weYrh=;F^0$h$N-433>XV%V8{T7u?!dsXJE(xh_MV93+F#Iodc4} S65u=l0000 void; @@ -29,3 +36,5 @@ export type GrowthAnimationOpts = { delay: number; callback: Function; }; + +export type Shape = 'polygon' | 'line' | 'tag'; \ No newline at end of file diff --git a/src/line/curve.ts b/src/line/curve.ts index c093399..17ab317 100644 --- a/src/line/curve.ts +++ b/src/line/curve.ts @@ -2,7 +2,7 @@ import * as Utils from '../utils'; import Base from '../base'; // @ts-ignore import { Cartesian3 } from 'kmap-3d-engine'; -import { LineStyle } from '../interface'; +import { LineStyle, Shape } from '../interface'; export default class Curve extends Base { points: Cartesian3[] = []; @@ -18,7 +18,7 @@ export default class Curve extends Base { this.onDoubleClick(); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'line'; } diff --git a/src/line/freehand-line.ts b/src/line/freehand-line.ts index 775ee3d..45f30d9 100644 --- a/src/line/freehand-line.ts +++ b/src/line/freehand-line.ts @@ -1,7 +1,7 @@ import Base from '../base'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { PolygonStyle } from '../interface'; +import { PolygonStyle, Shape } from '../interface'; export default class FreehandLine extends Base { points: Cartesian3[] = []; @@ -14,7 +14,7 @@ export default class FreehandLine extends Base { this.setState('drawing'); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'line'; } diff --git a/src/polygon/circle.ts b/src/polygon/circle.ts index 6cd438e..eda10bf 100644 --- a/src/polygon/circle.ts +++ b/src/polygon/circle.ts @@ -3,7 +3,7 @@ import * as Utils from '../utils'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { PolygonStyle } from '../interface'; +import { PolygonStyle, Shape } from '../interface'; export default class Circle extends Base { points: Cartesian3[] = []; @@ -16,7 +16,7 @@ export default class Circle extends Base { this.setState('drawing'); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'polygon'; } diff --git a/src/polygon/ellipse.ts b/src/polygon/ellipse.ts index 432a0c8..fdd15ee 100644 --- a/src/polygon/ellipse.ts +++ b/src/polygon/ellipse.ts @@ -3,7 +3,7 @@ import * as Utils from '../utils'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { PolygonStyle } from '../interface'; +import { PolygonStyle, Shape } from '../interface'; export default class Ellipse extends Base { points: Cartesian3[] = []; @@ -16,7 +16,7 @@ export default class Ellipse extends Base { this.setState('drawing'); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'polygon'; } diff --git a/src/polygon/freehand-polygon.ts b/src/polygon/freehand-polygon.ts index a947c5d..36389ee 100644 --- a/src/polygon/freehand-polygon.ts +++ b/src/polygon/freehand-polygon.ts @@ -1,7 +1,7 @@ import Base from '../base'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { PolygonStyle } from '../interface'; +import { PolygonStyle, Shape } from '../interface'; export default class FreehandPolygon extends Base { points: Cartesian3[] = []; @@ -14,7 +14,7 @@ export default class FreehandPolygon extends Base { this.setState('drawing'); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'polygon'; } diff --git a/src/polygon/lune.ts b/src/polygon/lune.ts index aba5689..fc7cc9d 100644 --- a/src/polygon/lune.ts +++ b/src/polygon/lune.ts @@ -2,7 +2,7 @@ import Base from '../base'; import * as Utils from '../utils'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { PolygonStyle } from '../interface'; +import { PolygonStyle, Shape } from '../interface'; export default class Lune extends Base { points: Cartesian3[] = []; @@ -15,7 +15,7 @@ export default class Lune extends Base { this.setState('drawing'); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'polygon'; } diff --git a/src/polygon/polygon.ts b/src/polygon/polygon.ts index 57c76a4..e4b18a1 100644 --- a/src/polygon/polygon.ts +++ b/src/polygon/polygon.ts @@ -2,7 +2,7 @@ import Base from '../base'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { PolygonStyle } from '../interface'; +import { PolygonStyle, Shape } from '../interface'; export default class Polygon extends Base { points: Cartesian3[] = []; @@ -14,7 +14,7 @@ export default class Polygon extends Base { this.onDoubleClick(); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'polygon'; } diff --git a/src/polygon/rectangle.ts b/src/polygon/rectangle.ts index 21c68a3..5d1172f 100644 --- a/src/polygon/rectangle.ts +++ b/src/polygon/rectangle.ts @@ -2,7 +2,7 @@ import Base from '../base'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { PolygonStyle } from '../interface'; +import { PolygonStyle, Shape } from '../interface'; export default class Rectangle extends Base { points: Cartesian3[] = []; @@ -13,7 +13,7 @@ export default class Rectangle extends Base { this.setState('drawing'); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'polygon'; } diff --git a/src/polygon/sector.ts b/src/polygon/sector.ts index f169c9d..7176f83 100644 --- a/src/polygon/sector.ts +++ b/src/polygon/sector.ts @@ -2,7 +2,7 @@ import Base from '../base'; // @ts-ignore import { Cartesian3 } from 'cesium'; import * as Utils from '../utils'; -import { PolygonStyle } from '../interface'; +import { PolygonStyle, Shape } from '../interface'; export default class Sector extends Base { points: Cartesian3[] = []; @@ -13,7 +13,7 @@ export default class Sector extends Base { this.setState('drawing'); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'polygon'; } diff --git a/src/polygon/triangle.ts b/src/polygon/triangle.ts index b886e96..8c752f2 100644 --- a/src/polygon/triangle.ts +++ b/src/polygon/triangle.ts @@ -2,7 +2,7 @@ import Base from '../base'; // @ts-ignore import { Cartesian3 } from 'cesium'; -import { PolygonStyle } from '../interface'; +import { PolygonStyle, Shape } from '../interface'; export default class Triangle extends Base { points: Cartesian3[] = []; @@ -13,7 +13,7 @@ export default class Triangle extends Base { this.setState('drawing'); } - getType(): 'polygon' | 'line' { + getType(): Shape { return 'polygon'; } diff --git a/src/tag/tag.ts b/src/tag/tag.ts new file mode 100644 index 0000000..8b7cb1e --- /dev/null +++ b/src/tag/tag.ts @@ -0,0 +1,85 @@ +import Base from '../base'; +import { Shape, TagStyle } from '../interface'; +import { Cartesian3 } from 'cesium'; + +export default class Tag extends Base { + points: Cartesian3[] = []; + + constructor(cesium: any, viewer: any, style?: TagStyle) { + super(cesium, viewer, style); + this.cesium = cesium; + this.setState('drawing'); + this.onMouseMove(); + } + getType(): Shape { + return 'tag'; + } + /** + * Draw a shape based on mouse movement points during the initial drawing. + */ + updateMovingPoint(cartesian: Cartesian3) { + this.setGeometryPoints([cartesian]); + this.drawTag(); + } + + onClick() { + this.eventHandler = new this.cesium.ScreenSpaceEventHandler(this.viewer.canvas); + this.eventHandler.setInputAction((evt: any) => { + const pickedObject = this.viewer.scene.pick(evt.position); + const hitEntities = this.cesium.defined(pickedObject) && pickedObject.id instanceof this.cesium.Entity; + const activeEntity = this.tagEntity; + if (this.state === 'drawing') { + this.finishDrawing(); + } else if (this.state === 'edit') { + if (!hitEntities || activeEntity.id !== pickedObject.id.id) { + this.tagEntity.billboard.image = this.style.image; + this.setState('static'); + this.removeControlPoints(); + this.disableDrag(); + this.eventDispatcher.dispatchEvent('editEnd', this.getPoints()); + } + } else if (this.state === 'static') { + if (hitEntities && activeEntity.id === pickedObject.id.id) { + this.tagEntity.billboard.image = this.style.activeImage; + this.setState('edit'); + this.draggable(); + this.eventDispatcher.dispatchEvent('editStart'); + } + } + }, this.cesium.ScreenSpaceEventType.LEFT_CLICK); + } + + draggable() { + let dragging = false; + this.dragEventHandler = new this.cesium.ScreenSpaceEventHandler(this.viewer.canvas); + this.dragEventHandler.setInputAction((event: any) => { + const pickRay = this.viewer.scene.camera.getPickRay(event.position); + if (pickRay) { + const pickedObject = this.viewer.scene.pick(event.position); + if (this.cesium.defined(pickedObject) && pickedObject.id instanceof this.cesium.Entity) { + const clickedEntity = pickedObject.id; + if (this.isCurrentEntity(clickedEntity.id)) { + dragging = true; + this.viewer.scene.screenSpaceCameraController.enableRotate = false; + } + } + } + }, this.cesium.ScreenSpaceEventType.LEFT_DOWN); + this.dragEventHandler.setInputAction((event: any) => { + if (dragging) { + console.log(666, event); + const cartesian = this.pixelToCartesian(event.endPosition); + console.log(cartesian, this.state); + this.tagEntity.position = cartesian; + } + }, this.cesium.ScreenSpaceEventType.MOUSE_MOVE); + this.dragEventHandler.setInputAction(() => { + dragging = false; + this.viewer.scene.screenSpaceCameraController.enableRotate = true; + }, this.cesium.ScreenSpaceEventType.LEFT_UP); + } + /** + * tag not need to add control points + */ + addControlPoints() { } +} \ No newline at end of file