Agriculture-front-end/src/views/crops/classify/index.vue

<template>
    <div class="center">
        <div style="width: 100%; height: 100%" id="cesiumContainer"></div>
        <div class="leftWra">
            <div class="leftTop">
                <div class="title">
                    <span>作物分类面积统计</span>
                    <p>
                        下载 &nbsp;
                        <img
                            src="@/assets/icons/svg/downloads.svg"
                            style="width: 14px; height: 14px; cursor: pointer"
                        />
                    </p>
                </div>
                <div ref="areaDiv" class="areaDiv"></div>
            </div>
            <div class="leftbottom">
                <div class="title">
                    <span>作物类型统计</span>
                    <p>
                        下载 &nbsp;
                        <img
                            src="@/assets/icons/svg/downloads.svg"
                            style="width: 14px; height: 14px; cursor: pointer"
                        />
                    </p>
                </div>
                <div ref="typesofDiv" class="typesofDiv"></div>
            </div>
            <div class="leftFoldDiv" @click="leftFoldClick()">
                <el-icon><ArrowRightBold /></el-icon>
            </div>
        </div>
        <div class="rightWra">
            <div class="rightTop">
                <div class="title">
                    <span>作物类型统计-高标准农田</span>
                    <p>
                        下载 &nbsp;
                        <img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
                    </p>
                </div>
                <div ref="farmlandDiv" class="farmlandDiv"></div>
                <!-- <div ref="ProgressBarDiv" class="ProgressBar"></div> -->
            </div>
            <div class="rightbottom">
                <div class="title">
                    <span>作物类型统计-行政区划</span>
                    <p>
                        下载 &nbsp;
                        <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>
                <div ref="ASdivisionDiv" class="ASdivision"></div>
            </div>
            <div class="rightFoldDiv" @click="rightFoldClick()">
                <el-icon><ArrowLeftBold /></el-icon>
            </div>
        </div>
        <el-collapse class="legend" accordion>
            <el-collapse-item name="1">
                <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="{
                                background: value.color,
                                border: `1px solid ${value.color}`,
                                width: `100%`,
                            }" v-model="checked3" :disabled="value.disabled" :label="item" />

                        <!-- <el-checkbox style="
                                background: rgba(251, 171, 60, 1);
                                border: 1px solid rgba(251, 171, 60, 1);
                                width: 100%;
                            " v-model="checked3" label="小麦" />
                        <el-checkbox style="
                                background: rgba(251, 219, 13, 1);
                                border: 1px solid rgba(251, 219, 13, 1);
                                width: 100%;
                            " v-model="checked4" label="玉米" />
                        <el-checkbox style="
                                background: rgba(244, 218, 136, 1);
                                border: 1px solid rgba(244, 218, 136, 1);
                                width: 100%;
                            " v-model="checked3" label="大豆" />
                        <el-checkbox style="
                                background: rgba(174, 83, 110, 1);
                                border: 1px solid rgba(174, 83, 110, 1);
                                width: 100%;
                            " v-model="checked4" label="地瓜" />
                        <el-checkbox style="
                                background: rgba(242, 177, 167, 1);
                                border: 1px solid rgba(242, 177, 167, 1);
                                width: 100%;
                            " v-model="checked3" label="花生" />
                        <el-checkbox style="
                                background: rgba(50, 211, 235, 0.8);
                                border: 1px solid rgba(50, 211, 235, 1);
                                width: 100%;
                            " v-model="checked4" label="蓝莓" />
                        <el-checkbox style="
                                background: rgba(91, 196, 159, 1);
                                border: 1px solid rgba(91, 196, 159, 1);
                                width: 100%;
                            " v-model="checked3" label="茶叶" />
                        <el-checkbox style="
                                background: rgba(225, 153, 75, 1);
                                border: 1px solid rgba(225, 153, 75, 1);
                                width: 100%;
                            " v-model="checked3" label="马铃薯" />
                        <el-checkbox style="
                                background: rgba(166, 209, 82, 1);
                                border: 1px solid rgba(166, 209, 82, 1);
                                width: 100%;
                            " v-model="checked3" label="白菜和萝卜" />
                        <el-checkbox style=" -->
                        background: rgba(175, 110, 250, 0.8); border: 1px solid rgba(175, 110, 250,
                        0.8); width: 100%; " v-model="checked3" label="其他" />
                    </el-checkbox-group>
                </div>
            </el-collapse-item>
        </el-collapse>
        <div class="bottom_center">
            <TimeLine />
        </div>
        <div class="tool">
            <span><img src="@/assets/images/LAYER.png" alt="" /></span>
            <span><img src="@/assets/images/amplify.png" alt="" /></span>
            <span><img src="@/assets/images/reduce.png" alt="" /></span>
            <span><img src="@/assets/images/measure.png" alt="" /></span>
            <span><img src="@/assets/images/face.png" alt="" /></span>
            <span><img src="@/assets/images/position.png" alt="" /></span>
        </div>
        <div id="popup1">
            <div v-for="(item, index) in clickInfoMap.info" :key="index">
                <div class="rowWra">
                    <span>作物：</span>
                    <span>{{ item.crop }}</span>
                </div>
                <div class="rowWra">
                    <span>面积：</span>
                    <span>{{ (item.Shape_Area / 666.67).toFixed(2) }} 亩</span>
                </div>
                <div class="rowWra">
                    <span>镇名：</span>
                    <span>{{ item.town }}</span>
                </div>
                <div class="rowWra" v-if="item.village">
                    <span>村名：</span>
                    <span>{{ item.village }}</span>
                </div>
                <div class="rowWra" v-if="item.people">
                    <span>土地所有人：</span>
                    <span>{{ item.people }}</span>
                </div>
            </div>
            <div class="cancel" @click="hiddenOverlayChart">X</div>
        </div>
        <el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
    </div>
</template>

