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
106
107
108
109
| <template>
| <Popup ref="pop" top="20px" left="calc(100% - 600px)" :maxHeight="'700px'" :title="title" @close="close(true)" width="300px" @cancel="close(false)">
| <div>
| <el-form label-width="60px" ref="modelFrom" :model="modelFrom" :rules="rules" append-to-body :close-on-click-modal="false">
| <el-form-item label="经度" prop="lon">
| <el-input v-model="modelFrom.lon"></el-input>
| </el-form-item>
| <el-form-item label="纬度" prop="lat">
| <el-input v-model="modelFrom.lat"></el-input>
| </el-form-item>
| <el-form-item label="高度" prop="alt">
| <el-input v-model="modelFrom.alt"></el-input>
| </el-form-item>
| </el-form>
| <div slot="footer" style="float: right; margin-right: 10px; margin-bottom: 10px" class="dialog-footer">
| <el-button type="primary" @click="setSsubmitForm('modelFrom')">定 位</el-button>
| </div>
| </div>
| </Popup>
| </template>
|
| <script>
| import Popup from '@/components/Tool/Popup.vue';
| export default {
| name: 'location',
| components: { Popup },
| data() {
| return {
| title: '坐标定位',
| billboard: null,
|
| modelFrom: {
| lon: '',
| lat: '',
| alt: '',
| },
| rules: {
| lon: [
| {
| required: true,
| message: '经度不能为空',
| trigger: 'blur',
| },
| ],
| lat: [
| {
| required: true,
| message: '纬度不能为空',
| trigger: 'blur',
| },
| ],
| alt: [
| {
| required: true,
| message: '高度不能为空',
| trigger: 'blur',
| },
| ],
| },
| };
| },
| methods: {
| // 关闭弹窗
| close(isCloseBtn, removeLayer = true) {
| // removeLayer && this.removeImageLayer();
| // 重置data值
| this.setRemoveBillboard();
| Object.assign(this.$data, this.$options.data());
| !isCloseBtn && this.$refs.pop.close();
|
| },
| // 打开弹窗
| open() {
| this.close(true);
| this.$refs.pop.open();
| },
| setRemoveBillboard() {
| if (this.billboard) {
| Viewer.entities.remove(this.billboard);
| this.billboard = null;
| }
| },
| setSsubmitForm(formName) {
| this.$refs[formName].validate((valid) => {
| if (valid) {
| this.setRemoveBillboard();
|
| const url = config.sdkImg + 'Workers/image/mark.png';
| console.log(url);
| this.billboard = Viewer.entities.add({
| position: Cesium.Cartesian3.fromDegrees(this.modelFrom.lon, this.modelFrom.lat), // 设置实体在地球上的位置
| billboard: {
| image: url, // 设置你想显示的图片
| verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 设置图片在实体中的位置
| disableDepthTestDistance: Number.POSITIVE_INFINITY, // 禁用深度测试，确保不被地形遮挡
| },
| });
| earthCtrl.userScene.flyTo(this.billboard);
| } else {
| console.log('error submit!!');
| return false;
| }
| });
| },
| },
| };
| </script>
|
| <style></style>
|
|
