real3d-portalsite/src/views/viewer1.vue

<template>
    <div v-show="flag">
        <datePicker @dateChange="dateChange"></datePicker>
        <ser-center></ser-center>
        <JSYD />
        <TDSC />
        <HYSY ref="hysy_ref" />
        <TDSY />
        <GDBH ref="gdbh_ref"/>
        <STXF ref="stxf_ref"/>
        <WPJG ref="wpjg_ref"/>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import serCenter from './cockpitNew1/serCenter';
import JSYD from './cockpitNew1/jsyd';
import TDSC from './cockpitNew1/tdsc';
import HYSY from './cockpitNew1/hysy';
import TDSY from './cockpitNew1/tdsy';
import GDBH from './cockpitNew1/gdbh';
import STXF from './cockpitNew1/stxf';
import WPJG from './cockpitNew1/wpjg';
import datePicker from './cockpitNew1/datePicker.vue';
import xzqh from "../../static/data/460200_full.json";
import SerCenter from './cockpitNew1/serCenter.vue';

import { cockpitInfo } from '@/api/cockpit'

export default {
    components: { serCenter, JSYD, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, SerCenter },
    data() {
        return {
            flag: true,
            xzqh_color_click: "rgba(46, 177, 251, 0.6)",
            xzqh_color: "rgba(10, 95, 152, 0.5)",
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        switch() {
            console.log("switch", "asdasd");

            this.flag = !this.flag;

        },
        dateChange(date) {
            let params = { beginTime: date[0], endTime: date[1] };
            this.$refs.gdbh_ref.setData(params);
            this.$refs.stxf_ref.setData(params);
            this.$refs.wpjg_ref.setData(params);

        },
        async hysyq(address) {
            // 选中xzqh查询
            let obj = {
                beginTime: '20240101',
                endTime: '20240501',
                jscType: 'jsc_hysyq_ztsh',
                id: address
            };
            let data = await cockpitInfo(obj);

            let obg_text = {
                xzqhdm_number: data.data[0].xzqhdm_number,
                zhmj: data.data[0].zhmj,

            }
            console.log(obg_text, "obg_echart");

            store.setCockpitHysyText(obg_text);

            // 图表数据
            let obj_echart = {
                beginTime: '20240101',
                endTime: '20240501',
                jscType: 'jsc_hysyq_yelx',
                id: address
            };
            let data_echart = await cockpitInfo(obj_echart);

            let obg_echart = {
                x: data_echart.data.map(item => item.yhlx_name),
                bar: data_echart.data.map(item => item.zhmj)

            }

            store.setCockpitHysyEchart(obg_echart);


            this.$refs.hysy_ref["getRenKou"]();

            // getRenKou();

            console.log(address, "address");
        },
        async pick_xzqh() {
            const that = this;
            const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            handler.setInputAction(async event => {
                let pickObj = viewer.scene.pick(event.position);
                var position = viewer.scene.pickPosition(event.position);

                if (!position)//点击到地球之外
                    return false;
                var cartographic = Cesium.Cartographic.fromCartesian(position);


                let longitude = Cesium.Math.toDegrees(cartographic.longitude);
                let latitude = Cesium.Math.toDegrees(cartographic.latitude);
                let height = cartographic.height;
                let heading = viewer.scene.camera.heading;
                let pitch = viewer.scene.camera.pitch;
                if (!pickObj)//未获取实体
                    return false;
                // console.log(longitude, latitude, height);
                if (!pickObj) {
                    return false;
                }

                if (!position) {
                    position = Cesium.Cartesian3.fromDegrees(0, 0, 0);
                }


                if (Cesium.defined(pickObj)) {



                    if (pickObj.id && pickObj.id instanceof Cesium.Entity) {//点击entity

                        if (pickObj.id.properties.hasProperty('name')) {
                            const name = pickObj.id.properties.name.getValue();
                            const address = pickObj.id.properties.adcode.getValue();
                            const center = pickObj.id.properties.centroid.getValue();

                            // 选中状态
                            pickObj.id.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color_click);
                            pickObj.id.polygon.extrudedHeight = 850;

                            // 恢复其他状态
                            viewer.entities.values.forEach((res) => {

                                if (res.properties.name._value != name) {
                                    // console.log(res.properties.name._value, "其他的");
                                    // console.log(res);
                                    res.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color)
                                    res.polygon.extrudedHeight = 450;

                                }
                            })
                            // 驾驶舱海域使用权
                            that.hysyq(address);

                        } else {

                        }

                    }




                } else {
                }

            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        },
        init_xzqh() {
            const that = this;
            xzqh.features.forEach((res) => {

                const twoDArray = res.geometry.coordinates[0][0];
                const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);

                console.log();

                viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(res.properties.centroid[0], res.properties.centroid[1], 500),
                    text: res.properties.name,
                    label: {
                        scale: 1.5,
                        font: "bolder 16px sans-serif",
                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                        text: res.properties.name,//图标名称
                        fillColor: Cesium.Color.fromCssColorString("#ffffff"),
                        pixelOffset: new Cesium.Cartesian2(5, -15),
                        zIndex: 3,
                    },
                    billboard: {
                        // 图像地址，URI或Canvas的属性
                        image: "./static/images/overview/htq-f.png",
                        height: 60,
                        // 宽度（以像素为单位）
                        width: 150,
                        // 相对于坐标的垂直位置
                        // verticalOrigin: Cesium.VerticalOrigin.CENTER,
                        // // 相对于坐标的水平位置
                        // horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                        scale: 1.0,
                        zIndex: 2,

                        show: true
                    },
                    properties: {
                        'type': "cockpit",
                        'name': res.properties.name,
                        'centroid': res.properties.centroid,
                        'adcode': res.properties.adcode,
                    },
                    polygon: {
                        zIndex: 1,
                        hierarchy: {
                            positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
                        },
                        outline: false,
                        material: Cesium.Color.fromCssColorString(that.xzqh_color),
                        height: 100,
                        extrudedHeight: 450,

                    }
                });

            })
        }
    },
    beforeCreate() { }, //生命周期 - 创建之前
    created() { }, //生命周期 - 创建完成（可以访问当前this实例）
    beforeMount() { }, //生命周期 - 挂载之前
    async mounted() {

        // let obj = { beginTime: '20230612', endTime: '20230817', jscType: 'jsc_wpjc_yelx', id: '46' };
        // let data = await cockpitInfo(obj);



        // let obj1 = { beginTime: '20230612', endTime: '20230817', jscType: 'jsc_wpjc_ztsh', id: '46' }
        // let data1 = await cockpitInfo(obj1);

        // console.log(data, "asda");
        // console.log(data1, "asda");
        // 三亚行政区划加载


        this.$nextTick((res) => {
            this.pick_xzqh();
            this.init_xzqh()
        });


    }, //生命周期 - 挂在完成
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroy() { },//生命周期 - 销毁完成
    activated() { }, //若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。
    deactivated() { } //若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。
};
</script>
<style  scoped></style>