<script setup>
import { ref, onMounted, inject, watch } from 'vue';
import * as echarts from 'echarts';
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);
const typesofDiv = ref(null);
const farmlandDiv = ref(null);
const ProgressBarDiv = ref(null);
const ASdivisionDiv = ref(null);
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
const value = ref('370211');
const clickInfoMap = ref({ info: [] });
const flag = ref(false);
let leftWraFlag = ref(true);
let rightWraFlag = ref(true);
let dd = {
    小麦: [],
    玉米: [],
    大豆: [],
    地瓜: [],
    花生: [],
    蓝莓: [],
    茶叶: [],
    马铃薯: [],
    白菜和萝卜: [],
    其他: [],
};
let dic = {
    小麦: { color: 'rgba(255, 141, 26, 1)', disabled: false },
    玉米: { color: 'rgba(255, 255, 26, 1)', disabled: true },
    大豆: { color: 'rgba(255, 201, 148, 1)', disabled: false },
    地瓜: { color: 'rgba(255, 84, 84, 1)', disabled: false },
    花生: { color: 'rgba(255, 140, 255, 1)', disabled: false },
    蓝莓: { color: 'rgba(26, 255, 255, 1)', disabled: false },
    茶叶: { color: 'rgba(26, 255, 140, 1)', disabled: false },
    马铃薯: { color: 'rgba(255, 171, 87, 1)', disabled: true },
    白菜和萝卜: { color: 'rgba(140, 255, 26, 1)', disabled: true },
    其他: { color: 'rgba(140, 26, 255, 1)', disabled: false },
};
// 图层字典
let layersDic = {
    小麦: 'shuzisannong:xiaomai',
    // 玉米: 'shuzisannong:yumi',
    大豆: 'shuzisannong:dadou',
    地瓜: 'shuzisannong:digua',
    花生: 'shuzisannong:huasheng',
    蓝莓: 'shuzisannong:lanmei',
    茶叶: 'shuzisannong:chaye',
    其他: 'shuzisannong:other',
    // 马铃薯: 'rgba(225, 153, 75, 1)',
    // 白菜和萝卜: 'rgba(166, 209, 82, 1)',
};
let Pie3D = reactive({
    arr: [
        {
            name: '小麦',
            value: 101,
            itemStyle: {
                opacity: 0.8,
                color: 'rgba(110, 209, 84, 0.9)',
            },
        },
        {
            // 数据项名称
            name: '花生',
            value: 156,
            itemStyle: {
                // 透明度
                opacity: 0.8,
                // 扇形颜色
                color: 'rgba(251, 201, 3, 1)',
            },
            label: {
                show: true,
            },
        },
        {
            // 数据项名称
            name: '大豆',
            value: 156,
            itemStyle: {
                // 透明度
                opacity: 0.8,
                // 扇形颜色
                color: 'rgba(240, 129, 31, 0.9)',
            },
            label: {
                show: true,
            },
        },
        {
            // 数据项名称
            name: '地瓜',
            value: 156,
            itemStyle: {
                // 透明度
                opacity: 0.8,
                // 扇形颜色
                color: 'rgba(27, 85, 222, 1)',
            },
            label: {
                show: true,
            },
        },
        {
            // 数据项名称
            name: '蓝莓',
            value: 56,
            itemStyle: {
                // 透明度
                opacity: 0.8,
                // 扇形颜色
                color: 'rgba(72, 102, 211, 0.9)',
            },
            label: {
                show: true,
            },
        },
    ],
});
var data = {
    title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
    corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
    soybean: [333.3, null, null, null, 333.3, null, 333.3, null],
    peanut: [333.3, 500, 500, null, 333.3, 500, 333.3, null],
    wheat: [null, 500, null, 500, null, 500, null, null],
    Blueberries: [null, null, null, null, null, null, null, 500],
};
let classData = [302034, 243990, 42344, 34234, 304235];
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
];
// 组件挂载完成后执行
onMounted(() => {
    initonMounted();
    // checkList.value = Object.keys(dic.filter(item => !item.disabled))
});
// 初始化
function initonMounted() {
    getaArea(); //面积
    getTownships();
    getvillages(); //村
    initMap(); //地图
    areachar(); //图表
    typesof(); //图表
    farmland(); //图表
    ASdivision(); //图表
    getArea(); //请求
    getFarmland();
    checkList.value = Object.keys(dic);
}
const mapOption = {
    url:
        'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
        '&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
        '&style=default&format=tiles&tk=31091965e263284a501a723b8909f405',
    layer: 'tdtCva',
    style: 'default',
    format: 'tiles',
    tileMatrixSetID: 'c',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    tilingScheme: new Cesium.GeographicTilingScheme(),
    tileMatrixLabels: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
    ],
    maximumLevel: 18,
};
Cesium.Ion.defaultAccessToken =
    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYzcwZmJmNi02MzQ5LTQ1MGEtODgzMy0yZTZiZGExY2MzMGMiLCJpZCI6MTAxOTgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJnYyJdLCJpYXQiOjE1ODEzMDgxNTR9.NeJU4yfUi-SnLrNDOBYsQgmiSh3B4axCTi1m84Qw99c';
