村点击

src/views/crops/area/index.vue

@@ -5,19 +5,13 @@
             <div class="leftTop">
                 <div class="title">
                     <span>种植面积时间统计</span>
-                    <p
+                    <p @click="Deta(
-                        @click="
-                            Deta(
                         'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
                     )
-                        "
+                        ">
-                    >
                         下载 &nbsp;
 
-                        <img
+                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
-                            src="@/assets/icons/svg/downloads.svg"
-                            style="width: 14px; height: 14px; cursor: pointer"
-                        />
                     </p>
                 </div>
                 <div ref="areaDiv" class="areaDiv"></div>
@@ -26,18 +20,12 @@
             <div class="leftbottom">
                 <div class="title">
                     <span>种植面积统计</span>
-                    <p
+                    <p @click="Deta(
-                        @click="
-                            Deta(
                             'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
                         )
-                        "
+                        ">
-                    >
                         下载 &nbsp;
-                        <img
+                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
-                            src="@/assets/icons/svg/downloads.svg"
-                            style="width: 14px; height: 14px; cursor: pointer"
-                        />
                     </p>
                 </div>
                 <div ref="typesofDiv" class="typesofDiv"></div>
@@ -89,18 +77,12 @@
             <div class="rightTop">
                 <div class="title">
                     <span>作物类型统计-高标准农田</span>
-                    <p
+                    <p @click="Deta(
-                        @click="
-                            Deta(
                             'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/81f3b011-7a5d-4a21-88aa-8ea51142e564_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
                         )
-                        "
+                        ">
-                    >
                         下载 &nbsp;
-                        <img
+                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
-                            src="@/assets/icons/svg/downloads.svg"
-                            style="width: 14px; height: 14px; cursor: pointer"
-                        />
                     </p>
                 </div>
                 <div ref="farmlandDiv" class="farmlandDiv"></div>
@@ -109,27 +91,17 @@
             <div class="rightbottom">
                 <div class="title">
                     <span>作物类型统计-行政区划</span>
-                    <p
+                    <p @click="Deta(
-                        @click="
-                            Deta(
                             'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/0c0ff4cf-151a-470e-856a-b0fce0fde997_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
                         )
-                        "
+                        ">
-                    >
                         下载 &nbsp;
-                        <img
+                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
-                            src="@/assets/icons/svg/downloads.svg"
-                            style="width: 14px; height: 14px; cursor: pointer"
-                        />
                     </p>
                 </div>
                 <el-select @change="selectTab(item)" v-model="value" clearable placeholder="全部">
-                    <el-option
+                    <el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
-                        v-for="item in Township.arr"
+                        :value="item.properties.XZDM" />
-                        :key="item.properties.XZDM"
-                        :label="item.properties.XZMC"
-                        :value="item.properties.XZDM"
-                    />
                 </el-select>
                 <div ref="ASdivisionDiv" class="ASdivision"></div>
             </div>
@@ -151,6 +123,17 @@
             <div>{{ clickInfoMap.value }}亩</div>
             <div class="cancel" @click="hiddenOverlayChart">X</div>
         </div>
+        <div id="pop">
+            <div v-for="(item, index) in townZuowu.label" :key="index">
+                <div>{{ item.crop }}：</div>
+                <div>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</div>
+            </div>
+            <div v-if="townZuowu.XZQMC">
+                <div>村名：</div>
+                <div>{{ townZuowu.XZQMC }} </div>
+            </div>
+            <div class="cancel" @click="hiddenOverlayChart">X</div>
+        </div>
     </div>
 </template>
 
@@ -357,6 +340,8 @@ function initMap() {
 
     // 图层点击事件
     layerClick();
+    // 蒙版
+    mbHandle()
 
     //加载黄岛区村级地图服务
     // Cesium.GeoJsonDataSource.load(
@@ -535,6 +520,7 @@ function getLevel(height) {
     }
 }
 
