面积提取

src/views/crops/area/index.vue

@@ -5,19 +5,14 @@
             <div class="leftTop">
                 <div class="title">
                     <span>种植面积时间统计</span>
-                    <p
+                    <p @click="
-                        @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 +21,13 @@
             <div class="leftbottom">
                 <div class="title">
                     <span>种植面积统计</span>
-                    <p
+                    <p @click="
-                        @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>
@@ -105,34 +95,13 @@
                 </div>
             </div>
             <div class="leftFoldDiv" @click="leftFoldClick()">
-                <el-tooltip
+                <el-tooltip class="box-item" :show-arrow="false" :disabled="leftWraFlag" hide-after="0" show-after="200"
-                    class="box-item"
+                    effect="dark" content="展开" placement="top">
-                    :show-arrow="false"
-                    :disabled="leftWraFlag"
-                    hide-after="0"
-                    show-after="200"
-                    effect="dark"
-                    content="展开"
-                    placement="top"
-                >
                     <img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
                 </el-tooltip>
-                <el-tooltip
+                <el-tooltip :disabled="!leftWraFlag" :show-arrow="false" class="box-item" show-after="200" hide-after="0"
-                    :disabled="!leftWraFlag"
+                    effect="dark" content="收起" placement="top">
-                    :show-arrow="false"
+                    <img class="imgrotate" v-if="leftWraFlag" src="@/assets/images/close1.png" alt="" />
-                    class="box-item"
-                    show-after="200"
-                    hide-after="0"
-                    effect="dark"
-                    content="收起"
-                    placement="top"
-                >
-                    <img
-                        class="imgrotate"
-                        v-if="leftWraFlag"
-                        src="@/assets/images/close1.png"
-                        alt=""
-                    />
                 </el-tooltip>
             </div>
         </div>
@@ -140,18 +109,13 @@
             <div class="rightTop">
                 <div class="title">
                     <span>种植面积统计-高标准农田</span>
-                    <p
+                    <p @click="
-                        @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>
@@ -160,65 +124,29 @@
             <div class="rightbottom">
                 <div class="title">
                     <span>种植面积统计-行政区划</span>
-                    <p
+                    <p @click="
-                        @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
+                <el-select popper-class="select_city" @change="selectTab(item)" v-model="value" clearable placeholder="全部">
-                    popper-class="select_city"
+                    <el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
-                    @change="selectTab(item)"
+                        :value="item.properties.XZDM" />
-                    v-model="value"
-                    clearable
-                    placeholder="全部"
-                >
-                    <el-option
-                        v-for="item in Township.arr"
-                        :key="item.properties.XZDM"
-                        :label="item.properties.XZMC"
-                        :value="item.properties.XZDM"
-                    />
                 </el-select>
                 <div ref="ASdivisionDiv" class="ASdivision"></div>
             </div>
             <div class="rightFoldDiv" @click="rightFoldClick()">
-                <el-tooltip
+                <el-tooltip :disabled="!rightWraFlag" :show-arrow="false" hide-after="0" show-after="200" class="box-item"
-                    :disabled="!rightWraFlag"
+                    effect="dark" content="收起" placement="top">
-                    :show-arrow="false"
-                    hide-after="0"
-                    show-after="200"
-                    class="box-item"
-                    effect="dark"
-                    content="收起"
-                    placement="top"
-                >
                     <img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
                 </el-tooltip>
-                <el-tooltip
+                <el-tooltip :disabled="rightWraFlag" :show-arrow="false" hide-after="0" show-after="200" class="box-item"
-                    :disabled="rightWraFlag"
+                    effect="dark" content="展开" placement="top">
-                    :show-arrow="false"
+                    <img class="imgrotate" v-if="!rightWraFlag" src="@/assets/images/close1.png" alt="" />
-                    hide-after="0"
-                    show-after="200"
-                    class="box-item"
-                    effect="dark"
-                    content="展开"
-                    placement="top"
-                >
-                    <img
-                        class="imgrotate"
-                        v-if="!rightWraFlag"
-                        src="@/assets/images/close1.png"
-                        alt=""
-                    />
                 </el-tooltip>
             </div>
         </div>
@@ -258,7 +186,7 @@
 import { ref, onMounted, inject, reactive, watch } from 'vue';
 import * as echarts from 'echarts';
 import TimeLine from '@/components/TimeLine/TimeLine.vue';
-import * as turf from '@turf/turf';
+// import * as turf from '@turf/turf';
 import { useEcharts } from '@/hooks/useEcharts';
 import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
 import axios from 'axios';