function initMap() {
    viewer = new Cesium.Viewer('cesiumContainer', {
        baseLayerPicker: false,
        shouldAnimate: true, //自动播放
        infoBox: false, //信息框
        animation: false, //“动画”窗口小部件提供用于播放，暂停和倒退的按钮，以及当前时间和日期，并由“飞梭环”包围，用于控制动画的速度。cesium示例地图左下角那个
        timeline: false, //时间轴是用于显示和控制当前场景时间的小部件。
        geocoder: false, //查找，用于查找地址和地标，以及将照相机悬挂到它们。使用铯离子进行地址解析。,cesium示例地图右上角的放大镜
        homeButton: false, //主页按钮
        navigationHelpButton: false, //导航帮助按钮
        selectionIndicator: false, //原生选择绿框
        fullscreenButton: false, //右下角的全屏按钮
        // terrainProvider:new Cesium.createWorldTerrain(),
        terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
        sceneModePicker: false, //是否显示投影方式控件
        contextOptions: {
            webgl: {
                alpha: true,
            },
        },

        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            ...mapOption,
            // url: "http://service.sdmap.gov.cn/hisimage/weipian202209?tk=9cc3e9deb3cf643b6f133717c333d16d",
            // layer: "c",
            // style: ",c",
            // format: "image/png",
            // tileMatrixSetID: "EPSG:4490",
            // rectangle: Cesium.Rectangle.fromDegrees(114.8, 34.35, 122.82, 38.43),
            // // subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            // tilingScheme: new Cesium.GeographicTilingScheme(),
            // tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
            // // maximumLevel: 18
        }),
    });
    // 去除logo
    viewer.cesiumWidget.creditContainer.style.display = 'none';

    viewer.camera.flyTo({
        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
        duration: 2,
    });

    // 图层点击事件
    layerClick();
    // 添加镇级矢量
    addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
}

const checkList = ref([]);

function getLevel(height) {
    if (height > 48000000) {
        return 0;
    } else if (height > 24000000) {
        return 1;
    } else if (height > 12000000) {
        return 2;
    } else if (height > 6000000) {
        return 3;
    } else if (height > 3000000) {
        return 4;
    } else if (height > 1500000) {
        return 5;
    } else if (height > 750000) {
        return 6;
    } else if (height > 375000) {
        return 7;
    } else if (height > 187500) {
        return 8;
    } else if (height > 93750) {
        return 9;
    } else if (height > 46875) {
        return 10;
    } else if (height > 23437.5) {
        return 11;
    } else if (height > 11718.75) {
        return 12;
    } else if (height > 5859.38) {
        return 13;
    } else if (height > 2929.69) {
        return 14;
    } else if (height > 1464.84) {
        return 15;
    } else if (height > 732.42) {
        return 16;
    } else if (height > 366.21) {
        return 17;
    } else {
        return 18;
    }
}

function change(e, a) {
    // console.log('e:', e, a);
    // removeWms('crop');
    // addwms();
}

// 农作物
watch(
    () => checkList.value,
    (val, oldVal) => {
        if (val.length > oldVal.length) {
            // 挑选出增多的数据
            const newData = val.filter(item => {
                const index = oldVal.findIndex(it => it === item);
                if (index < 0) {
                    return item;
                }
            });
            newData.forEach(item => {
                if (layersDic[item]) {
                    addWms(layersDic[item], item + 'zuowu');
                }
            });
        } else if (val.length < oldVal.length) {
            // 挑选出减少的数据
            const newData = oldVal.filter(item => {
                const index = val.findIndex(it => it === item);
                if (index < 0) {
                    return item;
                }
            });
            newData.forEach(item => {
                if (layersDic[item]) {
                    removeWms([item + 'zuowu']);
                }
            });
        }
    }
);

// 添加wms
function addWms(layers, customName, bottom) {
    let map = new Cesium.WebMapServiceImageryProvider({
        url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
        layers: layers, //图层名
        parameters: {
            service: 'WMS',
            format: 'image/png',
            transparent: true, //是否透明
            // CQL_FILTER: `crop in (${name})`,
        },
    });
    map.customName = customName; //自己定义各种属性
    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); //将图层上移一层
    // }
    if (bottom) {
        viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
        viewer.imageryLayers.raise(dd); //将图层上移一层
    }
}
// 图层点击事件
let XZDM = '';
function layerClick() {
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(async 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;
                // 获取镇的图层 （点击镇后，再点击种植结构）
                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'
                                            );
                                            // 移除以前的
                                            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 => {
        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;
    if (clickInfoMap.value && clickInfoMap.value.lon && clickInfoMap.value.lat) {
        //经纬度转为世界坐标
        const gisPosition = Cesium.Cartesian3.fromDegrees(
            Number(clickInfoMap.value.lon),
            Number(clickInfoMap.value.lat),
            0
        ); //转化为屏幕坐标
        var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            viewer.scene,
            gisPosition
        );

        if (Cesium.defined(windowPosition)) {
            const pop = document.getElementById('popup1');
            pop.style.top = windowPosition.y - 10 + 'px';
            pop.style.left = windowPosition.x + 10 + 'px';
        }
    }
}
// 隐藏弹窗
function hiddenOverlayChart() {
    // let viewer = viewers.value;
    const pop = document.getElementById('popup1');
    pop.style.display = 'none'; // 清除监听事件
    viewer.scene.postRender.removeEventListener(infoWindowPostRender);
    deleteEntityByName('landtype');
}
//显示弹窗
function showOverlayChart(position) {
    const pop = document.getElementById('popup1');
    pop.style.display = 'block';
    pop.style.position = 'absolute';
    pop.style.top = position.y - 10 + 'px';
    pop.style.left = position.x + 10 + 'px';
    pop.style.zIndex = 99;
}
const formLandRef = ref([]);
// 获取高标准农田
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);
            formLandRef.value = res.data.features;
        })
        .catch(err => { });
}
//返回
function back() {
    removeWms(['huangdaoqu_town'], true);
    removeWms(['shuzisannong:farmlandgbzn'], true);
    addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
    viewer.camera.flyTo({
        destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
        duration: 2,
    });
    flag.value = false;
}

//折叠

