real3d-portalsite/src/views/viewer.vue

<template>
    <div>
        <i class="cesiumbtn" :class="store.state.viewer_flag ? 'el-icon-aim' : 'el-icon-rank'" :title="isbig ? '缩小' : '放大'"
            @click="bigViewerChange"></i>
        <div v-show="store.state.viewer_flag" class="viewer">
            <div class="bg">

                <div class="bg_left"></div>
                <div class="bg_right"></div>
                <div class="bg_bottom"></div>
            </div>
            <datePicker @dateChange="dateChange"></datePicker>
            <ser-center></ser-center>
            <GKZB ref="gkzb_ref" />
            <BJXM />
            <TDSC />
            <HYSY ref="hysy_ref" />
            <TDSY />
            <GDBH ref="gdbh_ref" />
            <STXF ref="stxf_ref" />
            <WPJG ref="wpjg_ref" />
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import serCenter from './cockpitNew1/serCenter';
import GKZB from './cockpitNew1/gkzb';
import TDSC from './cockpitNew1/tdsc';
import HYSY from './cockpitNew1/hysy';
import TDSY from './cockpitNew1/tdsy';
import BJXM from './cockpitNew1/bjxm';
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 hyqy from "../../static/data/460200_hyqy.json";

import SerCenter from './cockpitNew1/serCenter.vue';

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

