From 51f754a51d6c27aac33ba7dc7b1129123f95894f Mon Sep 17 00:00:00 2001
From: unknown <2414074862@qq.com>
Date: Mon, 24 Apr 2023 11:16:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E7=B1=BB=E6=A0=87=E5=87=86=E5=86=9C?=
 =?UTF-8?q?=E7=94=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/crops/classify/index.vue | 947 ++++++++++++++---------------
 1 file changed, 472 insertions(+), 475 deletions(-)

diff --git a/src/views/crops/classify/index.vue b/src/views/crops/classify/index.vue
index 4594f0b..ef6823e 100644
--- a/src/views/crops/classify/index.vue
+++ b/src/views/crops/classify/index.vue
@@ -17,10 +17,7 @@
                     <span>作物类型统计-高标准农田</span>
                     <p>
                         下载 &nbsp;
-                        <img
-                            src="@/assets/icons/svg/downloads.svg"
-                            style="width: 14px; height: 14px; cursor: pointer"
-                        />
+                        <img 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
-                            src="@/assets/icons/svg/downloads.svg"
-                            style="width: 14px; height: 14px; cursor: pointer"
-                        />
+                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
                     </p>
                 </div>
-                <el-select
-                    popper-class="select_city"
-                    @change="selectTab(item)"
-                    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 popper-class="select_city" @change="selectTab(item)" 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
-                            v-for="(value, item, key) in dic"
-                            :key="key"
-                            :style="{
+                        <el-checkbox 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('checkList:', checkList.value);
+    // console.log('e:', e, a);
     // 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,105 +442,244 @@ function layerClick() {
                 let alti = viewer.camera.positionCartographic.height;
                 let level = getLevel(alti);
                 const layers = viewer.imageryLayers._layers;
-                console.log('layers:', layers);
-                // 筛选出种植结构的最后一个图层
-                // let newLayer = layers.filter(item => {
-                //     const index = Object.values(layersDic).findIndex(it => item._imageryProvider._layers && it === item._imageryProvider._layers)
-                //     if (index > -1) {
-                //         return item
-                //     }
-                // })
-                let newData = [];
-                let promise = layers.map(async item => {
-                    console.log('item');
-                    if (item._imageryProvider._layers) {
-                        // 是种植结构图层
-                        if (
-                            Object.values(layersDic).findIndex(
-                                it => it === item._imageryProvider._layers
-                            ) > -1
-                        ) {
-                            const 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) {
-                                    await promise.then(data => {
-                                        if (data.length > 0) {
-                                            let info = data['0'].properties;
-                                            console.log('info:', info);
-                                            const ind = newData.findIndex(
-                                                ii => ii && ii.crop === info.crop
+                // 获取镇的图层 （点击镇后，再点击种植结构）
+                const index = layers.findIndex(
+                    item =>
+                        item._imageryProvider._layers &&
+                        item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
+                );
+                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'
                                             );
-                                            if (ind < 0) {
-                                                console.log('push:', info);
-                                                newData.push(info);
-                                                console.log('newData:', newData);
-                                            }
+                                            // 移除以前的
+                                            removeWms(['village_CQL']);
+                                            // 添加新的
+                                            addvillage(
+                                                `XZDM=${newData.properties.XZDM}`,
+                                                'village_CQL'
+                                            );
+                                            // 隐藏pop
+                                            hiddenOverlayChart();
+                                        } else {//已经点击了镇了，开始监测是否点击作物了
+                                            zuowuClick(layers, cartographic, level, xy, movement)
                                         }
-                                    });
+                                    } else {
+                                        removeWms(['village_CQL']);
+                                    }
                                 }
-                            }
+                            });
                         }
                     }
