页面添加（知识图谱，数据统计，数据分析，站点管理）

suerprisePlus

2024-07-30 e5e65bb50cbfb973f98191993ab559767eff7a53

 src/views/visual/mapView/location.vue

@@ -1,6 +1,21 @@
<template>
    <Popup ref="pop" top="20px" left="calc(100% - 600px)"    :title="title" @close="close(true)" width="300px" @cancel="close(false)">
        <el-tree></el-tree>
    <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>

@@ -12,6 +27,36 @@
    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: {
@@ -19,14 +64,42 @@
        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';
                    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>