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

6
const rootContainer: any = ref(null);
7
const viewer = ref<Viewer | null>(null)
8
const status = ref(null)
9
let lineDrawer: any = null
10
onMounted(() => {
11
  viewer.value = //你获取的viewer
12
  init()
13
});
14

15
const isBtn1Disabled = () => {
16
  return lineDrawer != null && status.value != DRAW_STATUS.STOPED
17
}
18

19
const isBtn2Disabled = () => {
20
  return status.value != DRAW_STATUS.DRAWABLE && status.value != DRAW_STATUS.DELETABLE
21
}
22

23
const isBtn3Disabled = () => {
24
  return status.value != DRAW_STATUS.DRAWABLE && status.value != DRAW_STATUS.EDITABLE
25
}
26

27
const isBtn4Disabled = () => {
28
  return status.value != DRAW_STATUS.DRAWABLE && status.value != DRAW_STATUS.EDITABLE && status.value != DRAW_STATUS.DELETABLE
29
}
30

31
onUnmounted(() => {
32
  if (viewer.value && !viewer.value.isDestroyed()) {
33
    viewer.value.destroy();
34
    viewer.value = null;
35
  }
36
});
37

38

39
let delCallbackFun = (): Promise<any> => {
40
  return new Promise((resolve) => {
41
    ElMessageBox.confirm(
42
      '确定删除该节点吗？',
43
      '',
44
      {
45
        confirmButtonText: '确定',
46
        cancelButtonText: '取消',
47
        type: 'warning',
48
      }
49
    ).then(() => {
50
      resolve(true)
51
    }).catch(() => {
52
      resolve(false)
53
    })
54
  })
55
}
56

57
const init = () => {
58
  let polylineObj: PolylineGraphics.ConstructorOptions = {
59
    positions: [new Cartesian3(), new Cartesian3()],
60
    width: 6,
61
    material: new PolylineGlowMaterialProperty({
62
      color: Color.BLUE,
63
      glowPower: 0.4,
64
      taperPower: 1
65
    }),
66
    clampToGround: true
67
  }
68

69
  let options: CP2dOptions = {
70
    polyline: polylineObj,
71
    delCallbackFun: delCallbackFun
72
  }
73
  lineDrawer = new CP2dDrawer(viewer.value as Viewer, options)
74
}
75

76
const start = () => {
77
  lineDrawer.start()
78
  status.value = lineDrawer.getStatus()
79
}
80

81
const drawLineEdit = () => {
82
  lineDrawer.setEditStatus()
83
  status.value = lineDrawer.getStatus()
84
}
85

86
const drawLineDelete = () => {
87
  lineDrawer.setDelStatus()
88
  status.value = lineDrawer.getStatus()
89
}
90

91
const drawLineRemove = () => {
92
  lineDrawer.clearAll()
93
  status.value = lineDrawer.getStatus()
94
  init()
95
}

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
 }