1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
| <template>
| <el-dialog
| title="模型列表"
| :visible.sync="dialogVisible"
| @close="cancel"
| width="70%">
| <el-row :gutter="20">
| <el-col :span="showMap ? 12 : 24" :xs="24">
| <AppTable ref="AppTable" :showDeptSearch="false" :url="'device/towers/list'" :tableColumns="tableColumns" :showSearchBtn="false">
| <template #operator="{ row }">
| <el-button size="mini" type="text"
| @click="clickRow(row)">预览</el-button>
| <el-button size="mini" type="text"
| @click="chooseRow(row)">选择</el-button>
| </template>
| </AppTable>
| </el-col>
| <el-col :span="12" :xs="24" v-if="showMap">
| <CesiumMap ></CesiumMap>
| </el-col>
| </el-row>
| <span slot="footer" class="dialog-footer">
| <el-button @click="cancel">取 消</el-button>
| <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
| </span>
| </el-dialog>
| </template>
| <script>
| import CesiumMap from "../../../../utils/components/cesium-map.vue";
| export default {
| name:'chooseModelDialog',
| components: {
| CesiumMap
| },
| data() {
| return {
| dialogVisible: true,
| showMap:false,
| tableColumns: [
| {
| label: '模型名称',
| prop: 'name'
| },
| {
| label: '模型类型',
| prop: 'createBy'
| },
| {
| label: '模型路径',
| prop: 'createTime'
| },
| {
| label: '操作',
| type: 'slot',
| slotName: 'operator',
| width: '330px'
| },
| ],
| };
| },
| methods: {
| cancel(){
| this.showMap = false
| this.$emit('cancel')
| },
| chooseRow(row){
| this.showMap = false
| this.$emit('cancel')
| this.$emit('getRowData',row)
| },
| clickRow(row){
| this.showMap =true
| setTimeout(()=>{
| const position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
| // 设置模型方向（可选）
| // const heading = Cesium.Math.toRadians(135); // 朝东南方向
| let model = viewer.entities.getById("modelList");
| const heading = Cesium.Math.toRadians(120); // 朝东南方向
| const pitch = 0;
| const roll = 0;
| const orientation = Cesium.Transforms.headingPitchRollQuaternion(
| position,
| new Cesium.HeadingPitchRoll(heading, pitch, roll)
| );
| if(!model) {
| // 加载 glTF 模型
| const entity = viewer.entities.add({
| id: "modelList",
| name: "modelList",
| position: position,
| orientation: orientation,
| model: {
| uri: "/Model/tower.glb", // 替换成你的模型路径
| scale: 1000,
| },
| });
| viewer.flyTo(entity)
| }else {
| model.orientation = orientation
| }
| },1000)
| },
| }
| };
| </script>
|
|