function leftFoldClick() {
    leftWraFlag.value = !leftWraFlag.value;
    if (leftWraFlag.value) {
        let leftWra = document.querySelector('.leftWra');
        leftWra.style.transform = 'translate(0,0)';
    } else {
        let leftWra = document.querySelector('.leftWra');
        leftWra.style.transform = 'translate(-107%,0)';
    }
}
function rightFoldClick() {
    rightWraFlag.value = !rightWraFlag.value;
    if (rightWraFlag.value) {
        let rightWra = document.querySelector('.rightWra');
        rightWra.style.transform = 'translate(0,0)';
    } else {
        let rightWra = document.querySelector('.rightWra');
        rightWra.style.transform = 'translate(107%,0)';
    }
}

//接口
const getArea = (item, index) => {
    return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => {
        return response.data;
    });
};
//镇
const getTownships = () => {
    getTownship().then(res => {
        Township.arr = res.features;
        Township.arr.unshift({
            bbox: [119.5091, 35.5671, 120.3285, 36.1455],
            properties: {
                XZDM: '370211',
                XZMC: '全部',
            },
        });
        let arr = [...res.features];
        let brr = [];
        arr.splice(0, 1);
        arr.forEach(item => {
            brr.push(item.properties.XZMC);
        });
        data.title = [...Object.values(brr)];
        ASdivision();
    });
};
//村
const getvillages = () => {
    getvillage().then(res => {
        Township.brr = res.features;
    });
};
//面积
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 => {
                if (item === i.properties.town) {
                    return i.properties;
                }
            });
            Object.keys(dd).forEach(it => {
                const index = town.findIndex(a => a && a.crop === it);
                if (index > -1) {
                    dd[it].push(1);
                } else {
                    dd[it].push(null);
                }
            });
        });
        ASdivision();
        selectTab();
    });
};

const selectTab = () => {
    areachar();
    if (value.value == '370211') {//全部
        getTownships();
        classData = [302034, 243990, 42344, 34234, 304235];
        deleteEntityByName('townLine');
        removeWms(['village_CQL']);
        Pie3D = reactive({
            arr: [
                {
                    name: '小麦',
                    value: 101,
                    itemStyle: {
                        opacity: 0.8,
                        color: 'rgba(110, 209, 84, 0.9)',
                    },
                },
                {
                    // 数据项名称
                    name: '花生',
                    value: 156,
                    itemStyle: {
                        // 透明度
                        opacity: 0.8,
                        // 扇形颜色
                        color: 'rgba(251, 201, 3, 1)',
                    },
                    label: {
                        show: true,
                    },
                },
                {
                    // 数据项名称
                    name: '大豆',
                    value: 156,
                    itemStyle: {
                        // 透明度
                        opacity: 0.8,
                        // 扇形颜色
                        color: 'rgba(240, 129, 31, 0.9)',
                    },
                    label: {
                        show: true,
                    },
                },
                {
                    // 数据项名称
                    name: '地瓜',
                    value: 156,
                    itemStyle: {
                        // 透明度
                        opacity: 0.8,
                        // 扇形颜色
                        color: 'rgba(27, 85, 222, 1)',
                    },
                    label: {
                        show: true,
                    },
                },
                {
                    // 数据项名称
                    name: '蓝莓',
                    value: 56,
                    itemStyle: {
                        // 透明度
                        opacity: 0.8,
                        // 扇形颜色
                        color: 'rgba(72, 102, 211, 0.9)',
                    },
                    label: {
                        show: true,
                    },
                },
            ],
        });
    } else if (value.value) {
        classData = [102034, 173990, 22344, 14234, 104235];
        Pie3D = reactive({
            arr: [
                {
                    name: '小麦',
                    value: 101,
                    itemStyle: {
                        opacity: 0.8,
                        color: 'rgba(110, 209, 84, 0.9)',
                    },
                },
                {
                    // 数据项名称
                    name: '花生',
                    value: 156,
                    itemStyle: {
                        // 透明度
                        opacity: 0.8,
                        // 扇形颜色
                        color: 'rgba(251, 201, 3, 1)',
                    },
                    label: {
                        show: true,
                    },
                },
                {
                    // 数据项名称
                    name: '大豆',
                    value: 156,
                    itemStyle: {
                        // 透明度
                        opacity: 0.8,
                        // 扇形颜色
                        color: 'rgba(240, 129, 31, 0.9)',
                    },
                    label: {
                        show: true,
                    },
                },
                {
                    // 数据项名称
                    name: '地瓜',
                    value: 0,
                    itemStyle: {
                        // 透明度
                        opacity: 0.8,
                        // 扇形颜色
                        color: 'rgba(27, 85, 222, 1)',
                    },
                    label: {
                        show: false,
                    },
                },
                {
                    // 数据项名称
                    name: '蓝莓',
                    value: 156,
                    itemStyle: {
                        // 透明度
                        opacity: 0.8,
                        // 扇形颜色
                        color: 'rgba(72, 102, 211, 0.9)',
                    },
                    label: {
                        show: false,
                    },
                },
            ],
        });
    }
    typesof();
    areachar();
    let arr = [...Township.arr];
    arr.forEach(item => {
        if (item.properties.XZDM == value.value) {
            getArea(item.properties.XZMC, '2');
            viewer.camera.flyTo({
                destination: Cesium.Rectangle.fromDegrees(
                    item.bbox[0],
                    item.bbox[1],
                    item.bbox[2],
                    item.bbox[3]
                ),
                duration: 2,
            });
        }
        let arr = [...Township.brr];
        let brr = [];
        arr.forEach(item => {
            if (item.properties.XZDM == value.value) {
                brr.push(item.properties.XZQMC);
            }
        });
        data.title = [...Object.values(brr)];
        ASdivision();
    });


    // const layers = viewer.imageryLayers._layers;
    // for (let f = layers.length - 1; f >= 0; f--) {
    //     if (layers[f]._imageryProvider.aaa === 'aaa') {
    //         viewer.imageryLayers.remove(layers[f]);
    //     }
    // }
    // 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}`,
    //     },
    // });
    // map2.aaa = 'aaa';
    // viewer.imageryLayers.addImageryProvider(map2);

    // 移除以前的村边界
    removeWms(['village_CQL']);
    // 移除镇高亮
    deleteEntityByName('townLine');
    // 添加新的
    addvillage(
        `XZDM=${value.value}`,
        'village_CQL'
    );

};