export default {
    components: { serCenter, GKZB, BJXM, TDSC, HYSY, TDSY, GDBH, STXF, WPJG, datePicker, SerCenter },
    data() {
        return {
            params: {
                beginTime: '',
                endTime: '',
                id: 4602,
            },
            flag: true,
            xzqh_color_click: "rgba(46, 177, 251, 0.6)",
            xzqh_color: "rgba(10, 95, 152, 0.5)",
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        bigViewerChange() {
            store.setViewerFlagb(!store.state.viewer_flag);
            store.setToolBarShow(!store.state.viewer_flag);
            // store.setToolBarShow(true);

        },
        switch() {
            this.flag = !this.flag;
        },
        setDatas() {
            this.$refs.gdbh_ref.setData({ id: this.params.id });
            this.$refs.stxf_ref.setData({ id: this.params.id });
            this.$refs.wpjg_ref.setData(this.params);
        },
        dateChange(date) {
            this.params.beginTime = date[0]
            this.params.endTime = date[1]
            this.setDatas()
        },
        async hysyq(address) {
            // 选中xzqh查询
            let obj = {
                beginTime: store.state.cockpit_date[0],
                endTime: store.state.cockpit_date[1],
                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 == undefined ? 0 : data.data[0].zhmj,

            }
            obg_text.zhmj == null ? 0 : obg_text.zhmj;
            store.setCockpitHysyText(obg_text);

            // 图表数据
            let obj_echart = {
                beginTime: store.state.cockpit_date[0],
                endTime: store.state.cockpit_date[1],
                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)

            }

            obg_echart.x.length == 0 ? obg_echart.x = ['渔业基础设施用海', '开放式养殖用海', '旅游基础设施用海', '浴场用海',
                '游乐场用海'] : obg_echart.x = obg_echart.x;

            obg_echart.bar.length == 0 ? obg_echart.bar = [0, 0, 0, 0, 0,] : obg_echart.bar = obg_echart.bar;

            store.setCockpitHysyEchart(obg_echart);


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

            // getRenKou();

        },
        hysyq_xzqh() {
            const that = this;
            that.$refs.hysy_ref["label_data"]();
            that.$refs.hysy_ref["echart_data"]();
        },
        async gkzb_xzqh(address) {
            let obj = {
                // beginTime: store.state.cockpit_date[0],
                // endTime: store.state.cockpit_date[1],
                jscType: 'jsc_gkzb_ztgu_stbh',
                id: address
            };
            let data = await cockpitInfo(obj);

            let obj_yjjbntmj = {
                jscType: 'jsc_gdbh_ztgh_nt',
                id: address
            };
            let obj_yjjbntmj_data = await cockpitInfo(obj_yjjbntmj);
            // 永久基本农田保护面积
            // that.yjjbntmj = obj_yjjbntmj_data.data[0].yjjbntmj;


            let obj_kfbjmj = {
                jscType: 'jsc_gkzb_ztgh_kfbj',
                id: address
            };
            let obj_kfbjmj_data = await cockpitInfo(obj_kfbjmj);
            // // 城市开发边界
            // that.kfbjmj = obj_kfbjmj_data.data[0].kfbjmj;
            // // 覆盖城镇开发边界
            // that.bfb = obj_kfbjmj_data.data[0].bfb * 100;
            store.setCockpitGkzb({
                mj: data.data[0].mj,// 生态保护红线面积
                ly_mj: data.data[0].ly_mj,// 路域生态保护红线
                hy_mj: data.data[0].hy_mj,//近海岸面积
                yjjbntmj: obj_yjjbntmj_data.data[0].yjjbntmj,// 永久基本农田保护面积
                kfbjmj: obj_kfbjmj_data.data[0].kfbjmj,// 城市开发边界
                bfb: obj_kfbjmj_data.data[0].bfb * 100,// 覆盖城镇开发边界
                ghdkmj: obj_kfbjmj_data.data[0].ghdkmj//已入库管控范围

            });

        },
        async gkzb() {
            const that = this;
            that.$refs.gkzb_ref["initData"]();
        },
        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;
                // that.addSceneFun()
                // 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') && pickObj.id.properties.name.getValue() != "海洋区域") {
                            const name = pickObj.id.properties.name.getValue();
                            const address = pickObj.id.properties.adcode.getValue();
                            const center = pickObj.id.properties.centroid.getValue();
                            store.state.regional_information = {
                                id: address,
                                name: name,
                            }
                            // 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) {
                                    res.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color)
                                    // res.polygon.extrudedHeight = 450;

                                    // 选中状态
                                } else {
                                    res.polygon._material.color = Cesium.Color.fromCssColorString(that.xzqh_color_click)
                                    // res.polygon.extrudedHeight = 850;
                                }
                            })
                            that.params.id = address
                            that.setDatas()
                            // 驾驶舱海域使用权
                            that.hysyq(address);
                            // 驾驶舱土地收储
                            that.tdsc_xzqh(address);
                            // 管控指标
                            that.gkzb_xzqh(address);

                        } else {

                        }

                    }




                } else {
                    // 暂时点击周围数据显示三亚市
                    // 清除所有xzqh状态
                    viewer.entities.values.forEach((res) => {

                        // 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_xzqh();
                    // 土地收储
                    that.tdsc();
                    // 管控指标
                    that.gkzb();


                }

            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        },
        tdsc() {
            const that = this;
            that.store.setCockpitTdsc(true);

        },
        tdsc_xzqh() {
            const that = this;
            that.store.setCockpitTdsc(false);
        },
        colorFun(color) {
            const fs = `czm_material  czm_getMaterial(czm_materialInput materialInput)
            
            {
                czm_material material = czm_getDefaultMaterial(materialInput);
                vec2 st = materialInput.st; 
                float dis = distance(st,vec2(0.5));
                material.diffuse = color.rgb;
                material.alpha = clamp( dis * 2.0, 0.1, 0.5);
                return material;
            }
            `

            const material = new Cesium.Material({
                fabric: {
                    uniforms: {
                        color: color
                    },
                    source: fs,

                }
            })

            const aper = new Cesium.MaterialAppearance({
                material,
                source: fs,

            })

            return aper;
        },
        init_xzqh() {
            const that = this;
            xzqh.features.forEach((res) => {

                let obj = {
                    'type': "cockpit",
                    'name': res.properties.name,
                    'centroid': res.properties.centroid,
                    'adcode': res.properties.adcode,
                }
                res.geometry.coordinates.forEach((item) => {

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

                    viewer.entities.add({
                        position: Cesium.Cartesian3.fromDegrees(obj.centroid[0], res.properties.centroid[1], 5000),
                        text: obj.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,
                            // 设置远近裁条件
                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
                        },
                        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,
                            // 设置远近裁条件
                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
                            show: true
                        },
                        properties: obj,
                        polygon: {
                            zIndex: 1,
                            hierarchy: {
                                positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
                            },
                            // outline: false,
                            material: Cesium.Color.fromCssColorString(that.xzqh_color),
                            height: 100,
                            extrudedHeight: res.properties.extrudedHeight,
                            outline: true,
                            // outlineColor : Cesium.Color.BLACK
                            outlineColor: Cesium.Color.fromCssColorString('#55A1E3'),
                            // 设置远近裁条件
                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
                        }
                    });


                    // let polygon = new Cesium.GeometryInstance({
                    //     geometry: new Cesium.PolygonGeometry({
                    //         polygonHierarchy: new Cesium.PolygonHierarchy(
                    //             Cesium.Cartesian3.fromDegreesArray(oneDArray)
                    //         ),
                    //         height: 100,
                    //         extrudedHeight: res.properties.extrudedHeight,

                    //     })
                    // })

                    // let addPolygonGeometry = new Cesium.Primitive({
                    //     geometryInstances: polygon,
                    //     appearance: that.colorFun(Cesium.Color.fromCssColorString("rgba(254, 129, 6, 0.1)"))

                    // })

                    // viewer.scene.primitives.add(addPolygonGeometry)
                })




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

        //         let obj = {
        //             'type': "cockpit",
        //             'name': res.properties.name,
        //             'centroid': res.properties.centroid,
        //             'adcode': res.properties.adcode,
        //         }
        //         res.geometry.coordinates.forEach((item) => {

        //             const twoDArray = item[0];
        //             const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);

        //             viewer.entities.add({
        //                 position: Cesium.Cartesian3.fromDegrees(obj.centroid[0], res.properties.centroid[1], 5000),
        //                 text: obj.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,
        //                     // 设置远近裁条件
        //                     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
        //                 },
        //                 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,
        //                     // 设置远近裁条件
        //                     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
        //                     show: true
        //                 },
        //                 properties: obj,
        //                 polygon: {
        //                     zIndex: 1,
        //                     hierarchy: {
        //                         positions: Cesium.Cartesian3.fromDegreesArray(oneDArray),
        //                     },
        //                     // outline: false,
        //                     material: that.colorFun(Cesium.Color.fromCssColorString("rgba(254, 129, 6, 0.75)")),
        //                     height: 100,
        //                     extrudedHeight: res.properties.extrudedHeight,
        //                     outline: true,
        //                     // outlineColor : Cesium.Color.BLACK
        //                     outlineColor: Cesium.Color.fromCssColorString('#55A1E3'),
        //                     // 设置远近裁条件
        //                     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
        //                 }
        //             });

        //         })


        //     })
        // },
        init_hyqy() {
            const that = this;


            // hierarchy: {
            //         positions: Cesium.Cartesian3.fromDegreesArray([
            //             125.9, 35.7,
            //             110.20, 34.55,
            //             120.20, 50.55
            //         ]),
            //         // holes: [{
            //         //     positions: Cesium.Cartesian3.fromDegreesArray([
            //         //         119, 32,
            //         //         115, 34,
            //         //         119, 40
            //         //     ])
            //         // }]
            //     },

            hyqy.features.forEach((res) => {

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

                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,
                        // 设置远近裁条件
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
                    },
                    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,
                        // 设置远近裁条件
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
                        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: 300,
                        extrudedHeight: 350,
                        outline: true,
                        // outlineColor : Cesium.Color.BLACK
                        outlineColor: Cesium.Color.fromCssColorString('#55A1E3'),
                        // 设置远近裁条件
                        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0),
                    }
                });

            })
        },
        addSceneFun() {
            var pitch = viewer.camera.pitch;
            //获取当前视角的heading
            var heading = viewer.camera.heading;
            //获取当前视角的postion（位置）
            var position = viewer.camera.position;
            var x = position.x;
            var y = position.y;
            var z = position.z;
            var testPitch = pitch;
            var testHeading = heading;
            // console.log("获取当前视角x,y,z", position.x, position.y, position.z, "pitch", pitch, "heading", heading);

            var obj = {
                "x": x,
                "y": y,
                "z": z,
                "pitch": pitch,
                "heading": heading,
            }

            console.log(obj, "asd");

        },
        flatten3DArray(arr) {
            let stack = [...arr]; // 初始化栈，并将数组元素压入栈中  
            let result = []; // 用于存储结果的一维数组  

            while (stack.length > 0) {
                let current = stack.pop(); // 弹出栈顶元素  
                if (Array.isArray(current)) {
                    // 如果当前元素是数组，则将其元素压入栈中（逆序）  
                    for (let i = current.length - 1; i >= 0; i--) {
                        stack.push(current[i]);
                    }
                } else {
                    // 如果当前元素不是数组，则将其添加到结果数组中  
                    result.push(current);
                }
            }

            // 注意：因为我们是逆序压入栈中的，所以结果数组的顺序与原始三维数组中的顺序相反  
            // 如果需要保持原始顺序，可以在压入栈时使用unshift代替push，但这样会降低性能  
            return result;
        }
    },
    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();
            this.init_hyqy();


        });


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

.bg {
    width: 100%;
    height: 100%;

    .bg_left {
        width: 21.6%;
        height: calc(100% + 60px);
        position: absolute;
        top: -60px;
        left: 0;
        z-index: 100;
        background: linear-gradient(to right, rgba(6, 37, 66, 1), rgba(26, 28, 53, 0));
    }

    .bg_right {
        width: 21.6%;
        height: calc(100% + 60px);
        position: absolute;
        top: -60px;
        right: 0;
        z-index: 100;
        background: linear-gradient(to left, rgba(6, 37, 66, 1), rgba(26, 28, 53, 0));
    }

    .bg_bottom {
        width: 100%; // 56.8%;
        height: 30%;
        position: absolute;
        // left: 21.6%;
        bottom: 0;
        z-index: 100;
        background: linear-gradient(to top, rgba(6, 37, 66, 0.5), rgba(26, 28, 53, 0));
    }
}
</style>