@@ -764,6 +692,7 @@ function layerClick() {
                 let alti = viewer.camera.positionCartographic.height;
                 let level = getLevel(alti);
                 const layers = viewer.imageryLayers._layers;
+                // 筛选出黄岛区服务
                 const index = layers.findIndex(
                     item =>
                         item._imageryProvider._layers &&
@@ -792,12 +721,15 @@ function layerClick() {
                                 if (data.length > 0) {
                                     let newData = data['0'];
                                     if (newData.properties && newData.properties.XZDM) {
-                                        console.log(XZDM);
+                                        console.log('XZDM:', XZDM);
+                                        console.log('newData.properties.XZDM:', newData.properties.XZDM);
                                         if (XZDM !== newData.properties.XZDM) {
-                                            //防止
+                                            //防止重复加载
                                             XZDM = newData.properties.XZDM;
                                             value.value = XZDM; //
+                                            if (selectTab) {
                                                 selectTab(); //
+                                            }
                                             let item = newData.data;
                                             // 定位
                                             viewer.camera.flyTo({
@@ -855,7 +787,7 @@ function layerClick() {
                                             XZQDM = '';
                                         } else {
                                             // // 已经有镇了，监听村点击
-                                            villageClick(layers, xy, level, cartographic);
+                                            villageClick(layers, xy, level, cartographic,movement);
                                         }
                                     } else {
                                         removeWms(['village_CQL']);
@@ -873,7 +805,7 @@ function layerClick() {
 }
 let XZQDM = '';
 // 村点击高亮
-function villageClick(layers, xy, level, cartographic) {
+function villageClick(layers, xy, level, cartographic,movement) {
     const index = layers.findIndex(
         item =>
             item._imageryProvider._layers &&
@@ -949,6 +881,12 @@ function villageClick(layers, xy, level, cartographic) {
                                         ],
                                     };
                                     townZuowu.value = info; //保存数据
+
+                                    // 展示弹窗
+                                    showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
+                                    viewer.scene.postRender.addEventListener(
+                                        infoWindowPostRender
+                                    );
                                 }
                             }
                         }
@@ -1928,10 +1866,8 @@ function typesof() {
             tooltip: {
                 formatter: params => {
                     if (params.seriesName !== 'mouseoutSeries') {
-                        return `${
+                        return `${params.seriesName
-                            params.seriesName
+                            }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
-                        }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
-                            params.color
                             };"></span>${option.series[params.seriesIndex].pieData.value}`;
                     }
                 },
@@ -3086,7 +3022,7 @@ function infoWindowPostRender() {
 // 隐藏弹窗
 function hiddenOverlayChart() {
     // 移除各种高亮
-    XZDM = '';
+    // XZDM = '';
     XZQDM = '';
     removeWms(['village_CQL']);
     // removeWms(['aaa']);
@@ -3131,9 +3067,11 @@ $height: calc(100vh - 100px);
 .center {
     width: 100%;
     height: 100%;
+
     .imgrotate {
         transform: rotate(180deg);
     }
+
     .title {
         width: 100%;
         height: 45px;
@@ -3155,11 +3093,9 @@ $height: calc(100vh - 100px);
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
-            background: linear-gradient(
+            background: linear-gradient(180deg,
-                180deg,
                     rgba(255, 255, 255, 1) 33.33%,
-                rgba(41, 255, 219, 1) 100%
+                    rgba(41, 255, 219, 1) 100%);
-            );
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
@@ -3169,11 +3105,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;
@@ -3191,6 +3125,7 @@ $height: calc(100vh - 100px);
     background: rgba(2, 31, 26, 0.85);
     box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
     transition: transform 1s;
+
     .leftFoldDiv {
         width: 30px;
         height: 30px;
@@ -3201,6 +3136,7 @@ $height: calc(100vh - 100px);
         font-size: 30px;
         color: #ccc;
     }
+
     .leftTop {
         width: 100%;
         display: flex;
@@ -3261,11 +3197,9 @@ $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;
@@ -3310,6 +3244,7 @@ $height: calc(100vh - 100px);
     background: rgba(2, 31, 26, 0.85);
     box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
     transition: transform 1s;
+
     .rightFoldDiv {
         width: 30px;
         height: 30px;
@@ -3320,6 +3255,7 @@ $height: calc(100vh - 100px);
         font-size: 30px;
         color: #ccc;
     }
+
     .rightTop {
         width: 100%;
         height: 40%;
@@ -3535,14 +3471,14 @@ $height: calc(100vh - 100px);
         }
     }
 }
+
 .back_button {
     position: absolute;
     right: 30%;
     top: 20px;
 }
 
-:deep(.el-select__popper.el-popper) {
+:deep(.el-select__popper.el-popper) {}
-}
 </style>
 <style lang="scss">
 .select_city {

src/views/crops/output/wheat/index.vue

@@ -206,7 +206,7 @@
 import { ref, onMounted, inject, reactive, watch } from 'vue';
 import * as echarts from 'echarts';
 import TimeLine from '@/components/TimeLine/TimeLine.vue';
-import * as turf from '@turf/turf';
+// import * as turf from '@turf/turf';
 import { useEcharts } from '@/hooks/useEcharts';
 import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
 import axios from 'axios';

src/views/crops/site/index.vue

@@ -269,7 +269,7 @@
 import { ref, onMounted, inject, reactive, watch } from 'vue';
 import * as echarts from 'echarts';
 import TimeLine from '@/components/TimeLine/TimeLine.vue';
-import * as turf from '@turf/turf';
+// import * as turf from '@turf/turf';
 import { useEcharts } from '@/hooks/useEcharts';
 import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
 import axios from 'axios';

src/views/index.vue

@@ -211,7 +211,7 @@
 import { ref, onMounted, inject, reactive, watch } from 'vue';
 import * as echarts from 'echarts';
 import TimeLine from '@/components/TimeLine/TimeLine.vue';
-import * as turf from '@turf/turf';
+// import * as turf from '@turf/turf';
 import { useEcharts } from '@/hooks/useEcharts';
 import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
 import axios from 'axios';

src/views/plough/resources/index.vue

@@ -175,7 +175,7 @@
 import { ref, onMounted, inject, reactive, watch } from 'vue';
 import * as echarts from 'echarts';
 import TimeLine from '@/components/TimeLine/TimeLine.vue';
-import * as turf from '@turf/turf';
+// import * as turf from '@turf/turf';
 import { useEcharts } from '@/hooks/useEcharts';
 import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
 import axios from 'axios';