+let townZuowu = ref({ label: [] })//镇的作物
 let XZDM = '';
 // 图层点击事件
 function layerClick() {
@@ -549,7 +535,6 @@ function layerClick() {
                 let alti = viewer.camera.positionCartographic.height;
                 let level = getLevel(alti);
                 const layers = viewer.imageryLayers._layers;
-                console.log('layers:', layers);
                 const index = layers.findIndex(
                     item =>
                         item._imageryProvider._layers &&
@@ -576,13 +561,11 @@ function layerClick() {
                         if (promise) {
                             promise.then(data => {
                                 if (data.length > 0) {
-                                    console.log('data:', data);
                                     let newData = data['0'];
                                     if (newData.properties && newData.properties.XZDM) {
                                         if (XZDM !== newData.properties.XZDM) {
                                             //防止
                                             XZDM = newData.properties.XZDM;
-                                            console.log('111', newData);
                                             value.value = XZDM; //
                                             selectTab(); //
                                             let item = newData.data;
@@ -611,9 +594,33 @@ function layerClick() {
                                                 `XZDM=${newData.properties.XZDM}`,
                                                 'village_CQL'
                                             );
+
+                                            // 显示该镇的种植结构
+                                            let entitys = viewer.entities._entities._array;
+                                            for (var na = entitys.length - 1; na >= 0; na--) {
+                                                if (entitys[na]._name && entitys[na]._name === 'point' + newData.properties.XZDM) {
+                                                    let info = entitys[na]._info
+                                                    // entitys[na].label.show = true
+                                                    townZuowu.value = info//保存数据
+                                                    showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
+                                                    viewer.scene.postRender.addEventListener(infoWindowPostRender);
+                                                } else {
+                                                    // if (entitys[na].label) {
+                                                    //     entitys[na].label.show = false
+                                                    // }
+                                                }
+                                            }
+                                            // 移除村高亮
+                                            deleteEntityByName('villageLine');
+                                            XZQDM = ''
+                                        } else {
+                                            // // 已经有镇了，监听村点击
+                                            villageClick(layers, xy, level, cartographic)
                                         }
                                     } else {
                                         removeWms(['village_CQL']);
+                                        // 移除框框
+                                        hiddenOverlayChart(); // 清除监听事件 
                                     }
                                 }
                             });
@@ -624,11 +631,91 @@ function layerClick() {
         }
     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 }
+let XZQDM = ''
+// 村点击高亮
+function villageClick(layers, xy, level, cartographic) {
+    const index = layers.findIndex(
+        item =>
+            item._imageryProvider._layers &&
+            item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village'
+    );
+    if (index > -1) {
+        const providerPoint = layers[index];
+        // 拿取最后一个图层
+        let provider = providerPoint._imageryProvider;
+        if (
+            provider &&
+            provider.ready &&
+            provider._layers &&
+            providerPoint.show === true
+        ) {
+            xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
+            let promise = provider.pickFeatures(
+                xy.x,
+                xy.y,
+                level,
+                cartographic.longitude,
+                cartographic.latitude
+            );
+            if (promise) {
+                promise.then(data => {
+                    if (data.length > 0) {
+                        let newData = data['0'];
+                        if (newData.properties && newData.properties.XZQDM) {
+                            if (XZQDM !== newData.properties.XZQDM) {
+                                //防止
+                                XZQDM = newData.properties.XZQDM;
+                                let item = newData.data;
+                                // 移除高亮
+                                deleteEntityByName('villageLine');
+                                // 高亮边界
+                                addBoundaryHandle(
+                                    item.geometry.coordinates,
+                                    'villageLine',
+                                    'yellow'
+                                );
+                                // townZuowu.value = info//保存数据
+
+                                // 后插和村
+                                if (newData.properties.XZQDM === '370211104217') {
+                                    // console.log('后河岔村委会')
+                                    const rectangle = Cesium.Rectangle.fromDegrees(
+                                        item.bbox[0],
+                                        item.bbox[1],
+                                        item.bbox[2],
+                                        item.bbox[3]
+                                    );
+                                    const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
+                                    let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
+                                    let latitude = Cesium.Math.toDegrees(center.latitude);
+                                    let info = {
+                                        lon: longitude,
+                                        lat: latitude,
+                                        ...item.properties,
+                                        // XZQMC
+                                        label: [
+                                            { crop: "茶叶", Shape_Area: 2820 },
+                                            { crop: "大豆", Shape_Area: 2767 },
+                                            { crop: "花生", Shape_Area: 62356 },
+                                            { crop: "蓝莓", Shape_Area: 5443 },
+                                            { crop: "地瓜", Shape_Area: 897 },
+                                            { crop: "小麦", Shape_Area: 20111 },
+                                        ]
+                                    }
+                                    townZuowu.value = info//保存数据
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        }
+    }
+}
 // 添加村
 // CQL_FILTER:筛选的语句
 // customName地图服务自定义属性名
 function addvillage(CQL_FILTER, customName) {
-    console.log('222');
     let map2 = new Cesium.WebMapServiceImageryProvider({
         url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
         layers: 'shuzisannong:huangdaoqu_village', //图层名
@@ -1778,6 +1865,108 @@ function ASdivision() {
 }
 
 /*--------------------------------------------------------------------------------------------*/
+function getAreaFenlei() {
+    let fl = fenleiRef.value
+    console.log('fl:', fl);
+    axios({
+        url: serverAPI.geoserverUrl + '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
+    }).then(res => {
+        console.log('res1111:', res);
+        let data = res.data.features;
+        data.forEach((item, index) => {
+            const rectangle = Cesium.Rectangle.fromDegrees(
+                item.bbox[0],
+                item.bbox[1],
+                item.bbox[2],
+                item.bbox[3]
+            );
+            const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
+            let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
+            let latitude = Cesium.Math.toDegrees(center.latitude);
+
+            if (item.properties.XZDM === '370211011') {
+                //灵山卫街道
+                longitude = 120.0863;
+                latitude = 35.941;
+            } else if (item.properties.XZDM === '370211003') {
+                //薛家岛街道
+                longitude = 120.243682;
+                latitude = 35.97123201;
+            }
+            const townData = fl[item.properties.XZMC]
+            let label = []
+            if (townData) {
+                label = townData.map((it, inex) => {
+                    // let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
+                    // return dd
+                    return it.properties
+                })
+            }
+            // label = label.join(' ')
+            // console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
+            // 添加点
+            viewer.entities.add({
+                name: 'point' + item.properties.XZDM,
+                position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
+                point: new Cesium.PointGraphics({
+                    show: true,
+                    pixelSize: 10,
+                    // heightReference: Cesium.HeightReference.NONE,
+                    color: Cesium.Color.fromBytes(30, 144, 255),
+                    outlineColor: new Cesium.Color(0, 0, 0, 0),
+                    outlineWidth: 0,
+                    disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
+                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,//贴地
+                }),
+                // label: {
+                //     show: false,
+                //     text: label.join(' '),
+                //     font: '12px sans-serif',
+                //     fillColor: Cesium.Color.WHITE,
+                //     showBackground: true,
+                //     backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色
+                //     // style: Cesium.LabelStyle.FILL,
+                //     outlineWidth: 3,
+                //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+                //     horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
+                //     pixelOffset: new Cesium.Cartesian2(-80, -10),
+                // },
+                info: {
+                    label: label,
+                    ...item.properties,
+                    // 经纬度，以便监听
+                    lon: longitude,
+                    lat: latitude,
+                },
+            });
+
+        });
+    }).catch(err => { })
+
+}
+let fenleiRef = ref({})
+function mbHandle() {
+    axios({
+        url: serverAPI.geoserverUrl + '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
+    }).then(res => {
+        let features = res.data.features
+        let town = {}
+        // 按镇分类
+        features.forEach(item => {
+            let key = item.properties.town
+            if (town[key]) {
+                town[key].push(item)
+            } else {
+                town[key] = [item]
+            }
+        })
+        fenleiRef.value = town
+        getAreaFenlei()
+
+    }).catch(err => { })
+
+}
+
 
 /*------------------------------------------柱状图--------------------------------------------*/
 // function getJson() {
@@ -1930,28 +2119,27 @@ function ASdivision() {
 //         .catch(err => {});
 // }
 // 地图移动时弹窗跟随
-// function infoWindowPostRender() {
+function infoWindowPostRender() {
-//     // let viewer = viewers.value;
+    // let viewer = viewers.value;
-//     console.log('clickInfoMap.value:', clickInfoMap.value);
+    if (townZuowu.value && townZuowu.value.lon && townZuowu.value.lat) {
-//     if (clickInfoMap.value && clickInfoMap.value.lon && clickInfoMap.value.lat) {
+        //经纬度转为世界坐标
-//         //经纬度转为世界坐标
+        const gisPosition = Cesium.Cartesian3.fromDegrees(
-//         const gisPosition = Cesium.Cartesian3.fromDegrees(
+            Number(townZuowu.value.lon),
-//             Number(clickInfoMap.value.lon),
+            Number(townZuowu.value.lat),
-//             Number(clickInfoMap.value.lat),
+            0
-//             0
+        ); //转化为屏幕坐标
-//         ); //转化为屏幕坐标
+        var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
-//         var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+            viewer.scene,
-//             viewer.scene,
+            gisPosition
-//             gisPosition
+        );
-//         );
 
-//         if (Cesium.defined(windowPosition)) {
+        if (Cesium.defined(windowPosition)) {
-//             const pop = document.getElementById('popup');
+            const pop = document.getElementById('pop');
-//             pop.style.top = windowPosition.y - 10 + 'px';
+            pop.style.top = windowPosition.y - 10 + 'px';
-//             pop.style.left = windowPosition.x + 10 + 'px';
+            pop.style.left = windowPosition.x + 10 + 'px';
-//         }
+        }
-//     }
+    }
-// }
+}
 // function mapClick() {
 //     // let viewer = viewers.value;
 //     viewer.screenSpaceEventHandler.setInputAction(function (movement) {
@@ -1993,22 +2181,21 @@ function ASdivision() {
 //     }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 // }
 
-// // 隐藏弹窗
+// 隐藏弹窗
-// function hiddenOverlayChart() {
+function hiddenOverlayChart() {
-//     // let viewer = viewers.value;
+    const pop = document.getElementById('pop');
-//     const pop = document.getElementById('popup');
+    pop.style.display = 'none'; // 清除监听事件
-//     pop.style.display = 'none'; // 清除监听事件
+    viewer.scene.postRender.removeEventListener(infoWindowPostRender);
-//     viewer.scene.postRender.removeEventListener(infoWindowPostRender);
+}
-// }
+//显示弹窗
-// //显示弹窗
+function showOverlayChart(position) {
-// function showOverlayChart(position) {
+    const pop = document.getElementById('pop');
-//     const pop = document.getElementById('popup');
+    pop.style.display = 'block';
-//     pop.style.display = 'flex';
+    pop.style.position = 'absolute';
-//     pop.style.position = 'absolute';
+    pop.style.top = position.y - 10 + 'px';
-//     pop.style.top = position.y - 10 + 'px';
+    pop.style.left = position.x + 10 + 'px';
-//     pop.style.left = position.x + 10 + 'px';
+    pop.style.zIndex = 99;
-//     pop.style.zIndex = 99;
+}
-// }
 
 // function random(min, max) {
 //     return Math.floor(Math.random() * (max - min)) + min;
@@ -2050,11 +2237,9 @@ $height: calc(100vh - 100px);
             height: 25px;
             border-radius: 20px;
             font-size: 14px;
-            background: linear-gradient(
+            background: linear-gradient(180deg,
-                180deg,
                     rgba(16, 111, 111, 1) 0%,
-                rgba(47, 214, 214, 1) 100%
+                    rgba(47, 214, 214, 1) 100%);
-            );
             border: 1.5px solid rgba(23, 194, 180, 1);
             display: flex;
             justify-content: center;
@@ -2115,6 +2300,7 @@ $height: calc(100vh - 100px);
             flex-direction: column;
             padding: 5px 10px 5px 10px;
             color: rgba(255, 255, 255, 1);
+
             .Crops {
                 display: flex;
                 width: 100%;
@@ -2126,16 +2312,16 @@ $height: calc(100vh - 100px);
                 align-items: center;
                 justify-content: space-around;
                 opacity: 1;
-                background: linear-gradient(
+                background: linear-gradient(90deg,
-                    90deg,
                         rgba(21, 173, 148, 0.1) 0%,
-                    rgba(21, 173, 148, 0) 100%
+                        rgba(21, 173, 148, 0) 100%);
-                );
+
                 div {
                     display: flex;
                     align-items: center;
                 }
             }
+
             .el-checkbox-group {
                 display: flex;
                 flex-direction: column;
@@ -2308,7 +2494,7 @@ $height: calc(100vh - 100px);
     // align-items: flex-end;
     padding: 30px 8px 20px 8px;
 
-    & > div:nth-child(1) {
+    &>div:nth-child(1) {
         font-weight: 400;
         letter-spacing: 0px;
         color: rgba(255, 255, 255, 1);
@@ -2316,7 +2502,7 @@ $height: calc(100vh - 100px);
         line-height: 24px;
     }
 
-    & > div:nth-child(2) {
+    &>div:nth-child(2) {
         color: rgba(255, 255, 255, 1);
         width: 129px;
         height: 24px;
@@ -2339,6 +2525,50 @@ $height: calc(100vh - 100px);
     }
 }
 
-:deep(.el-select__popper.el-popper) {
+#pop {
+    border-radius: 5px;
+    background: rgba(2, 31, 26, 0.6);
+    display: none;
+    // justify-content: flex-start;
+    // align-items: flex-end;
+    padding: 30px 8px 20px 8px;
+
+    .cancel {
+        position: absolute;
+        right: 10px;
+        top: 5px;
+        color: rgba(255, 255, 255, 1);
+        cursor: pointer;
+    }
+
+    &>div {
+        display: flex;
+        margin-bottom: 10px;
+
+        &>div:nth-child(1) {
+            font-weight: 400;
+            letter-spacing: 0px;
+            color: rgba(255, 255, 255, 1);
+            // margin-top: 20px;
+            line-height: 24px;
+            margin-right: 10px;
+        }
+
+        &>div:nth-child(2) {
+            color: rgba(255, 255, 255, 1);
+            width: 129px;
+            height: 24px;
+            opacity: 1;
+            border-radius: 2px;
+            background: rgba(217, 231, 255, 0.2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 2px 10px 2px 10px;
+            // margin-top: 20px;
+        }
+    }
 }
+
+:deep(.el-select__popper.el-popper) {}
 </style>