1
import { onMounted, onUnmounted, ref, } from "vue";
2
import { Cartesian2, Cartesian3, Color, LabelStyle, VerticalOrigin, Viewer } from 'cesium';
3
import { DRAW_STATUS, PointDrawer, } from "cesium-pocket/drawer";
4
import { ElButton, ElMessageBox } from 'element-plus'
5
import type { PointOptions } from "cesium-pocket/src/drawer/PointDrawer.js";
6
import stickRedPng from '@/assets/images/stick_red.png'
7
const rootContainer: any = ref(null);
8
const viewer = ref<Viewer | null>(null)
9
const status = ref(null)
10
let pointDrawer: any = null
11
onMounted(() => {
12
  viewer.value = //你获取的viewer
13
  init()
14
});
15

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

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

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

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

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

39
const init = () => {
40
  let options: PointOptions = {
41
    billboardCallbackFun: billboardCallbackFun,
42
    delCallbackFun: delCallbackFun
43
  }
44
  pointDrawer = new PointDrawer(viewer.value as Viewer, options)
45
}
46

47
const billboardCallbackFun = (cartesian: Cartesian3) => {
48
  const entity = (viewer.value as Viewer).entities.add({
49
    // 设置经纬度位置 (经度, 纬度, 海拔高度)
50
    position: cartesian,
51
    label: {
52
      text: '标注',
53
      font: '500 14px Helvetica',
54
      style: LabelStyle.FILL,
55
      fillColor: Color.WHITE,
56
      pixelOffset: new Cartesian2(0, -120), //偏移量
57
      showBackground: true,
58
      backgroundColor: new Color(254, 0, 0, 0.7)
59
    },
60
    billboard: {
61
      image: stickRedPng,
62
      // 设置图片显示的宽度和高度 (像素)
63
      width: 30,
64
      height: 100,
65
      // 可选项：缩放倍数
66
      scale: 1.0,
67
      verticalOrigin: VerticalOrigin.BOTTOM,
68
    },
69
    properties: {
70
      entityType: 'LOCATION'
71
    },
72
    show: true
73
  });
74
  return entity
75
}
76

77
const delCallbackFun = (): Promise<any> => {
78
  return new Promise((resolve) => {
79
    ElMessageBox.confirm(
80
      '确定删除该节点吗？',
81
      '',
82
      {
83
        confirmButtonText: '确定',
84
        cancelButtonText: '取消',
85
        type: 'warning',
86
      }
87
    ).then(() => {
88
      resolve(true)
89
    }).catch(() => {
90
      resolve(false)
91
    })
92
  })
93
}
94

95
const start = () => {
96
  pointDrawer.start()
97
  status.value = pointDrawer.getStatus()
98
}
99

100
const drawPointEdit = () => {
101
  pointDrawer.setEditStatus()
102
  status.value = pointDrawer.getStatus()
103
}
104

105
const drawPointDelete = () => {
106
  pointDrawer.setDelStatus()
107
  status.value = pointDrawer.getStatus()
108
}
109

110
const drawPointRemove = () => {
111
  pointDrawer.clearAll()
112
  status.value = pointDrawer.getStatus()
113
  pointDrawer = null
114
  init()
115
}

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
 }