样式调整

src/views/cockpitNew1/gdbh.vue

@@ -6,7 +6,9 @@
         <div class="text">
           <p>{{ sd.name }}</p>
           <span class="sdvalue">{{ sdata[sd.prop] || 0 }}</span>
-          <span class="unit">{{ sd.unit }}</span>
+          <!-- <span class="unit">{{ sd.unit }}</span> -->
+          <span class="unit">平分千米</span>
+
         </div>
       </div>
     </div>
@@ -103,6 +105,7 @@ export default {
 <style lang="scss" scoped>
 .gdbh {
   top: 10px !important;
+
   .content {
     // border: #00FFFF 1px solid;
     // position: absolute;
@@ -131,12 +134,15 @@ export default {
   .icongdbh0 {
     background-image: url("/static/images/overview/icongdbh0.png");
   }
+
   .icongdbh1 {
     background-image: url("/static/images/overview/icongdbh1.png");
   }
+
   .icongdbh2 {
     background-image: url("/static/images/overview/icongdbh2.png");
   }
+
   .icongdbh3 {
     background-image: url("/static/images/overview/icongdbh3.png");
   }
@@ -148,23 +154,37 @@ export default {
     margin-bottom: 4px;
 
     p {
+      // font-kerning: normal;
+      // font-family: "Arial Negreta", "Arial Normal", "Arial";
+      // font-weight: bold;
+      // font-size: 14px;
+      // color: #bcd3e5;
+      // line-height: 24px;
+
+
       font-kerning: normal;
-      font-family: "Arial Negreta", "Arial Normal", "Arial";
-      font-weight: bold;
+      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+      font-weight: 700;
+      font-style: normal;
       font-size: 14px;
-      color: #bcd3e5;
-      line-height: 24px;
+      color: #FFFFFF;
     }
 
     .sdvalue {
-      font-family: "Arial Negreta", "Arial Normal", "Arial";
+      // font-family: "Arial Negreta", "Arial Normal", "Arial";
+      // font-weight: 700;
+      // font-style: normal;
+      // font-size: 18px;
+      // color: #68F4FB;
+      // line-height: 16px;
+
+
+      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
       font-weight: 700;
       font-style: normal;
-      font-weight: 400;
-      font-size: 18px;
-      color: #64daff;
-      line-height: 16px;
+      color: #68F4FB;
     }
+
     .unit {
       font-family: "Arial Negreta", "Arial Normal", "Arial";
       font-weight: 400;
@@ -180,6 +200,7 @@ export default {
     // border: #00FFFF 1px solid;
     width: 50px;
   }
+
   #gdbh_echart {
     width: 100%;
     height: calc(100% - 100px);

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

@@ -90,6 +90,7 @@ export default {
                 id: address
             };
             let data = await cockpitInfo(obj);
+            console.log('data: ', data);
 
             let obg_text = {
                 xzqhdm_number: data.data[0].xzqhdm_number,
@@ -146,19 +147,19 @@ export default {
                 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;
+
+            let obj_gdbhmb = {
+                jscType: 'jsc_gkzb_ztgu_gdbhmb',
+                id: address
+            };
+            let obj_gdbhmb_data = await cockpitInfo(obj_gdbhmb);
+
             store.setCockpitGkzb({
                 mj: data.data[0].mj,// 生态保护红线面积
                 ly_mj: data.data[0].ly_mj,// 路域生态保护红线
@@ -166,6 +167,7 @@ export default {
                 yjjbntmj: obj_yjjbntmj_data.data[0].yjjbntmj,// 永久基本农田保护面积
                 kfbjmj: obj_kfbjmj_data.data[0].kfbjmj,// 城市开发边界
                 bfb: obj_kfbjmj_data.data[0].bfb * 100,// 覆盖城镇开发边界
+                tbmj_ys: obj_gdbhmb_data.data[0].tbmj_ys,//耕地保护目标
                 ghdkmj: obj_kfbjmj_data.data[0].ghdkmj//已入库管控范围
 
             });
@@ -193,11 +195,6 @@ export default {
                 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);
@@ -205,62 +202,42 @@ export default {
 
                 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;
+                    if (pickObj.primitive instanceof Cesium.Primitive) {//点击primitive
+                        //primitive相关操作
+                        let pri_name = pickObj.id.name;
+                        let adcode = pickObj.id.adcode
+                        console.log('pickObj: ', pickObj);
+                        that.params.id = adcode
+                        that.setDatas()
+                        // 驾驶舱海域使用权
+                        that.hysyq(adcode);
+                        // 驾驶舱土地收储
+                        that.tdsc_xzqh(adcode);
+                        // 管控指标
+                        that.gkzb_xzqh(adcode);
+                        viewer.entities.values.forEach((res) => {
+                            if (res.properties.name._value == pri_name) {//选中
+                                res.billboard.show._value = true;
+                                store.state.regional_information = {
+                                    id: adcode,
+                                    name: pri_name,
                                 }
-                            })
-                            that.params.id = address
-                            that.setDatas()
-                            // 驾驶舱海域使用权
-                            that.hysyq(address);
-                            // 驾驶舱土地收储
-                            that.tdsc_xzqh(address);
-                            // 管控指标
-                            that.gkzb_xzqh(address);
-
-                        } else {
+                            } else {
+                                if (res.billboard != undefined)
+                                    res.billboard.show._value = false
 
-                        }
 
+                            }
+                        })
                     }
 
 
-
-
                 } 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;
-
+                        if (res.billboard != undefined)
+                            res.billboard.show._value = false
                     })
                     // 海域使用
                     that.hysyq_xzqh();
@@ -299,7 +276,7 @@ export default {
                 vec2 st = materialInput.st; 
                 float dis = distance(st,vec2(0.5));
                 material.diffuse = color.rgb;
-                material.alpha = clamp( dis * 2.0, 0.1, 0.6);
+                material.alpha = clamp( dis * 2.0, 0.1, 0.3);
                 return material;
             }
             `
@@ -337,12 +314,35 @@ export default {
                     const twoDArray = item[0];
                     const oneDArray = twoDArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
 
+                    // 行政区划
+                    let polygon = new Cesium.GeometryInstance({
+                        id: obj,
+
+                        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('#139FF0')),
+                    })
+
+                    viewer.scene.primitives.add(addPolygonGeometry)
+
+                    // 墙体流动效果
+                    var positions = Cesium.Cartesian3.fromDegreesArray(oneDArray);
                     viewer.entities.add({
+                        name: "立体墙效果",
                         position: Cesium.Cartesian3.fromDegrees(obj.centroid[0], res.properties.centroid[1], 5000),
                         text: obj.name,
+                        properties: obj,
                         label: {
-                            scale: 1.5,
-                            font: "bolder 16px sans-serif",
+                            font: "bolder 18px sans-serif",
                             style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                             text: res.properties.name,//图标名称
                             fillColor: Cesium.Color.fromCssColorString("#ffffff"),
@@ -355,204 +355,45 @@ export default {
                             // 图像地址，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: false
                         },
-                        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(res.properties.color))
-                        appearance: that.colorFun(Cesium.Color.fromCssColorString('#139FF0'))
-
-                    })
-
-                    viewer.scene.primitives.add(addPolygonGeometry)
-
-                    console.log(res.properties.extrudedHeight, "res.properties.extrudedHeight");
-
-                    var positions = Cesium.Cartesian3.fromDegreesArray(oneDArray);
-                    viewer.entities.add({
-                        name: "立体墙效果",
                         wall: {
                             positions: positions,
                             // 设置高度
                             maximumHeights: new Array(positions.length).fill(res.properties.extrudedHeight),
                             minimumHeights: new Array(positions.length).fill(0),
                             material: new Cesium.DynamicWallMaterialProperty({
-                                color: Cesium.Color.fromBytes(0, 255, 255).withAlpha(0.7),
+                                color: Cesium.Color.fromBytes(19, 159, 240).withAlpha(0.7),
                                 duration: 3000
                             }),
+                            distanceDisplayCondition: new Cesium.DistanceDisplayCondition(20000, 9999999999.0)
+
                         }
                     })
                 })
             })
         },
-        // 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) => {
 
+                let obj = {
+                    'type': "cockpit",
+                    'name': res.properties.name,
+                    'centroid': res.properties.centroid,
+                    'adcode': res.properties.adcode,
+                }
                 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,
-                    },
+                    properties: obj,
                     polygon: {
                         zIndex: 1,
                         hierarchy: {