//图表
function areachar() {
    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,
                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,
                        },
                    },
                },
            ],
            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: {
                        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() {
    const typesofDivIntance = echarts.init(typesofDiv.value);
    let isSelected = '';
    let isHovered = '';
    let hoveredIndex = '';
    let option = getPie3D(Pie3D.arr, 0);
    // 生成扇形的曲面参数方程
    function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
        // 计算
        const midRatio = (startRatio + endRatio) / 2;

        const startRadian = startRatio * Math.PI * 2;
        const endRadian = endRatio * Math.PI * 2;
        const midRadian = midRatio * Math.PI * 2;

        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
            // eslint-disable-next-line no-param-reassign
            isSelected = false;
        }

        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        // eslint-disable-next-line no-param-reassign
        k = typeof k !== 'undefined' ? k : 1 / 3;

        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
        const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        const hoverRate = isHovered ? 1.05 : 1;

        // 返回曲面参数方程
        return {
            u: {
                min: -Math.PI,
                max: Math.PI * 3,
                step: Math.PI / 32,
            },

            v: {
                min: 0,
                max: Math.PI * 2,
                step: Math.PI / 20,
            },

            x(u, v) {
                if (u < startRadian) {
                    return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                }
                if (u > endRadian) {
                    return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
                }
                return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
            },

            y(u, v) {
                if (u < startRadian) {
                    return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
                }
                if (u > endRadian) {
                    return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
                }
                return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
            },

            z(u, v) {
                if (u < -Math.PI * 0.5) {
                    return Math.sin(u);
                }
                if (u > Math.PI * 2.5) {
                    return Math.sin(u) * h * 0.1;
                }
                // 当前图形的高度是Z根据h（每个value的值决定的）
                return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
            },
        };
    }
    // 生成模拟 3D 饼图的配置项
    function getPie3D(pieData, internalDiameterRatio) {
        const series = [];
        // 总和
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        const legendData = [];
        const k =
            typeof internalDiameterRatio !== 'undefined'
                ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
                : 1 / 3;

        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i += 1) {
            sumValue += pieData[i].value;

            const seriesItem = {
                name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
                type: 'surface',
                parametric: true,
                wireframe: {
                    show: false,
                },
                pieData: pieData[i],
                pieStatus: {
                    selected: false,
                    hovered: false,
                    k,
                },
            };

            if (typeof pieData[i].itemStyle !== 'undefined') {
                const { itemStyle } = pieData[i];

                // eslint-disable-next-line no-unused-expressions
                typeof pieData[i].itemStyle.color !== 'undefined'
                    ? (itemStyle.color = pieData[i].itemStyle.color)
                    : null;
                // eslint-disable-next-line no-unused-expressions
                typeof pieData[i].itemStyle.opacity !== 'undefined'
                    ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
                    : null;

                seriesItem.itemStyle = itemStyle;
            }
            series.push(seriesItem);
        }
        // 使用上一次遍历时，计算出的数据和 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;

            series[i].pieData.startRatio = startValue / sumValue;
            series[i].pieData.endRatio = endValue / sumValue;
            series[i].parametricEquation = getParametricEquation(
                series[i].pieData.startRatio,
                series[i].pieData.endRatio,
                false,
                false,
                k,
                // 我这里做了一个处理，使除了第一个之外的值都是10
                series[i].pieData.value === series[0].pieData.value ? 35 : 10
            );

            startValue = endValue;

            legendData.push(series[i].name);
        }

        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        const option = {
            // animation: false,
            legend: {
                show: true,
                bottom: 0,
                textStyle: { color: 'rgba(255,255,255,.9)' },
            },
            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>`;
                    }
                    return '';
                },
            },

            xAxis3D: {
                min: -1,
                max: 1,
            },
            yAxis3D: {
                min: -1,
                max: 1,
            },
            zAxis3D: {
                min: -1,
                max: 1,
            },
            grid3D: {
                show: false,
                boxHeight: 10,
                top: '-10%',
                viewControl: {
                    // 3d效果可以放大、旋转等，请自己去查看官方配置
                    alpha: 35,
                    beta: 30,
                    rotateSensitivity: 1,
                    zoomSensitivity: 0,
                    panSensitivity: 0,
                    autoRotate: true,
                    distance: 300,
                },
                // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
                postEffect: {
                    // 配置这项会出现锯齿，请自己去查看官方配置有办法解决
                    enable: true,
                    bloom: {
                        enable: true,
                        bloomIntensity: 0.1,
                    },
                    SSAO: {
                        enable: true,
                        quality: 'medium',
                        radius: 2,
                    },
                    // temporalSuperSampling: {
                    //   enable: true,
                    // },
                },
            },
            series,
        };
        return option;
    }
    //  修正取消高亮失败的 bug
    // 监听 mouseover，近似实现高亮（放大）效果
    typesofDivIntance.on('mouseover', function (params) {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        let i;

        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
            return;

            // 否则进行高亮及必要的取消高亮操作
        } else {
            // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
            if (hoveredIndex !== '') {
                // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
                isSelected = option.series[hoveredIndex].pieStatus.selected;
                isHovered = false;
                startRatio = option.series[hoveredIndex].pieData.startRatio;
                endRatio = option.series[hoveredIndex].pieData.endRatio;
                k = option.series[hoveredIndex].pieStatus.k;
                i =
                    option.series[hoveredIndex].pieData.value === option.series[0].pieData.value
                        ? 35
                        : 10;
                // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
                option.series[hoveredIndex].parametricEquation = getParametricEquation(
                    startRatio,
                    endRatio,
                    isSelected,
                    isHovered,
                    k,
                    i
                );
                option.series[hoveredIndex].pieStatus.hovered = isHovered;

                // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
                hoveredIndex = '';
            }

            // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
            if (params.seriesName !== 'mouseoutSeries') {
                // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
                isSelected = option.series[params.seriesIndex].pieStatus.selected;
                isHovered = true;
                startRatio = option.series[params.seriesIndex].pieData.startRatio;
                endRatio = option.series[params.seriesIndex].pieData.endRatio;
                k = option.series[params.seriesIndex].pieStatus.k;

                // 对当前点击的扇形，执行高亮操作（对 option 更新）
                option.series[params.seriesIndex].parametricEquation = getParametricEquation(
                    startRatio,
                    endRatio,
                    isSelected,
                    isHovered,
                    k,
                    option.series[params.seriesIndex].pieData.value + 5
                );
                option.series[params.seriesIndex].pieStatus.hovered = isHovered;

                // 记录上次高亮的扇形对应的系列号 seriesIndex
                hoveredIndex = params.seriesIndex;
            }

            // 使用更新后的 option，渲染图表
            typesofDivIntance.setOption(option);
        }
    });

    // 修正取消高亮失败的 bug
    typesofDivIntance.on('globalout', function () {
        if (hoveredIndex !== '') {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
            isSelected = option.series[hoveredIndex].pieStatus.selected;
            isHovered = false;
            let k = option.series[hoveredIndex].pieStatus.k;
            startRatio = option.series[hoveredIndex].pieData.startRatio;
            endRatio = option.series[hoveredIndex].pieData.endRatio;
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            i =
                option.series[hoveredIndex].pieData.value === option.series[0].pieData.value
                    ? 35
                    : 10;
            option.series[hoveredIndex].parametricEquation = getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                i
            );
            option.series[hoveredIndex].pieStatus.hovered = isHovered;

            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = '';
        }

        // 使用更新后的 option，渲染图表
        typesofDivIntance.setOption(option);
    });

    // option && typesofDivIntance.setOption(option);
    useEcharts(typesofDivIntance, option);
}
// 高标准农田echarts
function farmland() {
    const farmlandDivIntance = echarts.init(farmlandDiv.value);
    let option = {
        // backgroundColor: '#333333',
        // tooltip: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            top: '10%',
            containLabel: true,
        },
        legend: {
            show: true,
            top: '10',
            left: 'center',
            textStyle: { color: 'rgba(255,255,255,.9)' },
            itemWidth: 20,
            itemHeight: 12.5,
            icon: 'stack',
        },

        xAxis: {
            type: 'value',
            max: 500,
            show: false,
            // 不显示轴线
            axisLine: {
                show: false,
            },
            // 不显示刻度线
            axisTick: {
                show: false,
            },
            splitLine: {
                // 网格线为虚线
                show: false,
            },
            // axisLabel:{
            //     formatter:'{value}%'
            // }
        },
        yAxis: {
            type: 'category',
            inverse: true,
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                interval: 0,
                color: 'rgba(255, 255, 255, 1)',
                fontSize: 14,
            },
            data: ['片区1', '片区2', '片区3', '片区4', '片区5', '片区6', '片区7'],
        },
        series: [
            {
                name: '小麦',
                type: 'bar',
                barWidth: 12,
                stack: 'stack',
                data: [200, 300, 0, 200, 0, 100, 300],
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                            {
                                offset: 1,
                                color: 'rgba(33, 187, 251, 0.9)',
                            },
                            {
                                offset: 0,
                                color: 'rgba(33, 187, 251, 0.05)',
                            },
                        ]),
                    },
                },
            },
            {
                name: '大豆',
                type: 'bar',
                barWidth: 12,
                stack: 'stack',
                data: [200, 300, 200, 100, 0, 100, 300],
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                            {
                                offset: 1,
                                color: 'rgba(143, 186, 243, 0.9)',
                            },
                            {
                                offset: 0,
                                color: 'rgba(143, 186, 243, 0.05)',
                            },
                        ]),
                    },
                },
            },
            {
                name: '地瓜',
                type: 'bar',
                barWidth: 12,
                stack: 'stack',
                data: [200, 0, 200, 100, 300, 200, 0],
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                            {
                                offset: 1,
                                color: 'rgba(255, 225, 104, 1)',
                            },
                            {
                                offset: 0,
                                color: 'rgba(255, 225, 104, 0.05)',
                            },
                        ]),
                    },
                },
            },
            {
                name: '花生',
                type: 'bar',
                barWidth: 12,
                stack: 'stack',
                data: [0, 0, 200, 100, 300, 200, 0],
                itemStyle: {
                    normal: {
                        barBorderRadius: 0,
                        color: new echarts.graphic.LinearGradient(0, 0, 0.9, 0, [
                            {
                                offset: 1,
                                color: 'rgba(4, 247, 227, 0.9)',
                            },
                            {
                                offset: 0,
                                color: 'rgba(4, 247, 227, 0.25)',
                            },
                        ]),
                    },
                },
            },
        ],
    };

    // areaDivIntance.off('click') //图表渲染前销毁点击事件,防止点击图标多次触发
    farmlandDivIntance.on('click', param => ChartClick(param));
    useEcharts(farmlandDivIntance, option);
}
// 图表点击事件
function ChartClick(item) {
    console.log('item:', item);
    // 移除镇边界
    removeWms(['huangdaoqu_town'], true);
    removeWms(['shuzisannong:huangdaoqu_town']);
    selectTab();
    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', true);
    }
    // 定位到地块
    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,
            });
        }
    });
    flag.value = true;
}

function ASdivision() {
    const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
    var option = {
        // 设置图表的位置
        grid: {
            bottom: '8%',
            left: '10%',
            right: '6%',
            top: '6%',
            containLabel: true,
        },
        dataZoom: [
            {
                type: 'slider',
                show: false,
                zoomLock: true, //禁止拉伸
                width: 8,
                yAxisIndex: [0],
                bottom: 30,
                top: 20,
                right: 10,
                startValue: 0,
                endValue: 4,
                handleIcon:
                    'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                handleSize: '100%',
                handleStyle: {
                    color: '#DBDBDB',
                    height: '100%',
                },
                backgroundColor: 'transparent',
                fillerColor: '#DBDBDB',
                textStyle: {
                    color: 'transparent',
                },
                dataBackground: {
                    lineStyle: {
                        color: 'transparent',
                    },
                    areaStyle: {
                        color: 'transparent',
                    },
                },
                borderColor: 'transparent',
            },
            {
                type: 'inside',
                id: 'insideY',
                yAxisIndex: 0,
                start: 0,
                end: 50,
                zoomOnMouseWheel: false,
                moveOnMouseMove: true,
                moveOnMouseWheel: true,
            },
        ],
        // X轴
        xAxis: {
            type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
            // 坐标轴刻度
            axisTick: {
                show: false, // 是否显示坐标轴刻度 默认显示
            },
            // 坐标轴轴线
            axisLine: {
                // 是否显示坐标轴轴线 默认显示
                show: false, // 是否显示坐标轴轴线 默认显示
            },
            // 坐标轴在图表区域中的分隔线
            splitLine: {
                show: false, // 是否显示分隔线。默认数值轴显示
            },
            // 坐标轴刻度标签
            axisLabel: {
                show: false, // 是否显示刻度标签 默认显示
            },
        },
        // Y轴
        yAxis: [
            // 左侧Y轴
            {
                // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据
                // 为该类型时必须通过 data 设置类目数据
                type: 'category',
                // 坐标轴刻度
                axisTick: {
                    show: false, // 是否显示坐标轴刻度 默认显示
                },
                // 坐标轴轴线
                axisLine: {
                    // 是否显示坐标轴轴线 默认显示
                    show: false, // 是否显示坐标轴轴线 默认显示
                    lineStyle: {
                        // 坐标轴线线的颜色
                        color: '#cdd3ee',
                    },
                },
                // 坐标轴在图表区域中的分隔线
                splitLine: {
                    show: false, // 是否显示分隔线。默认数值轴显示
                },
                // 坐标轴刻度标签
                axisLabel: {
                    show: true, // 是否显示刻度标签 默认显示
                    fontSize: 12, // 文字的字体大小
                    color: 'rgba(255, 255, 255, 1)', // 刻度标签文字的颜色
                    // 使用字符串模板，模板变量为刻度默认标签 {value}
                    formatter: '{value}',
                },
                // 类目数据，在类目轴（type: 'category'）中有效
                data: data.title,
                inverse: true,
            },
        ],
        // 系列列表
        series: [
            {
                type: 'bar', // 系列类型
                name: '玉米', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: '玉米',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'rgba(255,255,255,1)',
                    },
                },
                // 图形样式
                itemStyle: {
                    barBorderRadius: [0, 0, 0, 0],
                    barBorderRadius: [0, 0, 0, 0], //
                    borderWidth: 1, // 设置边框宽度
                    borderColor: 'rgba(4, 247, 227, 0.8)', // 设置边框颜色
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(4, 247, 227, 0.9)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(4, 247, 227, 0.25)', // 100% 处的颜色
                            },
                        ],
                    },
                },
                data: dd.玉米, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '大豆', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '大豆',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'rgba(255,255,255,1)',
                    },
                },
                // 图形样式
                itemStyle: {
                    barBorderRadius: [0, 0, 0, 0], //
                    borderWidth: 1, // 设置边框宽度
                    borderColor: 'rgba(143, 186, 243, 0.8)', // 设置边框颜色
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(143, 186, 243, 0.9)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(143, 186, 243, 0.3)', // 100% 处的颜色
                            },
                        ],
                    },
                },
                data: dd.大豆, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '花生', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '花生',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'rgba(255,255,255,1)',
                    },
                },
                // 图形样式
                itemStyle: {
                    barBorderRadius: [0, 0, 0, 0],
                    barBorderRadius: [0, 0, 0, 0], //
                    borderWidth: 1, // 设置边框宽度
                    borderColor: 'rgba(4, 247, 227, 0.9)', // 设置边框颜色
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(4, 247, 227, 0.9)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(4, 247, 227, 0.25)', // 100% 处的颜色
                            },
                        ],
                    },
                },
                data: dd.花生, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '小麦', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '小麦',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'rgba(255,255,255,1)',
                    },
                },
                // 图形样式
                itemStyle: {
                    barBorderRadius: [0, 0, 0, 0],
                    barBorderRadius: [0, 0, 0, 0], //
                    borderWidth: 1, // 设置边框宽度
                    borderColor: 'rgba(33, 187, 251, 0.8)', // 设置边框颜色
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(33, 187, 251, 0.9)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(33, 187, 251, 0.25)', // 100% 处的颜色
                            },
                        ],
                    },
                },
                data: dd.小麦, // 系列中的数据内容数组
            },
            {
                type: 'bar', // 系列类型
                name: '蓝莓', // 系列名称, 用于tooltip的显示, legend 的图例筛选
                // 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加
                stack: '总量',
                barMaxWidth: 30, // 柱条的最大宽度，不设时自适应
                // 图形上的文本标签
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '蓝莓',
                    textStyle: {
                        fontSize: 12,
                        fontWeight: 'bolder',
                        color: 'rgba(255,255,255,1)',
                    },
                },
                // 图形样式
                itemStyle: {
                    barBorderRadius: [0, 0, 0, 0],
                    barBorderRadius: [0, 0, 0, 0], //
                    borderWidth: 1, // 设置边框宽度
                    borderColor: 'rgba(14, 223, 255, 0.8)', // 设置边框颜色
                    color: {
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(14, 223, 255, 0.9)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(14, 223, 255, 0.25)', // 100% 处的颜色
                            },
                        ],
                    },
                },
                data: dd.蓝莓, // 系列中的数据内容数组
            },
        ],
    };
    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>
$height: calc(100vh - 100px);

.center {
    width: 100%;
    height: 100%;

    .title {
        width: 100%;
        height: 45px;
        background: url('@/assets/images/title.png');
        background-repeat: no-repeat;
        background-size: 110% 100%;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        line-height: 45px;
        padding-left: 46px;
        display: flex;
        align-items: center;
        cursor: pointer;
        justify-content: space-between;

        span {
            width: 80%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        p {
            width: 79px;
            height: 25px;
            border-radius: 20px;
            font-size: 14px;
            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;
            align-items: center;
        }
    }
}

.leftWra {
    position: absolute;
    top: 10px;
    left: 20px;
    height: $height;
    width: 23%;
    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;
        position: absolute;
        right: -12%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        color: #ccc;
    }
    .leftTop {
        // height: 35%;
        max-width: calc(100% - 20px);
        display: flex;
        flex-direction: column;

        .areaDiv {
            width: 100%;
            height: 327px;
            opacity: 1;
            padding: 1px;
            display: flex;
            justify-content: center;
        }
    }

    .leftbottom {
        height: 35%;
        display: flex;
        flex-direction: column;
        max-width: calc(100% - 7px);
        align-items: center;

        .typesofDiv {
            width: 375px;
            height: 397px;
            background: url('@/assets/images/bj1_00000_iSpt.png');
            background-repeat: no-repeat;
            background-size: 85% 85%;
            background-position: center;
        }
    }
}

.rightWra {
    position: absolute;
    top: 10px;
    right: 20px;
    width: 23%;
    height: $height;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    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;
        position: absolute;
        left: -8%;
        top: 50%;
        transform: translate(0, -50%);
        font-size: 30px;
        color: #ccc;
    }
    .rightTop {
        width: 100%;
        height: 40%;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        .farmlandDiv {
            width: 100%;
            height: 340px;
            opacity: 1;
            display: flex;
            justify-content: center;
        }

        .ProgressBar {
            width: 100%;
            height: 9px;
            opacity: 1;
        }
    }

    .rightbottom {
        width: 100%;
        height: 455px;
        opacity: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 13px;

        .el-select {
            width: 80%;
            font-size: 14px;
            color: #333;
            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;
                box-shadow: none;
            }

            :deep(.el-input__inner) {
                color: rgba(255, 255, 255, 0.7);
            }
        }

        .ASdivision {
            width: 100%;
            height: 368px;
            opacity: 1;
            display: flex;
            justify-content: center;
        }

        :deep(.el-select__popper) {
            border: none !important;
            background: transparent !important;
        }

        :deep(.el-popper) {
            border: none !important;
            background: transparent !important;
        }
    }
}

.legend {
    position: absolute;
    right: 25%;
    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);
        color: rgba(255, 255, 255, 1);
        text-align: center;
        padding: 0 30px;
        font-size: 14px;
    }

    --el-collapse-content-bg-color {
        background: rgba(2, 31, 26, 0.6);
    }

    :deep(.el-collapse-item__content) {
        background: rgba(2, 31, 26, 0.6);
        padding: 0 10px;
        padding-bottom: 10px;
    }

    --el-collapse-border-color: none;
    --el-collapse-content-bg-color: none;

    // opacity: 1;
    // border-radius: 4px;
    // background: rgba(2, 31, 26, 0.6);
    // display: flex;
    // flex-direction: column;
    // justify-content: flex-start;
    // align-items: center;
    // padding: 10px 10px 10px 10px;
    p {
        margin: 10px;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 0px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
    }

    .mt-4 {
        .el-checkbox {
            height: 30px;
            width: 100%;
            margin-bottom: 2px;
            padding-left: 10px;
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 0px;
            color: rgba(255, 255, 255, 1);
            text-align: left;
        }
    }

    :deep(.el-checkbox__label) {
        color: rgba(255, 255, 255, 1);
    }
}

.bottom_center {
    position: absolute;
    // left: calc(400px + 20px + 8vw);
    left: 0;
    right: 0;
    margin: auto;
    width: calc(100% - (400px * 2) - (10vw * 2));
    min-width: 380px;
    bottom: 5%;
    height: 75px;
    opacity: 1;
    border-radius: 5px;
    background: rgba(2, 31, 26, 0.6);
    border: 1px solid rgba(4, 153, 153, 1);
}

.tool {
    position: absolute;
    right: 30%;
    top: 8%;
    width: 30px;
    height: 280px;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
}

#popup1 {
    border-radius: 5px;
    background: rgba(2, 31, 26, 1);
    display: none;
    // justify-content: flex-start;
    // align-items: flex-end;
    padding: 30px 8px 20px 8px;
    border: 2px solid rgba(4, 153, 153, 1);

    .rowWra {
        display: flex;
        margin-bottom: 10px;

        &>span:nth-child(1) {
            font-weight: 400;
            letter-spacing: 0px;
            color: rgba(255, 255, 255, 1);
            // margin-top: 20px;
            line-height: 24px;
            width: 3em;
            // font-size: 14px;
            margin-right: 10px;
        }

        &>span:nth-child(2) {
            color: rgba(255, 255, 255, 1);
            width: 129px;
            height: 24px;
            opacity: 1;
            border-radius: 2px;
            background: rgba(217, 231, 255, 0.2);
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2px 10px 2px 10px;
        }
    }

    .cancel {
        position: absolute;
        right: 10px;
        top: 5px;
        color: rgba(255, 255, 255, 1);
        cursor: pointer;
    }
}

.back_button {
    position: absolute;
    right: 30%;
    top: 20px;
}
</style>

<style lang="scss">
.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>