2870 lines
95 KiB
Vue
2870 lines
95 KiB
Vue
<template>
|
||
<div class="fatherDiv">
|
||
<div class="centerBox">
|
||
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
|
||
<div class="leftWra">
|
||
<div class="leftTop">
|
||
<div class="title">
|
||
<span>农作物受灾面积统计</span>
|
||
<p @click="Deta()">
|
||
下载
|
||
|
||
<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 @click="Deta2()">
|
||
下载
|
||
<img
|
||
src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<div ref="typesofDiv" class="typesofDiv"></div>
|
||
<div class="tableDiv">
|
||
<el-table
|
||
:cell-style="{ textAlign: 'center' }"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:data="tableData"
|
||
style="width: 100%"
|
||
>
|
||
<el-table-column prop="type" label="类型" />
|
||
<el-table-column prop="yesFlooding" label="面积" />
|
||
<el-table-column prop="zb" label="占比" />
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div class="leftFoldDiv" @click="leftFoldClick()">
|
||
<el-tooltip
|
||
class="box-item"
|
||
:show-arrow="false"
|
||
:disabled="leftWraFlag"
|
||
hide-after="0"
|
||
show-after="200"
|
||
effect="dark"
|
||
content="展开"
|
||
placement="top"
|
||
>
|
||
<img v-if="!leftWraFlag" src="@/assets/images/close1.png" alt="" />
|
||
</el-tooltip>
|
||
<el-tooltip
|
||
:disabled="!leftWraFlag"
|
||
:show-arrow="false"
|
||
class="box-item"
|
||
show-after="200"
|
||
hide-after="0"
|
||
effect="dark"
|
||
content="收起"
|
||
placement="top"
|
||
>
|
||
<img
|
||
class="imgrotate"
|
||
v-if="leftWraFlag"
|
||
src="@/assets/images/close1.png"
|
||
alt=""
|
||
/>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="rightWra">
|
||
<div class="rightTop">
|
||
<div class="title">
|
||
<span>洪涝面积统计-高标准农田</span>
|
||
<p @click="Deta3()">
|
||
下载
|
||
<img
|
||
src="@/assets/icons/svg/downloads.svg"
|
||
style="width: 14px; height: 14px; cursor: pointer"
|
||
/>
|
||
</p>
|
||
</div>
|
||
<div class="farmlandDiv">
|
||
<el-table
|
||
:cell-style="{ textAlign: 'center' }"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:data="highStandardArr"
|
||
style="width: 100%; font-size: 12px"
|
||
>
|
||
<el-table-column prop="region" label="区域名称" />
|
||
<el-table-column
|
||
prop="yesFlooding"
|
||
width="120"
|
||
label="洪涝面积（亩）"
|
||
/>
|
||
<el-table-column prop="createdTime" label="监测时间" />
|
||
</el-table>
|
||
</div>
|
||
<!-- <div ref="ProgressBarDiv" class="ProgressBar"></div> -->
|
||
</div>
|
||
<div class="rightbottom">
|
||
<div class="title">
|
||
<span>洪涝面积统计-行政区划</span>
|
||
<p @click="Deta4()">
|
||
下载
|
||
<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"
|
||
placeholder="全部"
|
||
>
|
||
<el-option
|
||
v-for="item in Township.arr"
|
||
:key="item.subregion"
|
||
:label="item.name"
|
||
:value="item.subregion"
|
||
/>
|
||
</el-select>
|
||
<div class="ASdivision">
|
||
<el-table
|
||
:cell-style="{ textAlign: 'center' }"
|
||
:header-cell-style="{ 'text-align': 'center' }"
|
||
:data="ZoningData"
|
||
style="width: 100%; font-size: 12px"
|
||
>
|
||
<el-table-column prop="name" label="区域名称" />
|
||
<el-table-column
|
||
prop="yesFloodingPercentage"
|
||
width="120"
|
||
label="洪涝面积(亩）"
|
||
/>
|
||
<el-table-column prop="createdTime" width="100" label="监测时间" />
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<div class="rightFoldDiv" @click="rightFoldClick()">
|
||
<el-tooltip
|
||
:disabled="!rightWraFlag"
|
||
:show-arrow="false"
|
||
hide-after="0"
|
||
show-after="200"
|
||
class="box-item"
|
||
effect="dark"
|
||
content="收起"
|
||
placement="top"
|
||
>
|
||
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
|
||
</el-tooltip>
|
||
<el-tooltip
|
||
:disabled="rightWraFlag"
|
||
:show-arrow="false"
|
||
hide-after="0"
|
||
show-after="200"
|
||
class="box-item"
|
||
effect="dark"
|
||
content="展开"
|
||
placement="top"
|
||
>
|
||
<img
|
||
class="imgrotate"
|
||
v-if="!rightWraFlag"
|
||
src="@/assets/images/close1.png"
|
||
alt=""
|
||
/>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
<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="{
|
||
backgroundColor: value.color,
|
||
border: `1px solid value.color`,
|
||
width: `100%`,
|
||
}"
|
||
:v-model="value.disabled"
|
||
:disabled="value.disabled"
|
||
:label="item"
|
||
/>
|
||
</el-checkbox-group>
|
||
</div>
|
||
</el-collapse-item>
|
||
</el-collapse>
|
||
<div id="popup">
|
||
<div>
|
||
等级：
|
||
<p>{{ clickInfoMap.grade }}</p>
|
||
</div>
|
||
<div>
|
||
经度：
|
||
<p>{{ clickInfoMap.lon }}</p>
|
||
</div>
|
||
<div>
|
||
纬度：
|
||
<p>{{ clickInfoMap.lat }}</p>
|
||
</div>
|
||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||
</div>
|
||
<div id="pop">
|
||
<div v-for="(item, index) in townZuowu.label" :key="index">
|
||
<div>{{ item.crop }}：</div>
|
||
<div>{{ item.Shape_Area }} 亩</div>
|
||
</div>
|
||
<div v-if="townZuowu.XZQMC">
|
||
<div>村名：</div>
|
||
<div>{{ townZuowu.XZQMC }}</div>
|
||
</div>
|
||
<div class="cancel" @click="hiddenOverlayChart">X</div>
|
||
</div>
|
||
<el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
|
||
</div>
|
||
<div class="tabulation">
|
||
<div class="searchDiv">
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
<el-form-item label="时间:">
|
||
<el-select
|
||
popper-class="selectCity"
|
||
v-model="formInline.time"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in timeArr"
|
||
:key="index"
|
||
:label="Zitem"
|
||
:value="item"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="统计方式:">
|
||
<el-select
|
||
popper-class="selectCity"
|
||
v-model="formInline.statistical"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option label="作物类型" value="作物类型" />
|
||
<el-option label="行政区划" value="行政区划" />
|
||
<el-option label="高标准农田" value="高标准农田" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="镇">
|
||
<el-select
|
||
v-model="formInline.droughtRating"
|
||
popper-class="selectCity"
|
||
:disabled="formInline.statistical === '行政区划' ? false : true"
|
||
:placeholder="formInline.statistical === '行政区划' ? '全部' : '请选择'"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in selectOption"
|
||
:key="index"
|
||
:label="item.name"
|
||
:value="item.subregion"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="面积(亩)>">
|
||
<el-input-number v-model="num" :min="0" @change="handleChange" />
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit">查询</el-button>
|
||
<el-button plain @click="resetForm">重置</el-button>
|
||
<el-button v-if="!operate" type="primary" text @click="dowcity">
|
||
<img src="@/assets/images/dow.png" alt="" />
|
||
下载
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="chartMode">
|
||
<div ref="chartModeDiv" class="chartModeDiv"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, inject, reactive, watch } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
import TimeLine from '@/components/TimeLine/TimeLine.vue';
|
||
// import * as turf from '@turf/turf';
|
||
import { useEcharts } from '@/hooks/useEcharts';
|
||
import {
|
||
getydamageArea,
|
||
getproportion,
|
||
gethighStandard,
|
||
gettownInformation,
|
||
getvillage,
|
||
getgarrison,
|
||
getlistDroughtsDamageYear,
|
||
getllistDroughtsDamage,
|
||
} from '@/api/meteorological/remoteSense/FloodExtraction.js';
|
||
import axios from 'axios';
|
||
import 'echarts-gl';
|
||
import { downLoadFile } from '@/utils/download.js';
|
||
import * as xlsx from 'xlsx'; // Vue3 版本
|
||
import { useRouter } from 'vue-router';
|
||
|
||
const router = useRouter();
|
||
let viewer = ref(null);
|
||
const areaDiv = ref(null);
|
||
const typesofDiv = ref(null);
|
||
const ProgressBarDiv = ref(null);
|
||
const value = ref('370211');
|
||
const leftProgressBarDiv = ref(null);
|
||
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
|
||
const clickInfoMap = ref({ name: '', value: '' });
|
||
const formLandRef = ref([]);
|
||
const flag = ref(false);
|
||
let leftWraFlag = ref(false);
|
||
let rightWraFlag = ref(false);
|
||
const checkList = ref(['false']);
|
||
let checkListdata = ref([]);
|
||
let areacharData = reactive({ lable: [], value: [] }); //冷冻等级面积
|
||
let typesofData = ref([]); //面积统计
|
||
let totalArea = ref(0); //总面积
|
||
let highStandard = ['高标准农田1', '高标准农田2', '高标准农田3'];
|
||
let ZoningData = ref([]);
|
||
const insectarr = ref([]);
|
||
let selectOption = ref([]);
|
||
const num = ref(0);
|
||
let operate = ref(true);
|
||
let currentPage = ref(1); //当前页
|
||
let pageSize = ref(12); //每页条数
|
||
let timeArr = ref([]); //年数组
|
||
const chartModeDiv = ref(null);
|
||
let amount = ref([
|
||
{
|
||
洪涝: 0,
|
||
},
|
||
]);
|
||
//搜索
|
||
let formInline = ref({
|
||
time: '',
|
||
statistical: '行政区划',
|
||
droughtRating: '',
|
||
area: num.value,
|
||
});
|
||
let dic = {
|
||
洪涝区: { color: 'rgba(9, 187, 222, 1)', disabled: false },
|
||
};
|
||
let highStandardArr = ref([]);
|
||
watch(
|
||
() => Township.arr,
|
||
val => {
|
||
console.log('val:', val);
|
||
}
|
||
);
|
||
//行政区划数据
|
||
var data = {
|
||
title: [],
|
||
};
|
||
let dd = {
|
||
小麦: [],
|
||
玉米: [],
|
||
大豆: [],
|
||
地瓜: [],
|
||
花生: [],
|
||
蓝莓: [],
|
||
茶叶: [],
|
||
马铃薯: [],
|
||
白菜和萝卜: [],
|
||
其他: [],
|
||
};
|
||
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 => {
|
||
switch (item) {
|
||
case '洪涝区':
|
||
addvillages(2, item);
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
});
|
||
} 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 => {
|
||
removeWms([item]);
|
||
});
|
||
}
|
||
}
|
||
);
|
||
let areatext = '8383894';
|
||
//表格数据
|
||
let tableData = ref([]);
|
||
let TypeTime = {
|
||
大豆: [1100, 1395, 1948, 2203, 3402, 1860, 2934, 2490, 2323],
|
||
小麦: [1283, 2883, 2939, 1233, 1992, 1928, 3949, 1929, 3434],
|
||
地瓜: [1823, 1948, 1928, 2294, 2302, 3903, 3493, 2323, 2545],
|
||
花生: [2374, 1934, 3943, 3493, 2083, 1928, 2984, 3279, 1739],
|
||
};
|
||
|
||
// 组件挂载完成后执行
|
||
onMounted(() => {
|
||
initonMounted()
|
||
});
|
||
function initonMounted(){
|
||
getydamageAreas('370211'); //农作物受灾面积统计
|
||
getproportions('370211'); //农作物受灾面积占比
|
||
gethighStandards(); //高标准农田冷冻等级面积统计
|
||
gettownInformations('370211');
|
||
theTimes(); //年
|
||
//地图
|
||
initMap();
|
||
areachar();
|
||
typesof();
|
||
getFarmland();
|
||
for (const key in dic) {
|
||
if (dic[key].disabled !== true) {
|
||
checkListdata.value.push(key);
|
||
}
|
||
}
|
||
checkList.value = checkListdata.value;
|
||
let leftWra = document.querySelector('.leftWra');
|
||
leftWra ? (leftWra.style.transform = 'translate(-107%,0)') : '';
|
||
let rightWra = document.querySelector('.rightWra');
|
||
rightWra.style.transform = 'translate(107%,0)';
|
||
}
|
||
onUpdated(() => {
|
||
console.log(localStorage.getItem(router.currentRoute.value.path));
|
||
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
|
||
document.querySelector('.mode').innerText = '地图模式';
|
||
} else {
|
||
document.querySelector('.mode').innerText = '列表模式';
|
||
}
|
||
});
|
||
|
||
/*-------------地图------------------------*/
|
||
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';
|
||
addvillages(2, '洪涝区');
|
||
addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||
duration: 0,
|
||
});
|
||
|
||
// 图层点击事件
|
||
layerClick();
|
||
// 蒙版
|
||
mbHandle();
|
||
}
|
||
|
||
// 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, //贴地
|
||
},
|
||
});
|
||
});
|
||
}
|
||
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 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 => {});
|
||
}
|
||
|
||
let townZuowu = ref({ label: [] }); //镇的作物
|
||
let XZDM = '';
|
||
// 图层点击事件
|
||
function layerClick() {
|
||
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;
|
||
// 筛选出黄岛区服务
|
||
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(data => {
|
||
if (data.length > 0) {
|
||
let newData = data['0'];
|
||
if (newData.properties && newData.properties.XZDM) {
|
||
console.log('XZDM:', XZDM);
|
||
console.log(
|
||
'newData.properties.XZDM:',
|
||
newData.properties.XZDM
|
||
);
|
||
if (XZDM !== newData.properties.XZDM) {
|
||
flag.value = true;
|
||
//防止重复加载
|
||
XZDM = newData.properties.XZDM;
|
||
value.value = XZDM; //
|
||
if (selectTab) {
|
||
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 && item.geometry.coordinates,
|
||
'townLine',
|
||
'yellow'
|
||
);
|
||
// 移除以前的
|
||
removeWms(['village_CQL']);
|
||
// 添加新的
|
||
console.log(newData.properties.XZDM);
|
||
addvillage(
|
||
`XZDM=${newData.properties.XZDM}`,
|
||
'village_CQL'
|
||
);
|
||
|
||
// 显示该镇的种植结构
|
||
let entitys = viewer.entities._entities._array;
|
||
for (var na = entitys.length - 1; na >= 0; na--) {
|
||
if (
|
||
entitys[na]._name &&
|
||
entitys[na]._name ===
|
||
'point' + newData.properties.XZDM
|
||
) {
|
||
let info = entitys[na]._info;
|
||
// entitys[na].label.show = true
|
||
townZuowu.value = info; //保存数据
|
||
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||
viewer.scene.postRender.addEventListener(
|
||
infoWindowPostRender
|
||
);
|
||
} else {
|
||
// if (entitys[na].label) {
|
||
// entitys[na].label.show = false
|
||
// }
|
||
}
|
||
}
|
||
// 移除村高亮
|
||
deleteEntityByName('villageLine');
|
||
XZQDM = '';
|
||
} else {
|
||
// // 已经有镇了，监听村点击
|
||
villageClick(layers, xy, level, cartographic, movement);
|
||
}
|
||
} else {
|
||
removeWms(['village_CQL']);
|
||
// 移除框框
|
||
hiddenOverlayChart(); // 清除监听事件
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||
}
|
||
let XZQDM = '';
|
||
// 村点击高亮
|
||
function villageClick(layers, xy, level, cartographic, movement) {
|
||
const index = layers.findIndex(
|
||
item =>
|
||
item._imageryProvider._layers &&
|
||
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village'
|
||
);
|
||
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(data => {
|
||
if (data.length > 0) {
|
||
let newData = data['0'];
|
||
console.log(newData);
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Rectangle.fromDegrees(
|
||
newData.data.bbox[0],
|
||
newData.data.bbox[1],
|
||
newData.data.bbox[2],
|
||
newData.data.bbox[3]
|
||
),
|
||
duration: 2,
|
||
});
|
||
|
||
if (newData.properties && newData.properties.XZQDM) {
|
||
if (XZQDM !== newData.properties.XZQDM) {
|
||
//防止
|
||
XZQDM = newData.properties.XZQDM;
|
||
let item = newData.data;
|
||
// 移除高亮
|
||
deleteEntityByName('villageLine');
|
||
// 高亮边界
|
||
addBoundaryHandle(
|
||
item.geometry && item.geometry.coordinates,
|
||
'villageLine',
|
||
'yellow'
|
||
);
|
||
} else {
|
||
massif(layers, xy, level, cartographic, movement);
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function massif(layers, xy, level, cartographic, movement) {
|
||
console.log(cartographic);
|
||
const index = layers.findIndex(
|
||
item =>
|
||
item._imageryProvider._layers && item._imageryProvider._layers === 'shuzisannong:result'
|
||
);
|
||
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(data => {
|
||
if (data.length > 0) {
|
||
let newData = data['0'];
|
||
let grade = '';
|
||
switch (newData.properties.value) {
|
||
case 2:
|
||
grade = '洪涝区';
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(
|
||
6
|
||
);
|
||
let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(
|
||
6
|
||
);
|
||
clickInfoMap.value = {
|
||
lon: longitudeString,
|
||
lat: latitudeString,
|
||
grade: grade,
|
||
};
|
||
console.log(clickInfoMap.value);
|
||
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||
viewer.scene.postRender.addEventListener(infoWindowPostRender);
|
||
}
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 添加村
|
||
// CQL_FILTER:筛选的语句
|
||
// customName地图服务自定义属性名
|
||
function addvillage(CQL_FILTER, customName) {
|
||
let map2 = new Cesium.WebMapServiceImageryProvider({
|
||
url: `${serverAPI.geoserverUrl}/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]._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 leftFoldClick() {
|
||
leftWraFlag.value = !leftWraFlag.value;
|
||
if (leftWraFlag.value) {
|
||
let leftWra = document.querySelector('.leftWra');
|
||
leftWra ? (leftWra.style.transform = 'translate(0,0)') : '';
|
||
} else {
|
||
let leftWra = document.querySelector('.leftWra');
|
||
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)';
|
||
}
|
||
}
|
||
|
||
function addvillages(value, customName) {
|
||
let map2 = new Cesium.WebMapServiceImageryProvider({
|
||
url: `${serverAPI.geoserverUrl}/shuzisannong/wms`,
|
||
layers: 'shuzisannong:result', //图层名
|
||
parameters: {
|
||
service: 'WMS',
|
||
format: 'image/png',
|
||
transparent: true, //是否透明
|
||
// CQL_FILTER: `XZDM=${value.value}`,
|
||
CQL_FILTER: `value in (${value})`,
|
||
},
|
||
});
|
||
map2.customName = customName;
|
||
viewer.imageryLayers.addImageryProvider(map2);
|
||
}
|
||
const handleChange = value => {
|
||
formInline.value.area = value;
|
||
};
|
||
const onSubmit = () => {
|
||
if (formInline.value.statistical !== '行政区划') {
|
||
formInline.value.droughtRating = null;
|
||
}
|
||
let arr = [];
|
||
let brr = [];
|
||
getllistDroughtsDamage({
|
||
time: formInline.value.time,
|
||
statistical: formInline.value.statistical,
|
||
droughtRating: formInline.value.droughtRating,
|
||
area: formInline.value.area,
|
||
}).then(res => {
|
||
if (formInline.value.statistical == '行政区划') {
|
||
res.data.forEach(item => {
|
||
if (arr.indexOf(item.typeName) == -1) {
|
||
arr.push(item.typeName);
|
||
}
|
||
});
|
||
arr.forEach(item => {
|
||
brr.push(
|
||
Object.create(null, {
|
||
regio: {
|
||
value: item,
|
||
},
|
||
})
|
||
);
|
||
});
|
||
brr.forEach(item => {
|
||
res.data.map(i => {
|
||
if (item.regio === i.typeName) {
|
||
item['region'] = i.typeName;
|
||
item['洪涝'] = Number(i.yesFlooding).toFixed(2);
|
||
}
|
||
});
|
||
});
|
||
operate.value = false;
|
||
insectarr.value = brr;
|
||
amount.value[0]['洪涝'] = 0;
|
||
amount.value[0]['region'] = '合计';
|
||
brr.forEach(item => {
|
||
item.洪涝
|
||
? (amount.value[0]['洪涝'] += Number(item.洪涝) !== NaN ? Number(item.洪涝) : 0)
|
||
: 0;
|
||
});
|
||
for (const key in amount.value[0]) {
|
||
if (amount.value[0][key] !== '合计') {
|
||
amount.value[0][key] = amount.value[0][key].toFixed(2);
|
||
}
|
||
}
|
||
} else if (formInline.value.statistical == '作物类型') {
|
||
res.data.forEach(item => {
|
||
if (arr.indexOf(item.type) == -1) {
|
||
arr.push(item.type);
|
||
}
|
||
});
|
||
arr.forEach(item => {
|
||
brr.push(
|
||
Object.create(null, {
|
||
regio: {
|
||
value: item,
|
||
},
|
||
})
|
||
);
|
||
});
|
||
brr.forEach(item => {
|
||
res.data.map(i => {
|
||
if (item.regio === i.type) {
|
||
item['region'] = i.type;
|
||
item['洪涝'] = Number(i.yesFlooding).toFixed(2);
|
||
}
|
||
});
|
||
});
|
||
operate.value = false;
|
||
insectarr.value = brr;
|
||
amount.value[0]['洪涝'] = 0;
|
||
amount.value[0]['region'] = '合计';
|
||
brr.forEach(item => {
|
||
item.洪涝
|
||
? (amount.value[0]['洪涝'] += Number(item.洪涝) !== NaN ? Number(item.洪涝) : 0)
|
||
: 0;
|
||
});
|
||
for (const key in amount.value[0]) {
|
||
if (amount.value[0][key] !== '合计') {
|
||
amount.value[0][key] = amount.value[0][key].toFixed(2);
|
||
}
|
||
}
|
||
} else if (formInline.value.statistical == '高标准农田') {
|
||
console.log(res.data);
|
||
res.data.forEach(item => {
|
||
if (arr.indexOf(item.region) == -1) {
|
||
arr.push(item.region);
|
||
}
|
||
});
|
||
arr.forEach(item => {
|
||
brr.push(
|
||
Object.create(null, {
|
||
regio: {
|
||
value: item,
|
||
},
|
||
})
|
||
);
|
||
});
|
||
brr.forEach(item => {
|
||
res.data.map(i => {
|
||
if (item.regio === i.region) {
|
||
item['region'] = i.region;
|
||
item['洪涝'] = Number(i.yesFlooding).toFixed(2);
|
||
}
|
||
});
|
||
});
|
||
operate.value = false;
|
||
insectarr.value = brr;
|
||
amount.value[0]['洪涝'] = 0;
|
||
amount.value[0]['region'] = '合计';
|
||
brr.forEach(item => {
|
||
item.洪涝
|
||
? (amount.value[0]['洪涝'] += Number(item.洪涝) !== NaN ? Number(item.洪涝) : 0)
|
||
: 0;
|
||
});
|
||
for (const key in amount.value[0]) {
|
||
if (amount.value[0][key] !== '合计') {
|
||
amount.value[0][key] = amount.value[0][key].toFixed(2);
|
||
}
|
||
}
|
||
}
|
||
const statInfo = chartModeDiv.value; // 获取图表元素
|
||
statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
|
||
statInfo.style.height = window.innerHeight - 100 + 'px';
|
||
const myChart = echarts.init(statInfo);
|
||
// 设置宽度自适应
|
||
window.addEventListener('resize', () => {
|
||
statInfo.style.width = window.innerWidth - 200 + 'px';
|
||
statInfo.style.height = window.innerHeight - 200 + 'px';
|
||
myChart.resize();
|
||
});
|
||
chartModes();
|
||
});
|
||
};
|
||
const resetForm = () => {
|
||
(formInline.value.time = timeArr.value[0]),
|
||
(formInline.value.statistical = '行政区划'),
|
||
(formInline.value.droughtRating = ''),
|
||
(formInline.value.area = 0),
|
||
(operate.value = true);
|
||
onSubmit();
|
||
};
|
||
/*------------------接口--------------------*/
|
||
|
||
//列表模式-年
|
||
const theTimes = () => {
|
||
getlistDroughtsDamageYear().then(res => {
|
||
console.log(res);
|
||
timeArr.value = res.data;
|
||
formInline.value.time = res.data[0];
|
||
onSubmit();
|
||
});
|
||
};
|
||
|
||
//农作物受灾面积统计
|
||
const getydamageAreas = city => {
|
||
areacharData = reactive({ lable: [], value: [] });
|
||
getydamageArea({ divisions: city }).then(res => {
|
||
res.data.forEach(item => {
|
||
areacharData.lable.push(item.type);
|
||
areacharData.value.push(item.yesFlooding);
|
||
});
|
||
areachar();
|
||
});
|
||
};
|
||
|
||
//农作物受灾面积占比
|
||
const getproportions = city => {
|
||
typesofData = ref([]);
|
||
tableData = ref([]);
|
||
totalArea = ref(0);
|
||
getproportion({ divisions: city }).then(res => {
|
||
res.data.forEach(item => {
|
||
totalArea.value += Number(item.yesFlooding);
|
||
typesofData.value.push({
|
||
name: item.type,
|
||
value: item.yesFlooding,
|
||
});
|
||
tableData.value.push({
|
||
type: item.type,
|
||
yesFlooding: `${item.yesFlooding}亩`,
|
||
zb: `${(item.zb * 100).toFixed(2)}%`,
|
||
});
|
||
});
|
||
typesof();
|
||
});
|
||
};
|
||
|
||
//高标准农田洪涝面积统计
|
||
const gethighStandards = () => {
|
||
gethighStandard().then(res => {
|
||
console.log(res.data);
|
||
highStandardArr.value = JSON.parse(JSON.stringify(res.data));
|
||
// res.data.forEach(item => {
|
||
// highStandardArr.value.push({
|
||
// region: item.region,
|
||
// yesFlooding: item.yesFlooding,
|
||
// createdTime: item.createdTime,
|
||
// });
|
||
// });
|
||
console.log(highStandardArr.value);
|
||
});
|
||
};
|
||
|
||
//镇
|
||
const gettownInformations = city => {
|
||
ZoningData = ref([]);
|
||
gettownInformation({ divisions: city }).then(res => {
|
||
Township.arr = res.data.sort((a, b) => {
|
||
return a.name.length - b.name.length;
|
||
});
|
||
Township.arr.forEach(item => {
|
||
ZoningData.value.push({
|
||
name: item.name,
|
||
subregion: item.subregion,
|
||
yesFloodingPercentage: item.yesFloodingPercentage,
|
||
createdTime: item.createdTime,
|
||
});
|
||
});
|
||
Township.arr.unshift({
|
||
subregion: '370211',
|
||
name: '全部',
|
||
});
|
||
let crr = [];
|
||
let drr = [];
|
||
Township.arr.forEach(item => {
|
||
if (crr.indexOf(item.name) == -1) {
|
||
crr.push(item.name);
|
||
drr.push({
|
||
name: item.name,
|
||
subregion: item.subregion,
|
||
area: item.area,
|
||
type: item.type,
|
||
});
|
||
}
|
||
});
|
||
Township.arr = drr;
|
||
selectOption.value = JSON.parse(JSON.stringify(Township.arr));
|
||
selectOption.value[0].subregion = null;
|
||
console.log(selectOption.value);
|
||
});
|
||
};
|
||
//村
|
||
const getvillages = city => {
|
||
ZoningData = ref([]);
|
||
getvillage({ divisions: city }).then(res => {
|
||
Township.brr = res.data;
|
||
let arr = [...res.data];
|
||
let brr = [];
|
||
arr.splice(0, 1);
|
||
arr.forEach(item => {
|
||
if (brr.indexOf(item.name) == -1) {
|
||
brr.push(item.name);
|
||
}
|
||
ZoningData.value.push({
|
||
name: item.name,
|
||
subregion: item.subregion,
|
||
yesFloodingPercentage: item.yesFloodingPercentage,
|
||
createdTime: item.createdTime,
|
||
});
|
||
});
|
||
data.title = [...Object.values(brr)];
|
||
data.title.forEach((item, index) => {
|
||
let town = res.data.map(i => {
|
||
if (item === i.name) {
|
||
return i;
|
||
}
|
||
});
|
||
Object.keys(dd).forEach(it => {
|
||
const index = town.findIndex(a => a && a.type === it);
|
||
if (index > -1) {
|
||
dd[it].push(1);
|
||
} else {
|
||
dd[it].push(null);
|
||
}
|
||
});
|
||
});
|
||
});
|
||
};
|
||
|
||
const selectTab = () => {
|
||
getgarrison().then(res => {
|
||
console.log(res);
|
||
res.features.forEach(item => {
|
||
if (item.properties.XZDM == value.value) {
|
||
deleteEntityByName('townLine');
|
||
addBoundaryHandle(item.geometry.coordinates, 'townLine', 'yellow');
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Rectangle.fromDegrees(
|
||
item.bbox[0],
|
||
item.bbox[1],
|
||
item.bbox[2],
|
||
item.bbox[3]
|
||
),
|
||
duration: 0,
|
||
});
|
||
}
|
||
});
|
||
});
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||
duration: 2,
|
||
});
|
||
deleteEntityByName('townLine');
|
||
getvillages(value.value);
|
||
getproportions(value.value);
|
||
getydamageAreas(value.value);
|
||
if (value.value == '370211') {
|
||
gettownInformations(value.value);
|
||
return;
|
||
}
|
||
// Township.arr.forEach(item => {
|
||
// if (item.properties.XZDM == value.value) {
|
||
// getstatisticsOfTheAreas(value.value); //冷冻等级面积统计
|
||
// getproportionOfAreas(value.value);
|
||
// }
|
||
// });
|
||
// if (value.value == '370211') {
|
||
// removeWms(['village_CQL']);
|
||
// XZDM = null;
|
||
// removeWms(['aaa']);
|
||
// getTownships();
|
||
// hiddenOverlayChart();
|
||
// ASdivision();
|
||
// areachar();
|
||
// typesof();
|
||
// return;
|
||
// }
|
||
// let arr = [...Township.arr];
|
||
// console.log('arr:', arr);
|
||
// arr.forEach(item => {
|
||
// if (item.properties.XZDM == value.value) {
|
||
// 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 = [];
|
||
// // console.log(Township.brr);
|
||
// arr.forEach(item => {
|
||
// if (item.properties.XZDM == value.value) {
|
||
// brr.push(item.properties.XZQMC);
|
||
// }
|
||
// });
|
||
// // console.log(brr);
|
||
// data.title = [...Object.values(brr)];
|
||
// });
|
||
// areachar();
|
||
// typesof();
|
||
// let town = [...Township.arr];
|
||
// const townData = town.find(item => item.properties.XZDM === value.value);
|
||
// if (townData) {
|
||
// // 移除镇高亮
|
||
// deleteEntityByName('townLine');
|
||
// // 高亮镇边界
|
||
// addBoundaryHandle(townData.geometry.coordinates, 'townLine', 'yellow');
|
||
// }
|
||
// // 移除以前村
|
||
// removeWms(['aaa']);
|
||
// // 添加村
|
||
// addvillage(`XZDM=${value.value}`, 'aaa');
|
||
// getarea({ time: '2023-04-26', subregion: '1', parent: '黄岛区' }).then(res => {
|
||
// let arr = [];
|
||
// res.data.map((item, index) => {
|
||
// if (item.region == townData.properties.XZMC) {
|
||
// arr.push({
|
||
// crop: item.type,
|
||
// Shape_Area: item.area,
|
||
// });
|
||
// }
|
||
// });
|
||
// townZuowu.value = {
|
||
// label: arr,
|
||
// };
|
||
// console.log();
|
||
// console.log(arr);
|
||
// showOverlayChart({ x: 642, y: 312 });
|
||
// });
|
||
};
|
||
|
||
//下载
|
||
/*---------------------------*/
|
||
const Deta = item => {
|
||
getydamageArea({ divisions: value.value, whetherToDownload: true }).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||
});
|
||
};
|
||
const Deta2 = item => {
|
||
getproportion({ divisions: value.value, whetherToDownload: true }).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||
});
|
||
};
|
||
|
||
const Deta3 = item => {
|
||
gethighStandard({ divisions: value.value, whetherToDownload: true }).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||
});
|
||
};
|
||
const Deta4 = item => {
|
||
if (value.value == '370211') {
|
||
gettownInformation({ divisions: value.value, whetherToDownload: true }).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||
});
|
||
} else {
|
||
getvillage({ divisions: value.value, whetherToDownload: true }).then(res => {
|
||
downLoadFile(res.data[res.data.length - 1].downloadPath);
|
||
});
|
||
}
|
||
};
|
||
|
||
const dowcity = () => {
|
||
let arr = JSON.parse(JSON.stringify(amount.value[0]));
|
||
arr.region = '合计';
|
||
insectarr.value.push(arr);
|
||
exportExcel(insectarr.value, '洪涝面积统计表', 'Sheet1');
|
||
};
|
||
|
||
//表头数据切换 ----------前端生成excel
|
||
const changeTableHead = (tableData, fieldName) => {
|
||
const list = tableData.map(item => {
|
||
const obj = {};
|
||
for (const k in item) {
|
||
if (fieldName[k]) {
|
||
obj[fieldName[k]] = item[k];
|
||
}
|
||
}
|
||
return obj;
|
||
});
|
||
return list;
|
||
};
|
||
const exportExcel = (
|
||
tableData,
|
||
// tableData = [
|
||
// {
|
||
// region: '山东',
|
||
// 湿润: '张三',
|
||
// 适宜: 333,
|
||
// 轻度干旱: 22,
|
||
// 中度干旱: 22,
|
||
// 重度干旱: 33,
|
||
// area: 44,
|
||
// },
|
||
// { index: 1, username: '李四', password: 444, age: 23 },
|
||
// ],
|
||
fileName = '用户列表',
|
||
pageName = 'Sheet1'
|
||
) => {
|
||
let fieldNameObj = {
|
||
region: '区域名称',
|
||
洪涝: '洪涝 (亩)',
|
||
};
|
||
const list = changeTableHead(tableData, fieldNameObj);
|
||
// 创建工作表
|
||
const data = xlsx.utils.json_to_sheet(list);
|
||
// 创建工作簿
|
||
const wb = xlsx.utils.book_new();
|
||
// 将工作表放入工作簿中
|
||
xlsx.utils.book_append_sheet(wb, data, pageName);
|
||
// 生成文件并下载
|
||
xlsx.writeFile(wb, `${fileName}.xlsx`);
|
||
};
|
||
/*-------------echarts--------------*/
|
||
function areachar() {
|
||
const areaDivIntance = echarts.init(areaDiv.value);
|
||
var option = {
|
||
textStyle: {
|
||
fontSize: 0,
|
||
},
|
||
grid: {
|
||
top: '15%',
|
||
left: '5%',
|
||
right: '5%',
|
||
bottom: '10%',
|
||
containLabel: true,
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'shadow',
|
||
},
|
||
},
|
||
legend: {
|
||
show: true,
|
||
top: '5%',
|
||
data: ['面积'],
|
||
right: '5%',
|
||
bottom:5,
|
||
icon: 'rect',
|
||
textStyle: {
|
||
fontSize: 14, //字体大小
|
||
color: 'rgba(255, 255, 255, 0.7)', //字体颜色
|
||
},
|
||
},
|
||
xAxis: {
|
||
nameTextStyle: {
|
||
color: '#c0c3cd',
|
||
padding: [0, 0, -10, 0],
|
||
fontSize: 14,
|
||
},
|
||
axisLabel: {
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
fontWeight: 400,
|
||
fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
|
||
fontSize: 14,
|
||
},
|
||
axisTick: {
|
||
lineStyle: {
|
||
color: '#0B1535',
|
||
width: 1,
|
||
},
|
||
show: false,
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#384267',
|
||
width: 1,
|
||
type: 'dashed',
|
||
},
|
||
show: true,
|
||
},
|
||
data: areacharData.lable,
|
||
type: 'category',
|
||
},
|
||
yAxis: {
|
||
name: '面积(亩)',
|
||
nameTextStyle: {
|
||
color: 'rgba(255, 255, 255, 0.8)',
|
||
fontSize: 14,
|
||
},
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: 'rgba(255,255,255,0.7)',
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
type: 'dashed',
|
||
},
|
||
},
|
||
minInterval: 1,
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: areacharData.value,
|
||
name: '面积',
|
||
type: 'bar',
|
||
barMaxWidth: 'auto',
|
||
barWidth: 35,
|
||
itemStyle: {
|
||
color: {
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
type: 'linear',
|
||
global: false,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(45, 204, 177, 1)',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(71, 179, 161, 0)',
|
||
},
|
||
],
|
||
},
|
||
},
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
fontSize: 14,
|
||
color: '#ffffff',
|
||
position: 'top',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
};
|
||
|
||
option && areaDivIntance.setOption(option);
|
||
|
||
window.addEventListener('resize', function () {
|
||
areaDivIntance.resize();
|
||
});
|
||
}
|
||
|
||
function typesof() {
|
||
const typesofDivIntance = echarts.init(typesofDiv.value);
|
||
var data = typesofData.value;
|
||
|
||
let option = {
|
||
color: [
|
||
'rgba(9, 187, 222, 0.8)',
|
||
'rgba(255, 235, 59, 0.8)',
|
||
'rgba(234, 165, 93, 0.8)',
|
||
'rgba(215, 25, 28, 0.8)',
|
||
'#585247',
|
||
'#7F6AAD',
|
||
'#009D85',
|
||
'rgba(250,250,250,0.3)',
|
||
],
|
||
title: {
|
||
text: '总面积',
|
||
subtext: `${totalArea.value}亩`,
|
||
textStyle: {
|
||
color: '#f2f2f2',
|
||
fontSize: 14,
|
||
// align: 'center'
|
||
},
|
||
subtextStyle: {
|
||
fontSize: 14,
|
||
color: ['#ff9d19'],
|
||
},
|
||
x: 'center',
|
||
y: 'center',
|
||
},
|
||
grid: {
|
||
top: 0,
|
||
},
|
||
legend: {
|
||
orient: 'vertical',
|
||
top: 'middle',
|
||
right: '2%',
|
||
textStyle: {
|
||
color: '#f2f2f2',
|
||
fontSize: 14,
|
||
},
|
||
icon: 'roundRect',
|
||
data: data,
|
||
},
|
||
tooltip: {
|
||
//提示框组件
|
||
trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
formatter: '{a} <br/>{b} : {c} <br/>百分比 : {d}%', //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
|
||
},
|
||
series: [
|
||
// 主要展示层的
|
||
{
|
||
radius: ['50%', '71%'],
|
||
center: ['50%', '50%'],
|
||
type: 'pie',
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
name: '各冷冻等级面积占比',
|
||
data: data,
|
||
},
|
||
// 边框的设置
|
||
{
|
||
radius: ['50%', '54%'],
|
||
center: ['50%', '50%'],
|
||
type: 'pie',
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
},
|
||
},
|
||
labelLine: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
emphasis: {
|
||
show: false,
|
||
},
|
||
},
|
||
animation: false,
|
||
tooltip: {
|
||
show: false,
|
||
},
|
||
data: [
|
||
{
|
||
value: 1,
|
||
itemStyle: {
|
||
color: 'rgba(250,250,250,0.3)',
|
||
},
|
||
},
|
||
],
|
||
},
|
||
{
|
||
name: '外边框',
|
||
type: 'pie',
|
||
clockWise: false, //顺时加载
|
||
hoverAnimation: false, //鼠标移入变大
|
||
center: ['50%', '50%'],
|
||
radius: ['85%', '85%'],
|
||
label: {
|
||
normal: {
|
||
show: false,
|
||
},
|
||
},
|
||
data: [
|
||
{
|
||
value: 9,
|
||
name: '',
|
||
itemStyle: {
|
||
normal: {
|
||
borderWidth: 2,
|
||
borderColor: '#0b5263',
|
||
},
|
||
},
|
||
},
|
||
],
|
||
},
|
||
],
|
||
};
|
||
|
||
useEcharts(typesofDivIntance, option);
|
||
}
|
||
|
||
function chartModes() {
|
||
const ASdivisionDivIntance = echarts.init(chartModeDiv.value);
|
||
let arr = [];
|
||
let 洪涝 = [];
|
||
insectarr.value.forEach(item => {
|
||
arr.push(item.region);
|
||
item.洪涝 !== undefined ? 洪涝.push(item.洪涝) : 洪涝.push(0);
|
||
});
|
||
let ends = (10 / arr.length) * 100;
|
||
let option = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
formatter: function (params) {
|
||
let tipStr = params[0].axisValueLabel + '</br>';
|
||
let totalNum = 0;
|
||
for (let i = 0; i < params.length; i++) {
|
||
totalNum += params[i].value;
|
||
if (params[i].seriesName !== '合计') {
|
||
tipStr += params[i].seriesName + '：' + params[i].value + '</br>';
|
||
}
|
||
}
|
||
for (let i = 0; i < params.length; i++) {
|
||
totalNum += Number(params[i].value);
|
||
if (params[i].seriesName === '合计') {
|
||
tipStr += '合计：' + totalNum;
|
||
}
|
||
}
|
||
return tipStr;
|
||
},
|
||
axisPointer: {
|
||
// 坐标轴指示器，坐标轴触发有效
|
||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
},
|
||
legend: {
|
||
top: 5,
|
||
left: 10,
|
||
icon: 'rect',
|
||
itemWidth: 4, // 图例图表宽度
|
||
itemHeight: 12, // 图例图标高度
|
||
data: [],
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'slider',
|
||
width: '40%',
|
||
top: '90%',
|
||
start: 0,
|
||
zoomLock: true, //禁止拉伸
|
||
end: ends,
|
||
showDataShadow: false,
|
||
showDetail: false,
|
||
fillerColor: 'rgba(64, 158, 255)',
|
||
borderRadius: '50%',
|
||
moveHandleSize: 0,
|
||
moveHandleStyle: {},
|
||
left: '30%',
|
||
height: 12,
|
||
handleSize: '80%',
|
||
handleIcon: 'path://M512,512m-448,0a448,448,0,1,0,896,0a448,448,0,1,0,-896,0Z',
|
||
handleStyle: {
|
||
borderWidth: 0,
|
||
color: 'rgba(64, 158, 255)',
|
||
},
|
||
},
|
||
{
|
||
type: 'inside',
|
||
},
|
||
],
|
||
grid: {
|
||
left: '3%',
|
||
right: '10%',
|
||
bottom: '15%',
|
||
top: '5%',
|
||
containLabel: true,
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
name: '区域',
|
||
axisLabel: {
|
||
fontSize: 12,
|
||
interval: 0,
|
||
rotate: 0,
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
// color: '#cbeaf6', // x坐标轴线颜色
|
||
},
|
||
},
|
||
data: arr,
|
||
},
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '面积（亩）',
|
||
axisLabel: {
|
||
// color: '#cbeaf6', // 坐标轴label文字颜色
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
// color: '#cbeaf6', // y坐标轴线颜色
|
||
},
|
||
},
|
||
splitLine: {
|
||
// 网格线
|
||
lineStyle: {
|
||
// type: 'dashed', // 设置网格线类型 dotted：虚线 solid:实线
|
||
// color: '#395367',
|
||
},
|
||
show: true, // 隐藏或显示
|
||
},
|
||
},
|
||
],
|
||
series: [
|
||
{
|
||
name: '洪涝',
|
||
type: 'bar',
|
||
barWidth: 13,
|
||
stack: '分类',
|
||
itemStyle: {
|
||
color: {
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
type: 'linear',
|
||
global: false,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(98, 161, 255, 1)',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(62, 109, 239, 1)',
|
||
},
|
||
],
|
||
},
|
||
barBorderRadius: [30, 30, 0, 0],
|
||
},
|
||
data: 洪涝,
|
||
},
|
||
],
|
||
};
|
||
|
||
var series = option.series;
|
||
var tooltip = option.tooltip;
|
||
// 提示框自定义内容包括总合及文字
|
||
function formatFun(params) {
|
||
// console.log('params====>', params)
|
||
let tipStr = params[0].axisValueLabel + '</br>'; // 初始化提示框文字默认当前轴名称并换行
|
||
let totalNum = 0; // 用于存储当前列总数
|
||
// params为当前柱状图数组数量 遍历求和并添加类目label：value
|
||
for (let i = 0; i < params.length; i++) {
|
||
if (params[i].seriesName !== '合计') {
|
||
const dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params[i].color}"></span>`;
|
||
totalNum += params[i].value;
|
||
tipStr += dotHtml + params[i].seriesName + '：' + params[i].value + '</br>';
|
||
}
|
||
}
|
||
// 添加最后的合计行 数据为每列总合
|
||
for (let i = 0; i < params.length; i++) {
|
||
if (params[i].seriesName === '合计') {
|
||
tipStr += '合计：' + totalNum;
|
||
}
|
||
}
|
||
return tipStr;
|
||
}
|
||
tooltip.formatter = formatFun;
|
||
// 指定函数计算总合
|
||
function fun(params) {
|
||
var dataSum = 0;
|
||
for (var i = 0; i < series.length; i++) {
|
||
dataSum += series[i].data[params.dataIndex];
|
||
}
|
||
return dataSum;
|
||
}
|
||
// 加载页面时候替换最后一个series的formatter
|
||
// series[series.length - 1].label.normal.formatter = fun;
|
||
useEcharts(ASdivisionDivIntance, option);
|
||
}
|
||
// 添加wms
|
||
function addWms(layers, customName) {
|
||
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) {
|
||
// viewer.imageryLayers.lower(dd);//将图层下移一层
|
||
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
|
||
viewer.imageryLayers.raise(dd); //将图层上移一层
|
||
}
|
||
}
|
||
//返回
|
||
function back() {
|
||
deleteEntityByName('villageLine');
|
||
removeWms(['village_CQL']);
|
||
deleteEntityByName('townLine');
|
||
delete townZuowu.value.XZQMC;
|
||
removeWms(['gbznt'], true);
|
||
removeWms(['aaa']);
|
||
value.value = '370211';
|
||
selectTab();
|
||
if (flag.value === '1') {
|
||
console.log(flag.value);
|
||
addWms('shuzisannong:huangdaoqu_town', 'tl');
|
||
}
|
||
viewer.camera.flyTo({
|
||
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
|
||
duration: 2,
|
||
});
|
||
flag.value = false;
|
||
hiddenOverlayChart();
|
||
}
|
||
// 图表点击事件
|
||
function ChartClick(item) {
|
||
delete townZuowu.value;
|
||
// 移除作物
|
||
removeWms(['huangdaoqu_town'], true);
|
||
removeWms(['tl'], true);
|
||
let layername = 'shuzisannong:farmland';
|
||
|
||
// 判断是否存在避免重复添加
|
||
let cz = false;
|
||
const layers = viewer.imageryLayers._layers;
|
||
for (let f = layers.length - 1; f >= 0; f--) {
|
||
if (
|
||
layers[f] &&
|
||
layers[f]._imageryProvider.customName &&
|
||
layers[f]._imageryProvider.customName === layername + 'gbznt'
|
||
) {
|
||
cz = true;
|
||
}
|
||
}
|
||
if (!cz) {
|
||
// 添加高标准农田服务
|
||
addWms(layername, layername + 'gbznt');
|
||
townZuowu.value.label = [
|
||
{ crop: '小麦', Shape_Area: '53000' },
|
||
{ crop: '地瓜', Shape_Area: '50000' },
|
||
];
|
||
}
|
||
// 定位到地块
|
||
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 = '1';
|
||
showOverlayChart({ x: 642, y: 312 });
|
||
}
|
||
|
||
/*--------------------------------------------------------------------------------------------*/
|
||
function getAreaFenlei() {
|
||
let fl = fenleiRef.value;
|
||
console.log('fl:', fl);
|
||
axios({
|
||
url:
|
||
serverAPI.geoserverUrl +
|
||
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson',
|
||
})
|
||
.then(res => {
|
||
console.log('res1111:', res);
|
||
let data = res.data.features;
|
||
data.forEach((item, index) => {
|
||
const rectangle = Cesium.Rectangle.fromDegrees(
|
||
item.bbox[0],
|
||
item.bbox[1],
|
||
item.bbox[2],
|
||
item.bbox[3]
|
||
);
|
||
const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
|
||
let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
|
||
let latitude = Cesium.Math.toDegrees(center.latitude);
|
||
|
||
if (item.properties.XZDM === '370211011') {
|
||
//灵山卫街道
|
||
longitude = 120.0863;
|
||
latitude = 35.941;
|
||
} else if (item.properties.XZDM === '370211003') {
|
||
//薛家岛街道
|
||
longitude = 120.243682;
|
||
latitude = 35.97123201;
|
||
}
|
||
const townData = fl[item.properties.XZMC];
|
||
let label = [];
|
||
if (townData) {
|
||
label = townData.map((it, inex) => {
|
||
// let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
|
||
// return dd
|
||
return it.properties;
|
||
});
|
||
}
|
||
// label = label.join(' ')
|
||
// console.log('label:', index, label,fl[item.properties.XZMC],item.properties.XZMC)
|
||
// 添加点
|
||
// viewer.entities.add({
|
||
// name: 'point' + item.properties.XZDM,
|
||
// position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
|
||
// point: new Cesium.PointGraphics({
|
||
// show: true,
|
||
// pixelSize: 10,
|
||
// // heightReference: Cesium.HeightReference.NONE,
|
||
// color: Cesium.Color.fromCssColorString('rgba(255, 255, 26, 1)'),
|
||
// outlineColor: new Cesium.Color(0, 0, 0, 0),
|
||
// outlineWidth: 0,
|
||
// disableDepthTestDistance: Number.POSITIVE_INFINITY, //去掉地形遮挡
|
||
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, //贴地
|
||
// }),
|
||
// // label: {
|
||
// // show: false,
|
||
// // text: label.join(' '),
|
||
// // font: '12px sans-serif',
|
||
// // fillColor: Cesium.Color.WHITE,
|
||
// // showBackground: true,
|
||
// // backgroundColor: Cesium.Color.fromCssColorString('rgba(2, 31, 26, 0.6)'),//背景颜色
|
||
// // // style: Cesium.LabelStyle.FILL,
|
||
// // outlineWidth: 3,
|
||
// // verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||
// // horizontalOrigin: Cesium.HorizontalOrigin.LEFT,//水平位置
|
||
// // pixelOffset: new Cesium.Cartesian2(-80, -10),
|
||
// // },
|
||
// info: {
|
||
// label: label,
|
||
// ...item.properties,
|
||
// // 经纬度，以便监听
|
||
// lon: longitude,
|
||
// lat: latitude,
|
||
// },
|
||
// });
|
||
});
|
||
})
|
||
.catch(err => {});
|
||
}
|
||
let fenleiRef = ref({});
|
||
function mbHandle() {
|
||
axios({
|
||
url:
|
||
serverAPI.geoserverUrl +
|
||
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
|
||
})
|
||
.then(res => {
|
||
let features = res.data.features;
|
||
let town = {};
|
||
// 按镇分类
|
||
features.forEach(item => {
|
||
let key = item.properties.town;
|
||
if (town[key]) {
|
||
town[key].push(item);
|
||
} else {
|
||
town[key] = [item];
|
||
}
|
||
});
|
||
fenleiRef.value = town;
|
||
getAreaFenlei();
|
||
})
|
||
.catch(err => {});
|
||
}
|
||
|
||
// 地图移动时弹窗跟随
|
||
function infoWindowPostRender() {
|
||
// let viewer = viewers.value;
|
||
if (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('popup');
|
||
if (pop) {
|
||
pop.style.top = windowPosition.y - 10 + 'px';
|
||
pop.style.left = windowPosition.x + 10 + 'px';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 隐藏弹窗
|
||
function hiddenOverlayChart() {
|
||
const pop = document.getElementById('popup');
|
||
if (pop) {
|
||
pop.style.display = 'none'; // 清除监听事件
|
||
}
|
||
|
||
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
|
||
}
|
||
//显示弹窗
|
||
function showOverlayChart(position) {
|
||
const pop = document.getElementById('popup');
|
||
if (pop) {
|
||
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;
|
||
}
|
||
}
|
||
|
||
/*-------------------------------------------------------------------------------------------*/
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$height: calc(100vh - 100px);
|
||
|
||
.fatherDiv,
|
||
.tabulation,
|
||
.centerBox {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.imgrotate {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.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;
|
||
cursor: pointer;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
span {
|
||
width: 80%;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 1) 33.33%,
|
||
rgba(41, 255, 219, 1) 100%
|
||
);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.tabulation {
|
||
display: none;
|
||
padding: 20px;
|
||
.tableBox {
|
||
padding: 0 10px;
|
||
.tableBorder {
|
||
border-radius: 8px;
|
||
margin-bottom: 10px;
|
||
.el-table--fit {
|
||
border-radius: 8px;
|
||
border: 2px solid rgba(100, 195, 164, 0.8);
|
||
box-shadow: 0px 3px 9px 0px rgba(100, 195, 164, 0.25),
|
||
0px 1px 2px 0px rgba(100, 195, 164, 0.8);
|
||
}
|
||
}
|
||
:deep(
|
||
.el-table .el-table__header-wrapper th,
|
||
.el-table .el-table__fixed-header-wrapper th
|
||
) {
|
||
color: rgba(0, 0, 0, 1);
|
||
}
|
||
height: 84%;
|
||
:deep(.el-table__inner-wrapper) {
|
||
height: 96% !important;
|
||
}
|
||
.example-pagination-block {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
:deep(.tabth) {
|
||
background-color: rgba(247, 247, 247, 1);
|
||
}
|
||
}
|
||
.chartMode {
|
||
width: 100%;
|
||
height: 85%;
|
||
.chartModeDiv {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 10px;
|
||
}
|
||
}
|
||
.searchDiv {
|
||
display: flex;
|
||
:deep(.el-input__wrapper) {
|
||
width: 100px;
|
||
}
|
||
.dow {
|
||
float: right;
|
||
margin-right: 10px;
|
||
}
|
||
.modeDiv {
|
||
width: 234px;
|
||
height: 26px;
|
||
opacity: 1;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
// font-weight: 400;
|
||
border: 1px solid #ccc;
|
||
cursor: pointer;
|
||
div {
|
||
flex: 1;
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
line-height: 26px;
|
||
}
|
||
.Selected {
|
||
background: rgba(100, 195, 164, 1);
|
||
border-radius: 8px 0px 0px 8px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
.Selecteds {
|
||
background: rgba(100, 195, 164, 1);
|
||
border-radius: 0px 8px 8px 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: -14%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
font-size: 30px;
|
||
color: #ccc;
|
||
}
|
||
|
||
.leftTop {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 38%;
|
||
.areaDiv {
|
||
width: 100%;
|
||
height: 327px;
|
||
opacity: 1;
|
||
display: flex;
|
||
padding: 1px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.ProgressBar {
|
||
width: 100%;
|
||
height: 9px;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.leftbottom {
|
||
width: 100%;
|
||
height: 59%;
|
||
opacity: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
padding-top: 13px;
|
||
|
||
.typesofDiv {
|
||
width: 100%;
|
||
height: 50%;
|
||
opacity: 1;
|
||
display: flex;
|
||
padding: 1px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tableDiv {
|
||
// background: rgba(255, 255, 255, 0.05);
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 85%;
|
||
flex-direction: column;
|
||
padding: 5px 10px 5px 10px;
|
||
color: rgba(255, 255, 255, 1);
|
||
height: 50%;
|
||
:deep(.el-table tr) {
|
||
background-color: transparent;
|
||
}
|
||
:deep(.el-table) {
|
||
--el-table-border-color: none;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
|
||
background-color: revert;
|
||
}
|
||
|
||
.Crops {
|
||
display: flex;
|
||
width: 100%;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
height: 31px;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
opacity: 1;
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(21, 173, 148, 0.1) 0%,
|
||
rgba(21, 173, 148, 0) 100%
|
||
);
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.el-checkbox-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
:deep(.ones) {
|
||
width: 100%;
|
||
height: 171;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
--el-table-tr-bg-color: null;
|
||
--el-table-border-color: null;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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 {
|
||
// background: rgba(255, 255, 255, 0.05);
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 95%;
|
||
flex-direction: column;
|
||
padding: 5px 10px 5px 10px;
|
||
color: rgba(255, 255, 255, 1);
|
||
height: 87%;
|
||
:deep(.el-table--fit) {
|
||
height: 100%;
|
||
}
|
||
:deep(.el-table tr) {
|
||
background-color: transparent;
|
||
}
|
||
:deep(.el-table) {
|
||
--el-table-border-color: none;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
|
||
background-color: revert;
|
||
}
|
||
|
||
.Crops {
|
||
display: flex;
|
||
width: 100%;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
height: 31px;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
opacity: 1;
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(21, 173, 148, 0.1) 0%,
|
||
rgba(21, 173, 148, 0) 100%
|
||
);
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.el-checkbox-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
:deep(.ones) {
|
||
width: 100%;
|
||
height: 171;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
--el-table-tr-bg-color: null;
|
||
--el-table-border-color: null;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
|
||
.ProgressBar {
|
||
width: 100%;
|
||
height: 9px;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.rightbottom {
|
||
width: 100%;
|
||
height: 59%;
|
||
opacity: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.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;
|
||
box-shadow: none;
|
||
}
|
||
|
||
:deep(.el-input__inner) {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
|
||
.ASdivision {
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 95%;
|
||
flex-direction: column;
|
||
padding: 5px 10px 5px 10px;
|
||
color: rgba(255, 255, 255, 1);
|
||
height: 79%;
|
||
:deep(.el-table--fit) {
|
||
height: 100%;
|
||
margin-top: 10px;
|
||
}
|
||
:deep(.el-table tr) {
|
||
background-color: transparent;
|
||
}
|
||
:deep(.el-table) {
|
||
--el-table-border-color: none;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
|
||
background-color: revert;
|
||
}
|
||
|
||
.Crops {
|
||
display: flex;
|
||
width: 100%;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
height: 31px;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
opacity: 1;
|
||
background: linear-gradient(
|
||
90deg,
|
||
rgba(21, 173, 148, 0.1) 0%,
|
||
rgba(21, 173, 148, 0) 100%
|
||
);
|
||
|
||
div {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.el-checkbox-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
:deep(.ones) {
|
||
width: 100%;
|
||
height: 171;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
--el-table-tr-bg-color: null;
|
||
--el-table-border-color: null;
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
line-height: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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: black;
|
||
}
|
||
}
|
||
|
||
.bottom_center {
|
||
position: absolute;
|
||
// left: calc(400px + 20px + 8vw);
|
||
left: -2%;
|
||
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;
|
||
}
|
||
|
||
#popup {
|
||
border-radius: 5px;
|
||
background: rgba(2, 31, 26, 0.6);
|
||
display: none;
|
||
// justify-content: flex-start;
|
||
// align-items: flex-end;
|
||
padding: 30px 8px 20px 8px;
|
||
|
||
& > div:nth-child(1) {
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
display: flex;
|
||
align-items: center;
|
||
p {
|
||
background: rgba(217, 231, 255, 0.2);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 2px 10px 2px 10px;
|
||
width: 140px;
|
||
}
|
||
}
|
||
|
||
& > div:nth-child(2) {
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
display: flex;
|
||
align-items: center;
|
||
p {
|
||
background: rgba(217, 231, 255, 0.2);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 2px 10px 2px 10px;
|
||
width: 140px;
|
||
}
|
||
}
|
||
& > div:nth-child(3) {
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
display: flex;
|
||
align-items: center;
|
||
p {
|
||
background: rgba(217, 231, 255, 0.2);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 2px 10px 2px 10px;
|
||
width: 140px;
|
||
}
|
||
}
|
||
.cancel {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 5px;
|
||
color: rgba(255, 255, 255, 1);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
#pop {
|
||
border-radius: 5px;
|
||
background: rgba(2, 31, 26, 1);
|
||
display: none;
|
||
// justify-content: flex-start;
|
||
// align-items: flex-end;
|
||
padding: 30px 8px 20px 8px;
|
||
|
||
.cancel {
|
||
position: absolute;
|
||
right: 10px;
|
||
top: 5px;
|
||
color: rgba(255, 255, 255, 1);
|
||
cursor: pointer;
|
||
}
|
||
|
||
& > div {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
|
||
& > div:nth-child(1) {
|
||
font-weight: 400;
|
||
letter-spacing: 0px;
|
||
color: rgba(255, 255, 255, 1);
|
||
// margin-top: 20px;
|
||
line-height: 24px;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
& > div: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;
|
||
// margin-top: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.back_button {
|
||
position: absolute;
|
||
right: 30%;
|
||
top: 20px;
|
||
}
|
||
|
||
:deep(.el-select__popper.el-popper) {
|
||
}
|
||
</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 {
|
||
display: none;
|
||
}
|
||
.selectCity {
|
||
background: #fff;
|
||
}
|
||
</style>
|