分类标准农田

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);
@@ -143,7 +120,7 @@
                 </div>
                 <div class="rowWra">
                     <span>面积：</span>
-                    <span>{{ item.Shape_Area }}</span>
+                    <span>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</span>
                 </div>
                 <div class="rowWra">
                     <span>镇名：</span>
@@ -170,6 +147,7 @@ import 'echarts-gl';
 import TimeLine from '@/components/TimeLine/TimeLine.vue';
 import { useEcharts } from '@/hooks/useEcharts';
 import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
+import axios from 'axios';
 
 let viewer = ref(null);
 const areaDiv = ref(null);
@@ -238,6 +216,11 @@ const options = [
 ];
 // 组件挂载完成后执行
 onMounted(() => {
+    initonMounted()
+    // checkList.value = Object.keys(dic.filter(item => !item.disabled))
+});
+// 初始化
+function initonMounted() {
     getaArea(); //面积
     getTownships();
     getvillages(); //村
@@ -247,10 +230,9 @@ onMounted(() => {
     farmland(); //图表
     ASdivision(); //图表
     getArea(); //请求
-
+    getFarmland()
     checkList.value = Object.keys(dic);
-    // checkList.value = Object.keys(dic.filter(item => !item.disabled))
+}
-});
 const mapOption = {
     url:
         'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
@@ -325,170 +307,19 @@ function initMap() {
     // 去除logo
     viewer.cesiumWidget.creditContainer.style.display = 'none';
 
-    //加载地图服务
-    let map = new Cesium.WebMapServiceImageryProvider({
-        url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
-        layers: 'shuzisannong:huangdaoqu_town', //图层名
-        parameters: {
-            service: 'WMS',
-            format: 'image/png',
-            transparent: true, //是否透明
-        },
-    });
-    viewer.imageryLayers.addImageryProvider(map);
 
     viewer.camera.flyTo({
         destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
         duration: 2,
     });
 
-    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
-    handler.setInputAction(function (movement) {
-        var ray = viewer.camera.getPickRay(movement.position);
-        var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
-        if (cartesian) {
-            let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
-            if (cartographic) {
-                let xy = new Cesium.Cartesian2();
-                let alti = viewer.camera.positionCartographic.height;
-                let level = getLevel(alti);
-                const layers = viewer.imageryLayers._layers;
-                let providerPoint = null;
-                layers.forEach(item => {
-                    if (item._imageryProvider._layers == 'shuzisannong:huangdaoqu_town') {
-                        providerPoint = item;
-                    }
-                });
-                // 拿取最后一个图层
-                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) {
-                            }
-                        });
-                    }
-                }
-            }
-        }
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
-    // addwms();
     // 图层点击事件
     layerClick();
+    // 添加镇级矢量
+    addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town')
 
-    //加载黄岛区村级地图服务
-    // Cesium.GeoJsonDataSource.load(
-    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_village&maxFeatures=1180&outputFormat=application%2Fjson',
-    //     {
-    //         stroke: Cesium.Color.fromCssColorString('red'), //轮廓颜色
-    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
-    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
-    //     }
-    // ).then(function (dataSource) {
-    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
-    //     viewer.dataSources.add(dataSource); //添加
-    //     viewer.flyTo(dataSource, {
-    //         duration: 5,
-    //         offset: {
-    //             heading: 0.0,
-    //             pitch: -90, //保持垂直视角
-    //         },
-    //     }); //移动到该位置
-    // });
-    //加载黄岛区镇级地图服务
-    // Cesium.GeoJsonDataSource.load(
-    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
-    //     {
-    //         stroke: Cesium.Color.fromCssColorString('#fff'), //轮廓颜色
-    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
-    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
-    //     }
-    // ).then(function (dataSource) {
-    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
-    //     viewer.dataSources.add(dataSource); //添加
-    //     viewer.flyTo(dataSource, {
-    //         duration: 5,
-    //         offset: {
-    //             heading: 0.0,
-    //             pitch: -90, //保持垂直视角
-    //         },
-    //     }); //移动到该位置
-    // });
 
