1
import { onMounted, onUnmounted, ref } from "vue";
2
import { Color, Viewer } from 'cesium';
3
import { CircleDrawer, DRAW_STATUS, type CircleOptions, } 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 polygonDrawer: any = null
10

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

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

23
const isBtn1Disabled = () => {
24
  return polygonDrawer != null && status.value != DRAW_STATUS.STOPED
25
}
26

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

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

35
const init = () => {
36
  let ellipseObj = {
37
    semiMinorAxis: 1.0,   // 短半轴（米）
38
    semiMajorAxis: 1.0,   // 长半轴（米）— 两者相等即为圆
39
    material: Color.GREEN.withAlpha(0.4), // 填充颜色，半透明
40
    height: 0,               // 椭圆所在高度（米），可选
41
    extrudedHeight: 0,       // 拉伸高度，>0 会形成圆柱体，设为0则为平面
42
    outline: true,           // 是否显示边框
43
    outlineColor: Color.GREEN
44
  }
45

46
  let options: CircleOptions = {
47
    ellipse: ellipseObj,
48
  }
49
  polygonDrawer = new CircleDrawer(viewer.value as Viewer, options)
50
}
51

52
const start = () => {
53
  polygonDrawer.start()
54
  status.value = polygonDrawer.getStatus()
55
}
56

57
const drawPolygonEdit = () => {
58
  polygonDrawer.setEditStatus()
59
  status.value = polygonDrawer.getStatus()
60
}
61

62
const drawPolygonRemove = () => {
63
  polygonDrawer.clearAll()
64
  status.value = polygonDrawer.getStatus()
65
  init()
66
}

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
 }