1
import { onMounted, onUnmounted, ref } from "vue";
2
import { Cartesian3, Color, PolylineGraphics, Viewer } from 'cesium';
3
import { DRAW_STATUS, RectDrawer, } from "cesium-pocket/drawer";
4
import { ElButton } from 'element-plus'
5

6
const rootContainer: any = ref(null);
7
const viewer = ref<Viewer | null>(null)
8
const status = ref(null)
9
let rectDrawer: any = null
10

11

12
onMounted(() => {
13
  viewer.value = //你获取的viewer
14
  init()
15
});
16

17
onUnmounted(() => {
18
  if (viewer.value && !viewer.value.isDestroyed()) {
19
    viewer.value.destroy();
20
    viewer.value = null;
21
  }
22
});
23

24

25
const isBtn1Disabled = () => {
26
  return rectDrawer != null && status.value != DRAW_STATUS.STOPED
27
}
28

29
const isBtn2Disabled = () => {
30
  return status.value != DRAW_STATUS.DRAWABLE && status.value != DRAW_STATUS.DELETABLE
31
}
32

33
const isBtn4Disabled = () => {
34
  return status.value != DRAW_STATUS.DRAWABLE && status.value != DRAW_STATUS.EDITABLE && status.value != DRAW_STATUS.DELETABLE
35
}
36

37

38
const init = () => {
39
  let polylineObj: PolylineGraphics.ConstructorOptions = {
40
    positions: [new Cartesian3(), new Cartesian3()],
41
    width: 2,
42
    material: Color.ORANGERED,
43
    clampToGround: true
44
  }
45

46
  let polygonObj = {
47
    hierarchy: [new Cartesian3(), new Cartesian3(), new Cartesian3()],
48
    material: Color.ORANGERED.withAlpha(0.5),
49
    outline: false,
50
  }
51

52
  let options = {
53
    polyline: polylineObj,
54
    polygon: polygonObj
55
  }
56
  rectDrawer = new RectDrawer(viewer.value as Viewer, options)
57
}
58

59
const start = () => {
60
  rectDrawer.start()
61
  status.value = rectDrawer.getStatus()
62
}
63

64
const drawPolygonEdit = () => {
65
  rectDrawer.setEditStatus()
66
  status.value = rectDrawer.getStatus()
67
}
68

69
const drawPolygonRemove = () => {
70
  rectDrawer.clearAll()
71
  status.value = rectDrawer.getStatus()
72
  init()
73
}

1
.root-container {
2
   position: relative;
3
   width: 100wh;
4
   height: 100vh;
5
   overflow: hidden;
6
 }
7

8
 .left-top-plugin {
9
   position: absolute;
10
   top: 20px;
11
   left: 10px;
12
   z-index: 10;
13
 }