-    // axios({
-    //     method: 'get',
-    //     url: 'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
-    // })
-    //     .then(res => {
-    //         res.data.features.forEach(item => {
-    //             addBoundaryHandle(item.geometry.coordinates, '');
-    //         });
-    //     })
-    //     .catch(error => {});
-
-    //作物分类面积提取地图服务
-    // let map2 = new Cesium.WebMapServiceImageryProvider({
-    //     url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
-    //     layers: 'shuzisannong:fenlei', //图层名
-    //     parameters: {
-    //         service: 'WMS',
-    //         format: 'image/png',
-    //         CQL_FILTER: `crop=${city_code}`,
-    //         transparent: true, //是否透明
-    //     },
-    // });
-    // viewer.imageryLayers.addImageryProvider(map2);
-
-    // Cesium.GeoJsonDataSource.load(
-    //     'http://121.36.229.60:9080/geoserver/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=50&outputFormat=application%2Fjson',
-    //     {
-    //         stroke: Cesium.Color.fromCssColorString('rgba(165,214,63,1)'), //轮廓颜色
-    //         fill: Cesium.Color.fromCssColorString('rgba(0,0,0,0.1)'), //内部颜色
-    //         strokeWidth: 3, //轮廓宽度    clampToGround: true,//是否贴地
-    //     }
-    // ).then(function (dataSource) {
-    //     // dataSource.name = 'geojsonDataSource'//自定义属性，方便以后操作
-    //     viewer.dataSources.add(dataSource); //添加
-    //     viewer.flyTo(dataSource, {
-    //         duration: 5,
-    //         offset: {
-    //             heading: 0.0,
-    //             pitch: -90, //保持垂直视角
-    //         },
-    //     }); //移动到该位置
-    // });
-    //全球注记
-    // let zhujiLayer = new Cesium.WebMapTileServiceImageryProvider({
-    //     url: 'http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=5956e6519f2bb0ae8e57bc834298c9f1',
-    //     layer: 'tdtImgBasicLayer',
-    //     style: 'default',
-    //     format: 'image/jpeg',
-    //     tileMatrixSetID: 'GoogleMapsCompatible',
-    //     show: false,
-    // });
-    // viewer.imageryLayers.addImageryProvider(zhujiLayer);
-
-    // viewer.camera.flyTo(
-    //     {
-    //         destination: new Cesium.Cartesian3.fromDegrees(104.9, 36.35, 8000000),
-    //         duration: 0,
-    //     },
-    //     {
-    //         offset: {
-    //             heading: Cesium.Math.toRadians(0.0),
-    //             pitch: Cesium.Math.toRadians(-25),
-    //         },
-    //     }
-    // );
 }
 
 const checkList = ref([]);
@@ -536,12 +367,12 @@ function getLevel(height) {
 }
 
 function change(e, a) {
-    console.log('e:', e, a);
+    // console.log('e:', e, a);
-    // console.log('checkList:', checkList.value);
     // removeWms('crop');
     // addwms();
 }
 
+// 农作物
 watch(
     () => checkList.value,
     (val, oldVal) => {
@@ -555,7 +386,7 @@ watch(
             });
             newData.forEach(item => {
                 if (layersDic[item]) {
-                    addLayerWms(layersDic[item], item);
+                    addWms(layersDic[item], item + 'zuowu');
                 }
             });
         } else if (val.length < oldVal.length) {
@@ -568,47 +399,16 @@ watch(
             });
             newData.forEach(item => {
                 if (layersDic[item]) {
-                    removeWms(item);
+                    removeWms([item + 'zuowu']);
                 }
             });
         }
     }
 );
