1
import { onMounted, onUnmounted, ref, } from "vue";
2
import { PocketViewer } from '@/util/PocketViewer'
3
import { Viewer } from 'cesium';
4
import { LineGaguger, type LineGaugerOptions } 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 lineGauger: 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: LineGaugerOptions = {
52
    delConfirmFun: delConfirmFun
53
  }
54
  lineGauger = new LineGaguger(viewer.value as Viewer, options)
55
}
56

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

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

68
const drawLineDelete = () => {
69
  lineGauger.setDelStatus()
70
  deleted.value = true
71
  edited.value = false
72
}
73

74
const drawLineRemove = () => {
75
  lineGauger.clearAll()
76
  status.value = lineGauger.getStatus()
77
  started.value = false
78
  edited.value = false
79
  deleted.value = false
80
  init()
81
}

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
 }