-                });
-                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(
-                            6
-                        );
-                        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'],
-                            lon: longitudeString,
-                            lat: latitudeString,
-                        };
-                    }
-                    showOverlayChart(coordinate); // 添加地图移动监听：使地图移动弹窗跟着移动
-                    viewer.scene.postRender.addEventListener(infoWindowPostRender);
                 } else {
-                    hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
+                    // 直接种植结构
+                    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 => {
+        if (item._imageryProvider._layers) {
+            // 是种植结构图层
+            if (Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1) {
+                const 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) {
+                        await promise.then(data => {
+                            if (data.length > 0) {
+                                // 移除高亮
+                                deleteEntityByName('landtype');
+                                // 高亮边界
+                                addBoundaryHandle(
+                                    data['0'].data.geometry.coordinates,
+                                    'landtype',
+                                    'red'
+                                );
+                                let info = data['0'].properties;
+                                const ind = newData.findIndex(
+                                    ii => ii && ii.crop === info.crop
+                                );
+                                if (ind < 0) {
+                                    newData.push(info);
+                                }
+                            }
+                        });
+                    }
+                }
+            }
+        }
+    });
+    await Promise.all(promise);
+    if (newData.length > 0) {
+        const coordinate = movement.position; //屏幕坐标 // 转为经纬度，保存，用于监听时转换坐标
+        var ellipsoid = viewer.scene.globe.ellipsoid; // 将屏幕坐标转为地理坐标
+        var cartesian = viewer.camera.pickEllipsoid(coordinate, ellipsoid);
+        if (cartesian) {
+            let cartographic = ellipsoid.cartesianToCartographic(cartesian);
+            let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(
+                6
+            );
+            let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(
+                6
+            );
+            clickInfoMap.value = {
+                info: newData,
+                // ...newData['0'],
+                lon: longitudeString,
+                lat: latitudeString,
+            };
+        }
+        showOverlayChart(coordinate); // 添加地图移动监听：使地图移动弹窗跟着移动
+        viewer.scene.postRender.addEventListener(infoWindowPostRender);
+    } else {
+        hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
+    }
+}
+
+// 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,168 +835,169 @@ const selectTab = () => {
 
 //图表
 function areachar() {
-    const areaDivIntance = echarts.init(areaDiv.value);
+    if (areaDiv.value) {
+        const areaDivIntance = echarts.init(areaDiv.value);
 
-    let option = {
-        // backgroundColor: 'rgba(255, 255, 255, 0.1)',
-        textStyle: {
-            color: '#c0c3cd',
-            fontSize: 14,
-        },
-        toolbox: {
-            show: false,
-            feature: {
-                saveAsImage: {
-                    backgroundColor: '#031245',
-                },
-                restore: {},
-            },
-            iconStyle: {
-                borderColor: '#c0c3cd',
-            },
-        },
-        legend: {
-            top: 10,
-            itemWidth: 8,
-            itemHeight: 8,
-            icon: 'circle',
-            left: 'center',
-            padding: 0,
+        let option = {
+            // backgroundColor: 'rgba(255, 255, 255, 0.1)',
             textStyle: {
                 color: '#c0c3cd',
                 fontSize: 14,
-                padding: [2, 0, 0, 0],
             },
-            border: '1px solid rgba(4, 153, 153, 1)',
-        },
-        color: ['#00D7E9', 'rgba(0, 215, 233, 0.9)'],
-        grid: {
-            containLabel: true,
-            left: 20,
-            right: 20,
-            bottom: 10,
-            top: 40,
-        },
-        xAxis: [
-            {
-                type: 'category',
-                data: ['小麦', '玉米', '大豆', '花生', '蓝莓'],
-                axisLine: {
-                    lineStyle: {
-                        color: '#C0C4CC',
-                        width: 1,
+            toolbox: {
+                show: false,
+                feature: {
+                    saveAsImage: {
+                        backgroundColor: '#031245',
+                    },
+                    restore: {},
+                },
+                iconStyle: {
+                    borderColor: '#c0c3cd',
+                },
+            },
+            legend: {
+                top: 10,
+                itemWidth: 8,
+                itemHeight: 8,
+                icon: 'circle',
+                left: 'center',
+                padding: 0,
+                textStyle: {
+                    color: '#c0c3cd',
+                    fontSize: 14,
+                    padding: [2, 0, 0, 0],
+                },
+                border: '1px solid rgba(4, 153, 153, 1)',
+            },
+            color: ['#00D7E9', 'rgba(0, 215, 233, 0.9)'],
+            grid: {
+                containLabel: true,
+                left: 20,
+                right: 20,
+                bottom: 10,
+                top: 40,
+            },
+            xAxis: [
+                {
+                    type: 'category',
+                    data: ['小麦', '玉米', '大豆', '花生', '蓝莓'],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#C0C4CC',
+                            width: 1,
+                        },
+                    },
+                    axisTick: {
+                        show: false,
+                    },
+                    axisLabel: {
+                        margin: 10,
+                        color: 'rgba(255, 255, 255, 0.7)',
+                        textStyle: {
+                            fontSize: 14,
+                        },
                     },
                 },
-                axisTick: {
-                    show: false,
+            ],
+            yAxis: {
+                nameTextStyle: {
+                    color: '#c0c3cd',
+                    padding: [0, 0, 0, 0],
+                    fontSize: 14,
                 },
                 axisLabel: {
-                    margin: 10,
-                    color: 'rgba(255, 255, 255, 0.7)',
-                    textStyle: {
-                        fontSize: 14,
+                    color: '#c0c3cd',
+                    fontSize: 14,
+                },
+                axisTick: {
+                    lineStyle: {
+                        color: '#668092',
+                        width: 1,
                     },
+                    show: false,
                 },
-            },
-        ],
-        yAxis: {
-            nameTextStyle: {
-                color: '#c0c3cd',
-                padding: [0, 0, 0, 0],
-                fontSize: 14,
-            },
-            axisLabel: {
-                color: '#c0c3cd',
-                fontSize: 14,
-            },
-            axisTick: {
-                lineStyle: {
-                    color: '#668092',
-                    width: 1,
-                },
-                show: false,
-            },
-            splitLine: {
-                show: true,
-                lineStyle: {
-                    color: 'rgba(255, 255, 255, 0.7)',
-                    type: 'dashed',
-                },
-            },
-            axisLine: {
-                lineStyle: {
-                    color: 'rgba(255, 255, 255, 0.7)',
-                    width: 1,
-                    // "type": "dashed"
-                },
-                show: false,
-            },
-            name: '面积(亩)',
-        },
-        series: [
-            {
-                data: classData,
-                type: 'bar',
-                barMaxWidth: 'auto',
-                barWidth: 30,
-                itemStyle: {
-                    color: {
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        type: 'linear',
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: ' rgba(0, 208, 255, 0.1)',
-                            },
-
-                            {
-                                offset: 1,
-                                color: 'rgba(0, 208, 255, 0.9) ',
-                            },
-                        ],
-                    },
-                    borderWidth: 1,
-                    borderColor: 'black',
-                },
-
-                label: {
+                splitLine: {
                     show: true,
-                    position: 'top',
-                    distance: 10,
-                    color: '#fff',
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.7)',
+                        type: 'dashed',
+                    },
                 },
+                axisLine: {
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.7)',
+                        width: 1,
+                        // "type": "dashed"
+                    },
+                    show: false,
+                },
+                name: '面积(亩)',
             },
-            {
-                data: [1, 1, 1, 1, 1],
-                type: 'pictorialBar',
-                barMaxWidth: '20',
-                symbol: 'diamond',
-                symbolOffset: [0, '50%'],
-                symbolSize: [30, 15],
-            },
-            {
-                data: classData,
-                type: 'pictorialBar',
-                barMaxWidth: '20',
+            series: [
+                {
+                    data: classData,
+                    type: 'bar',
+                    barMaxWidth: 'auto',
+                    barWidth: 30,
+                    itemStyle: {
+                        color: {
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            type: 'linear',
+                            colorStops: [
+                                {
+                                    offset: 0,
+                                    color: ' rgba(0, 208, 255, 0.1)',
+                                },
 
-                symbolPosition: 'end',
-                symbol: 'diamond',
-                symbolOffset: [0, '-50%'],
-                symbolSize: [30, 12],
-                zlevel: 2,
-            },
-        ],
-        tooltip: {
-            show: true,
-            formatter: '面积:{c0}',
-        },
-    };
+                                {
+                                    offset: 1,
+                                    color: 'rgba(0, 208, 255, 0.9) ',
+                                },
+                            ],
+                        },
+                        borderWidth: 1,
+                        borderColor: 'black',
+                    },
 
-    // option && areaDivIntance.setOption(option);
-    useEcharts(areaDivIntance, option);
+                    label: {
+                        show: true,
+                        position: 'top',
+                        distance: 10,
+                        color: '#fff',
+                    },
+                },
+                {
+                    data: [1, 1, 1, 1, 1],
+                    type: 'pictorialBar',
+                    barMaxWidth: '20',
+                    symbol: 'diamond',
+                    symbolOffset: [0, '50%'],
+                    symbolSize: [30, 15],
+                },
+                {
+                    data: classData,
+                    type: 'pictorialBar',
+                    barMaxWidth: '20',
+
+                    symbolPosition: 'end',
+                    symbol: 'diamond',
+                    symbolOffset: [0, '-50%'],
+                    symbolSize: [30, 12],
+                    zlevel: 2,
+                },
+            ],
+            tooltip: {
+                show: true,
+                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,11 +1190,9 @@ function typesof() {
             tooltip: {
                 formatter: params => {
                     if (params.seriesName !== 'mouseoutSeries') {
-                        return `${
-                            params.seriesName
-                        }<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 `${params.seriesName
+                            }<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(
-                180deg,
-                rgba(16, 111, 111, 1) 0%,
-                rgba(47, 214, 214, 1) 100%
-            );
+            background: linear-gradient(180deg,
+                    rgba(16, 111, 111, 1) 0%,
+                    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>