标准农田

src/views/crops/classify/index.vue

@@ -17,10 +17,7 @@
                     <span>作物类型统计-高标准农田</span>
                     <p>
                         下载 &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>
@@ -31,25 +28,12 @@
                     <span>作物类型统计-行政区划</span>
                     <p>
                         下载 &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>
@@ -59,18 +43,11 @@
                 <template #title>图例</template>
                 <div class="mt-4">
                     <el-checkbox-group v-model="checkList" @change="change">
-                        <el-checkbox
+                        <el-checkbox v-for="(value, item, key) in dic" :key="key" :style="{
-                            v-for="(value, item, key) in dic"
-                            :key="key"
-                            :style="{
                                 background: value.color,
                                 border: `1px solid ${value.color}`,
                                 width: `100%`,
-                            }"
+                            }" v-model="checked3" :disabled="value.disabled" :label="item" />
-                            v-model="checked3"
-                            :disabled="value.disabled"
-                            :label="item"
-                        />
 
                         <!-- <el-checkbox style="
                                 background: rgba(251, 171, 60, 1);
@@ -734,6 +711,7 @@ function showOverlayChart(position) {
     pop.style.left = position.x + 10 + 'px';
     pop.style.zIndex = 99;
 }
+const formLandRef = ref([])
 // 获取高标准农田
 function getFarmland() {
     axios({
@@ -741,11 +719,10 @@ function getFarmland() {
             serverAPI.geoserverUrl +
             '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
         method: 'get',
-    })
+    }).then(res => {
-        .then(res => {
         console.log('农田：', res);
-        })
+        formLandRef.value = res.data.features
-        .catch(err => {});
+    }).catch(err => { });
 }
 //接口
 const getArea = (item, index) => {
@@ -1243,10 +1220,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>`;
                     }
                     return '';
@@ -1512,7 +1487,7 @@ function farmland() {
                 color: 'rgba(255, 255, 255, 1)',
                 fontSize: 14,
             },
-            data: ['片区一', '片区二', '片区三', '片区四', '片区五','片区六','片区七'],
+            data: ['片区1', '片区2', '片区3', '片区4', '片区5', '片区6', '片区7'],
         },
         series: [
             {
@@ -1589,13 +1564,44 @@ function farmland() {
     useEcharts(farmlandDivIntance, option);
 }
 // 图表点击事件
-function ChartClick() {
+function ChartClick(item) {
+    console.log('item:', item)
     // 移除作物
     removeWms(['huangdaoqu_town'], true);
     let layername = 'shuzisannong:farmland';
+
+    // 判断是否存在避免重复添加
+    let cz = false
+    const layers = viewer.imageryLayers._layers;
+    for (let f = layers.length - 1; f >= 0; f--) {
+        if (layers[f] && layers[f]._imageryProvider.customName && layers[f]._imageryProvider.customName === layername + 'gbznt') {
+            cz = true
+        }
+    }
+    if (!cz) {
         // 添加高标准农田服务
         addWms(layername, layername + 'gbznt');
     }
+    // 定位到地块
+    let features = formLandRef.value
+    features.forEach(it => {
+        console.log('it.properties.name:',it.properties.name)
+        console.log('item.name:',item.name)
+        if (it.properties.name === item.name) {
+            console.log('dingwei')
+            viewer.camera.flyTo({
+                destination: Cesium.Rectangle.fromDegrees(
+                    it.bbox[0],
+                    it.bbox[1],
+                    it.bbox[2],
+                    it.bbox[3]
+                ),
+                duration: 2,
+            });
+        }
+    })
+
+}
 
 function ASdivision() {
     const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
@@ -1946,11 +1952,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;
@@ -2152,7 +2156,10 @@ $height: calc(100vh - 100px);
 
 .bottom_center {
     position: absolute;
-    left: calc(400px + 20px + 8vw);
+    // left: calc(400px + 20px + 8vw);
+    left: 0;
+    right: 0;
+    margin: auto;
     width: calc(100% - (400px * 2) - (10vw * 2));
     min-width: 380px;
     bottom: 5%;