Merge branch 'master' of http://114.244.114.158:8802/siwei/real3d-portalsite

src/views/viewer.vue

@@ -192,7 +192,7 @@ export default {
                 let height = cartographic.height;
                 let heading = viewer.scene.camera.heading;
                 let pitch = viewer.scene.camera.pitch;
-                that.addSceneFun()
+                // that.addSceneFun()
                 // console.log(longitude, latitude, height);
 
                 // if (!pickObj)//未获取实体
@@ -283,6 +283,37 @@ export default {
             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) => {
@@ -298,59 +329,148 @@ export default {
                     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
+                    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),
                             },
-                            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),
-                            }
-                        });
+                            // 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;
 
@@ -418,6 +538,7 @@ export default {
                         },
                         // outline: false,
                         material: Cesium.Color.fromCssColorString(that.xzqh_color),
+
                         height: 300,
                         extrudedHeight: 350,
                         outline: true,

src/views/viewer原本驾驶舱.vue

@@ -0,0 +1,676 @@
+<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>

src/views/viewer行政区划渐变.vue

@@ -0,0 +1,676 @@
+<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: 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),
+                        // }
+                    });
+
+
+                    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>

static/data/460200_full.json

@@ -7,6 +7,7 @@
                 "adcode": 460202,
                 "name": "海棠区",
                 "area": 250761776.02477366,
+                "color":"#D4AACE",
                 "extrudedHeight": 1500,
                 "center": [
                     109.760778,
@@ -4721,6 +4722,8 @@
                 "name": "吉阳区",
                 "area": 366352529.73341584,
                 "extrudedHeight": 2000,
+                "color":"#8DC763",
+
                 "center": [
                     109.512081,
                     18.247436
@@ -12194,6 +12197,8 @@
                 "name": "天涯区",
                 "area": 622369916.9770293,
                 "extrudedHeight": 4500,
+                "color":"#F7F39A",
+
                 "center": [
                     109.506357,
                     18.24734
@@ -18627,6 +18632,8 @@
                 "name": "崖州区",
                 "extrudedHeight": 2000,
                 "area": 348039643.3016275,
+                "color":"#96F0F1",
+
                 "center": [
                     109.174306,
                     18.352192
@@ -22388,6 +22395,8 @@
                 "name": "育才区",
                 "extrudedHeight": 2000,
                 "area": 367379547.8649946,
+                "color":"#EAC9A8",
+
                 "center": [
                     109.760778,
                     18.407516