1
import { onMounted, onUnmounted, ref, } from "vue";
2
import { PocketViewer } from '@/util/PocketViewer'
3
import { Viewer } from 'cesium';
4
import { RectGaguger, type RectGaugerOptions, } from "cesium-pocket/gauger";
5
import { ElButton, ElMessageBox } from 'element-plus'
6

7
const rootContainer: any = ref(null);
8
const viewer = ref<Viewer | null>(null)
9
const status = ref(null)
10
const started = ref(false)
11
const edited = ref(false)
12
const deleted = ref(false)
13
let rectGauger: any = null
14

15
onMounted(() => {
16
  let mfCesium = new PocketViewer(rootContainer.value, {})
17
  viewer.value = mfCesium.getViewer()
18
  init()
19
});
20

21

22

23
onUnmounted(() => {
24
  if (viewer.value && !viewer.value.isDestroyed()) {
25
    viewer.value.destroy();
26
    viewer.value = null;
27
  }
28
});
29

30

31

32
let delConfirmFun = (): Promise<any> => {
33
  return new Promise((resolve) => {
34
    ElMessageBox.confirm(
35
      '确定删除该节点吗？',
36
      '',
37
      {
38
        confirmButtonText: '确定',
39
        cancelButtonText: '取消',
40
        type: 'warning',
41
      }
42
    ).then(() => {
43
      resolve(true)
44
    }).catch(() => {
45
      resolve(false)
46
    })
47
  })
48
}
49

50
const init = () => {
51
  let options: RectGaugerOptions = {
52
    delConfirmFun: delConfirmFun
53
  }
54
  rectGauger = new RectGaguger(viewer.value as Viewer, options)
55
}
56

57
const start = () => {
58
  rectGauger.start()
59
  started.value = true
60
}
61

62
const drawRectEdit = () => {
63
  rectGauger.setEditStatus()
64
  edited.value = true
65
  deleted.value = false
66
}
67

68

69
const drawRectRemove = () => {
70
  rectGauger.clearAll()
71
  status.value = rectGauger.getStatus()
72
  started.value = false
73
  edited.value = false
74
  deleted.value = false
75
  init()
76
}

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
 }