1
import { onMounted, onUnmounted, ref } from "vue";
2
import { Cartesian3, Color, PolylineDashMaterialProperty, PolylineGlowMaterialProperty, PolylineGraphics, Viewer } from 'cesium';
3
import { CP2dDrawer, DRAW_STATUS, DRAWER_MODE, 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 polygonDrawer: 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 polygonDrawer != 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 isBtn3Disabled = () => {
34
  return status.value != DRAW_STATUS.DRAWABLE && status.value != DRAW_STATUS.EDITABLE
35
}
36

37
const isBtn4Disabled = () => {
38
  return status.value != DRAW_STATUS.DRAWABLE && status.value != DRAW_STATUS.EDITABLE && status.value != DRAW_STATUS.DELETABLE
39
}
40

41

42

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

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

73
  let dashlineObj: PolylineGraphics.ConstructorOptions = {
74
    positions: [new Cartesian3(), new Cartesian3()],
75
    width: 2,
76
    material: new PolylineDashMaterialProperty({
77
      color: Color.BLUE,
78
      gapColor: Color.WHITE,
79
    }),
80
    clampToGround: true
81
  }
82

83
  let polygonObj = {
84
    hierarchy: [new Cartesian3(), new Cartesian3(), new Cartesian3()],
85
    material: Color.BLUE.withAlpha(0.3),
86
    outline: false,
87
  }
88

89
  let options: CP2dOptions = {
90
    polyline: polylineObj,
91
    deshline: dashlineObj,
92
    polygon: polygonObj,
93
    drawerMode: DRAWER_MODE.POLYGON,
94
    delCallbackFun: delCallbackFun
95
  }
96
  polygonDrawer = new CP2dDrawer(viewer.value as Viewer, options)
97
}
98

99
const start = () => {
100
  polygonDrawer.start()
101
  status.value = polygonDrawer.getStatus()
102
}
103

104
const drawPolygonEdit = () => {
105
  polygonDrawer.setEditStatus()
106
  status.value = polygonDrawer.getStatus()
107
}
108

109
const drawPolygonDelete = () => {
110
  polygonDrawer.setDelStatus()
111
  status.value = polygonDrawer.getStatus()
112
}
113

114
const drawPolygonRemove = () => {
115
  polygonDrawer.clearAll()
116
  status.value = polygonDrawer.getStatus()
117
  init()
118
}

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
 }