-watch(
+
-    () => clickInfoMap.value,
+
-    val => {
-        console.log('valvalvalvalvalvalvalvalvalval:', val);
-    }
-);
-// 根据name移除wms
-function removeWms(name) {
-    // 倒叙遍历，customName是自定义的属性
-    // let viewer = viewers.value
-    const layers = viewer.imageryLayers._layers;
-    for (let f = layers.length - 1; f >= 0; f--) {
-        if (layers[f]._imageryProvider.customName === name) {
-            viewer.imageryLayers.remove(layers[f]);
-        }
-    }
-}
-function addwms() {
-    // let viewer = viewers.value
-    const name = "'" + checkList.value.join("','") + "'";
-    let map = new Cesium.WebMapServiceImageryProvider({
-        url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms?`,
-        layers: 'shuzisannong:fenlei', //图层名
-        parameters: {
-            service: 'WMS',
-            format: 'image/png',
-            transparent: true, //是否透明
-            CQL_FILTER: `crop in (${name})`,
-        },
-    });
-    map.customName = 'crop'; //自己定义各种属性
-    viewer.imageryLayers.addImageryProvider(map); //添加图层
-}
 // 添加wms
-function addLayerWms(layers, customName) {
+function addWms(layers, customName) {
     let map = new Cesium.WebMapServiceImageryProvider({
         url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
         layers: layers, //图层名
@@ -620,9 +420,16 @@ function addLayerWms(layers, customName) {
         },
     });
     map.customName = customName; //自己定义各种属性
-    viewer.imageryLayers.addImageryProvider(map); //添加图层
+    let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
+    if (customName.indexOf('gbznt') > -1) {
+        console.log('dididididi')
+        // viewer.imageryLayers.lower(dd);//将图层下移一层
+        viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
+        viewer.imageryLayers.raise(dd); //将图层上移一层
+    }
 }
 // 图层点击事件
+let XZDM = ''
 function layerClick() {
     var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
     handler.setInputAction(async function (movement) {
@@ -635,32 +442,92 @@ 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(
-                // let newLayer = layers.filter(item => {
+                    item =>
-                //     const index = Object.values(layersDic).findIndex(it => item._imageryProvider._layers && it === item._imageryProvider._layers)
+                        item._imageryProvider._layers &&
-                //     if (index > -1) {
+                        item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
-                //         return item
+                );
-                //     }
+                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(async data => {
+                                if (data.length > 0) {
+                                    let newData = data['0'];
+                                    if (newData.properties && newData.properties.XZDM) {
+                                        if (XZDM !== newData.properties.XZDM) {
+                                            //防止
+                                            XZDM = newData.properties.XZDM;
+                                            value.value = XZDM; //
+                                            // selectTab(); //
+                                            let item = newData.data;
+                                            // 定位
+                                            viewer.camera.flyTo({
+                                                destination: Cesium.Rectangle.fromDegrees(
+                                                    item.bbox[0],
+                                                    item.bbox[1],
+                                                    item.bbox[2],
+                                                    item.bbox[3]
+                                                ),
+                                                duration: 2,
+                                            });
+                                            // 移除高亮
+                                            deleteEntityByName('townLine');
+                                            // 高亮边界
+                                            addBoundaryHandle(
+                                                item.geometry.coordinates,
+                                                'townLine',
+                                                'red'
+                                            );
+                                            // 移除以前的
+                                            removeWms(['village_CQL']);
+                                            // 添加新的
+                                            addvillage(
+                                                `XZDM=${newData.properties.XZDM}`,
+                                                'village_CQL'
+                                            );
+                                            // 隐藏pop
+                                            hiddenOverlayChart();
+                                        } else {//已经点击了镇了，开始监测是否点击作物了
+                                            zuowuClick(layers, cartographic, level, xy, movement)
+                                        }
+                                    } else {
+                                        removeWms(['village_CQL']);
+                                    }
+                                }
+                            });
+                        }
+                    }
+                } else {
+                    // 直接种植结构
+                    zuowuClick(layers, cartographic, level, xy, movement)
+                }
+            }
+        }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+}
+// 种植结构
+async function zuowuClick(layers, cartographic, level, xy, movement) {
     let newData = [];
     let promise = layers.map(async item => {
-                    console.log('item');
         if (item._imageryProvider._layers) {
             // 是种植结构图层
-                        if (
+            if (Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1) {
-                            Object.values(layersDic).findIndex(
-                                it => it === item._imageryProvider._layers
-                            ) > -1
-                        ) {
                 const providerPoint = item;
                 // 拿取最后一个图层
                 let provider = providerPoint._imageryProvider;
-                            if (
+                if (provider && provider.ready && provider._layers && providerPoint.show === true
-                                provider &&
-                                provider.ready &&
-                                provider._layers &&
-                                providerPoint.show === true
                 ) {
                     xy = provider.tilingScheme.positionToTileXY(
                         cartographic,
@@ -677,15 +544,20 @@ function layerClick() {
                     if (promise) {
                         await promise.then(data => {
                             if (data.length > 0) {
+                                // 移除高亮
+                                deleteEntityByName('landtype');
+                                // 高亮边界
+                                addBoundaryHandle(
+                                    data['0'].data.geometry.coordinates,
+                                    'landtype',
+                                    'red'
+                                );
                                 let info = data['0'].properties;
-                                            console.log('info:', info);
                                 const ind = newData.findIndex(
                                     ii => ii && ii.crop === info.crop
                                 );
                                 if (ind < 0) {
-                                                console.log('push:', info);
                                     newData.push(info);
-                                                console.log('newData:', newData);
                                 }
                             }
                         });
@@ -695,12 +567,10 @@ function layerClick() {
         }
     });
     await Promise.all(promise);
-                console.log('newDatanewDatanewDatanewDatanewData:', newData);
     if (newData.length > 0) {
         const coordinate = movement.position; //屏幕坐标 // 转为经纬度，保存，用于监听时转换坐标
         var ellipsoid = viewer.scene.globe.ellipsoid; // 将屏幕坐标转为地理坐标
         var cartesian = viewer.camera.pickEllipsoid(coordinate, ellipsoid);
-                    console.log('cartesian:', cartesian);
         if (cartesian) {
             let cartographic = ellipsoid.cartesianToCartographic(cartesian);
             let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(
@@ -709,11 +579,6 @@ function layerClick() {
             let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(
                 6
             );
-                        console.log('longitudeString:', longitudeString);
-                        // newData.lon = longitudeString;
-                        // newData.lat = latitudeString; /*保存（弹窗）的数据*/
-
-                        console.log('data:', newData);
             clickInfoMap.value = {
                 info: newData,
                 // ...newData['0'],
@@ -726,14 +591,95 @@ function layerClick() {
     } else {
         hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
     }
-            }
-        }
-    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 }
+
+// data数据数组
+// name实体名称，方便以后删除
+// color实体颜色
+function addBoundaryHandle(data, name, color) {
+    data.forEach(item => {
+        let arr = [];
+        item[0].forEach(mem => {
+            arr.push(mem[0]);
+            arr.push(mem[1]);
+        });
+        viewer.entities.add({
+            name: name,
+            polyline: {
+                positions: Cesium.Cartesian3.fromDegreesArray(arr),
+                width: 6,
+                // material: new Cesium.PolylineDashMaterialProperty({//虚线
+                material: new Cesium.PolylineGlowMaterialProperty({
+                    //光晕
+                    glowPower: 0.2,
+                    color: color
+                        ? Cesium.Color.fromCssColorString(color)
+                        : Cesium.Color.fromBytes(250, 128, 114), //#FA8072
+                }),
+                // followSurface: false, //是否贴着地表
+                clampToGround: true, //贴地
+            },
+        });
+    });
+}
+// 添加村
+// CQL_FILTER:筛选的语句
+// customName地图服务自定义属性名
+function addvillage(CQL_FILTER, customName) {
+    let map2 = new Cesium.WebMapServiceImageryProvider({
+        url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms`,
+        layers: 'shuzisannong:huangdaoqu_village', //图层名
+        parameters: {
+            service: 'WMS',
+            format: 'image/png',
+            transparent: true, //是否透明
+            // CQL_FILTER: `XZDM=${value.value}`,
+            CQL_FILTER: CQL_FILTER,
+        },
+    });
+    map2.customName = customName;
+    viewer.imageryLayers.addImageryProvider(map2);
+}
+// 移除wms
+// nameArry ：属性名数组（customName）
+// isMohu ：是否模糊查询
+function removeWms(nameArry, isMohu) {
+    if (viewer) {
+        // 倒叙遍历，customName是自定义的属性
+        const layers = viewer.imageryLayers._layers;
+        for (let f = layers.length - 1; f >= 0; f--) {
+            nameArry.forEach(item => {
+                if (layers[f] && layers[f]._imageryProvider && layers[f]._imageryProvider.customName) {
+                    if (isMohu) {
+                        if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
+                            viewer.imageryLayers.remove(layers[f]);
+                        }
+                    } else {
+                        if (layers[f]._imageryProvider.customName === item) {
+                            viewer.imageryLayers.remove(layers[f]);
+                        }
+                    }
+                }
+            });
+        }
+    }
+}
+
+// 根据实体名字删除实体(模糊删除)
+function deleteEntityByName(name) {
+    if (viewer) {
+        let entitys = viewer.entities._entities._array;
+        for (var na = entitys.length - 1; na >= 0; na--) {
+            if (entitys[na]._name && entitys[na]._name === name) {
+                viewer.entities.remove(entitys[na]);
+            }
+        }
+    }
+}
+
 // 地图移动时弹窗跟随
 function infoWindowPostRender() {
     // let viewer = viewers.value;
-    // console.log('clickInfoMap.value:', clickInfoMap.value);
     if (clickInfoMap.value && clickInfoMap.value.lon && clickInfoMap.value.lat) {
         //经纬度转为世界坐标
         const gisPosition = Cesium.Cartesian3.fromDegrees(
@@ -762,7 +708,6 @@ function hiddenOverlayChart() {
 }
 //显示弹窗
 function showOverlayChart(position) {
-    console.log('显示');
     const pop = document.getElementById('popup1');
     pop.style.display = 'block';
     pop.style.position = 'absolute';
@@ -770,7 +715,15 @@ function showOverlayChart(position) {
     pop.style.left = position.x + 10 + 'px';
     pop.style.zIndex = 99;
 }
-
+// 获取高标准农田
+function getFarmland() {
+    axios({
+        url: serverAPI.geoserverUrl + '/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afarmland&maxFeatures=50&outputFormat=application%2Fjson',
+        method: 'get'
+    }).then(res => {
+        console.log('农田：', res)
+    }).catch(err => { })
+}
 //接口
 const getArea = (item, index) => {
     return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => {
@@ -809,6 +762,7 @@ const getaArea = () => {
     let arr = [];
     let a = {};
     getareas().then(res => {
+        console.log('res:', res)
         Township.crr = res.features;
         data.title.forEach((item, indexs) => {
             let town = res.features.map(i => {
@@ -881,6 +835,7 @@ const selectTab = () => {
 
 //图表
 function areachar() {
+    if (areaDiv.value) {
         const areaDivIntance = echarts.init(areaDiv.value);
 
         let option = {
@@ -1040,9 +995,9 @@ function areachar() {
                 formatter: '面积:{c0}',
             },
         };
-
         // option && areaDivIntance.setOption(option);
         useEcharts(areaDivIntance, option);
+    }
 }
 
 function typesof() {
@@ -1197,7 +1152,6 @@ function typesof() {
         }
         // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
         // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
-        console.log(series);
         for (let i = 0; i < series.length; i += 1) {
             endValue = startValue + series[i].pieData.value;
 
@@ -1236,10 +1190,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}`;
                     }
                     return '';
@@ -1409,7 +1361,6 @@ function typesof() {
     typesofDivIntance.on('globalout', function () {
         handleOut();
     });
-    console.log(option);
     let seriesIndex = 0;
     setInterval(() => {
         handleOver({ seriesIndex: seriesIndex });
@@ -1422,7 +1373,7 @@ function typesof() {
     // option && typesofDivIntance.setOption(option);
     useEcharts(typesofDivIntance, option);
 }
-
+// 高标准农田echarts
 function farmland() {
     const farmlandDivIntance = echarts.init(farmlandDiv.value);
     var option = {
@@ -1611,7 +1562,7 @@ function farmland() {
                         ],
                     },
                 },
-                data: [1,2,4], // 系列中的数据内容数组
+                data: [1, 2, 4], // 系列中的数据内容数组
             },
             {
                 type: 'bar', // 系列类型
@@ -1729,8 +1680,20 @@ function farmland() {
             },
         ],
     };
+    // areaDivIntance.off('click') //图表渲染前销毁点击事件,防止点击图标多次触发
+    farmlandDivIntance.on("click", (param) => ChartClick(param));
     useEcharts(farmlandDivIntance, option);
 }
+// 图表点击事件
+function ChartClick() {
+    // 移除作物
+    removeWms(['huangdaoqu_town'], true);
+    let layername = 'shuzisannong:farmland'
+    // 添加高标准农田服务
+    addWms(layername, layername + 'gbznt');
+
+}
+
 function ASdivision() {
     const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
     var option = {
@@ -2037,9 +2000,15 @@ function ASdivision() {
             },
         ],
     };
+    ASdivisionDivIntance.on("click", (param) => ChartClickRB(param));
     // option && ASdivisionDivIntance.setOption(option, true);
     useEcharts(ASdivisionDivIntance, option);
 }
+// 右下角图表点击事件
+function ChartClickRB(param) {
+    console.log('右下点击', param)
+
+}
 </script>
 
 <style lang="scss" scoped>
@@ -2075,11 +2044,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;
@@ -2118,6 +2085,7 @@ $height: calc(100vh - 100px);
         display: flex;
         flex-direction: column;
         max-width: calc(100% - 7px);
+
         .typesofDiv {
             width: 100%;
             height: 267px;
@@ -2177,6 +2145,7 @@ $height: calc(100vh - 100px);
             background: rgba(22, 94, 102, 1);
             // border: 1px solid rgba(4, 153, 153, 1) !important;
             margin-top: 20px;
+
             :deep(.el-input__wrapper) {
                 background-color: transparent;
                 border-radius: 0;
@@ -2193,6 +2162,16 @@ $height: calc(100vh - 100px);
             height: 368px;
             opacity: 1;
         }
+
+        :deep(.el-select__popper) {
+            border: none !important;
+            background: transparent !important;
+        }
+
+        :deep(.el-popper) {
+            border: none !important;
+            background: transparent !important;
+        }
     }
 }
 
@@ -2202,6 +2181,7 @@ $height: calc(100vh - 100px);
     bottom: 7%;
     width: 129px;
     border: 1px solid rgba(4, 153, 153, 1);
+
     // height: 50px;
     :deep(.el-collapse-item__header) {
         background: rgba(2, 31, 26, 0.6);
@@ -2302,7 +2282,7 @@ $height: calc(100vh - 100px);
         display: flex;
         margin-bottom: 10px;
 
-        & > span:nth-child(1) {
+        &>span:nth-child(1) {
             font-weight: 400;
             letter-spacing: 0px;
             color: rgba(255, 255, 255, 1);
@@ -2313,7 +2293,7 @@ $height: calc(100vh - 100px);
             margin-right: 10px;
         }
 
-        & > span:nth-child(2) {
+        &>span:nth-child(2) {
             color: rgba(255, 255, 255, 1);
             width: 129px;
             height: 24px;
@@ -2341,12 +2321,29 @@ $height: calc(100vh - 100px);
 .select_city {
     background: rgba(2, 31, 26, 0.85);
     box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
+
     .el-select-dropdown__item.hover {
         background: rgba(2, 31, 26, 0.95);
         box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
     }
+
     .el-select-dropdown__item {
         color: #fff;
     }
 }
+
+.el-select__popper {
+    border: none !important;
+    background: transparent !important;
+}
+
+.el-popper {
+    border: none !important;
+    background: transparent !important;
+}
+
+.el-popper__arrow::before {
+    background: rgba(41, 255, 255, 0.7) !important;
+
+}
 </style>