面积提取
This commit is contained in:
parent
10dde79643
commit
91ebd23059
@ -5,19 +5,14 @@
|
||||
<div class="leftTop">
|
||||
<div class="title">
|
||||
<span>种植面积时间统计</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
<p @click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianjishijian.xlsx'
|
||||
)
|
||||
">
|
||||
下载
|
||||
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
</p>
|
||||
</div>
|
||||
<div ref="areaDiv" class="areaDiv"></div>
|
||||
@ -26,18 +21,13 @@
|
||||
<div class="leftbottom">
|
||||
<div class="title">
|
||||
<span>种植面积统计</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
<p @click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/zhongzhimianji%20.xlsx'
|
||||
)
|
||||
">
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
</p>
|
||||
</div>
|
||||
<div ref="typesofDiv" class="typesofDiv"></div>
|
||||
@ -105,34 +95,13 @@
|
||||
</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"
|
||||
>
|
||||
<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 :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>
|
||||
@ -140,18 +109,13 @@
|
||||
<div class="rightTop">
|
||||
<div class="title">
|
||||
<span>种植面积统计-高标准农田</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/81f3b011-7a5d-4a21-88aa-8ea51142e564_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
<p @click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/81f3b011-7a5d-4a21-88aa-8ea51142e564_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
|
||||
)
|
||||
">
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
</p>
|
||||
</div>
|
||||
<div ref="farmlandDiv" class="farmlandDiv"></div>
|
||||
@ -160,65 +124,29 @@
|
||||
<div class="rightbottom">
|
||||
<div class="title">
|
||||
<span>种植面积统计-行政区划</span>
|
||||
<p
|
||||
@click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/0c0ff4cf-151a-470e-856a-b0fce0fde997_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
|
||||
)
|
||||
"
|
||||
>
|
||||
<p @click="
|
||||
Deta(
|
||||
'https://1912c.oss-cn-beijing.aliyuncs.com/egg-oss-demo/0c0ff4cf-151a-470e-856a-b0fce0fde997_%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA.xlsx'
|
||||
)
|
||||
">
|
||||
下载
|
||||
<img
|
||||
src="@/assets/icons/svg/downloads.svg"
|
||||
style="width: 14px; height: 14px; cursor: pointer"
|
||||
/>
|
||||
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
|
||||
</p>
|
||||
</div>
|
||||
<el-select
|
||||
popper-class="select_city"
|
||||
@change="selectTab(item)"
|
||||
v-model="value"
|
||||
clearable
|
||||
placeholder="全部"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in Township.arr"
|
||||
:key="item.properties.XZDM"
|
||||
:label="item.properties.XZMC"
|
||||
:value="item.properties.XZDM"
|
||||
/>
|
||||
<el-select popper-class="select_city" @change="selectTab(item)" v-model="value" clearable placeholder="全部">
|
||||
<el-option v-for="item in Township.arr" :key="item.properties.XZDM" :label="item.properties.XZMC"
|
||||
:value="item.properties.XZDM" />
|
||||
</el-select>
|
||||
<div ref="ASdivisionDiv" class="ASdivision"></div>
|
||||
</div>
|
||||
<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"
|
||||
>
|
||||
<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 :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>
|
||||
@ -258,7 +186,7 @@
|
||||
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 * as turf from '@turf/turf';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
||||
import axios from 'axios';
|
||||
@ -746,7 +674,7 @@ function getFarmland() {
|
||||
console.log('农田：', res);
|
||||
formLandRef.value = res.data.features;
|
||||
})
|
||||
.catch(err => {});
|
||||
.catch(err => { });
|
||||
}
|
||||
|
||||
let townZuowu = ref({ label: [] }); //镇的作物
|
||||
@ -764,6 +692,7 @@ function layerClick() {
|
||||
let alti = viewer.camera.positionCartographic.height;
|
||||
let level = getLevel(alti);
|
||||
const layers = viewer.imageryLayers._layers;
|
||||
// 筛选出黄岛区服务
|
||||
const index = layers.findIndex(
|
||||
item =>
|
||||
item._imageryProvider._layers &&
|
||||
@ -792,12 +721,15 @@ function layerClick() {
|
||||
if (data.length > 0) {
|
||||
let newData = data['0'];
|
||||
if (newData.properties && newData.properties.XZDM) {
|
||||
console.log(XZDM);
|
||||
console.log('XZDM:', XZDM);
|
||||
console.log('newData.properties.XZDM:', newData.properties.XZDM);
|
||||
if (XZDM !== newData.properties.XZDM) {
|
||||
//防止
|
||||
//防止重复加载
|
||||
XZDM = newData.properties.XZDM;
|
||||
value.value = XZDM; //
|
||||
selectTab(); //
|
||||
if (selectTab) {
|
||||
selectTab(); //
|
||||
}
|
||||
let item = newData.data;
|
||||
// 定位
|
||||
viewer.camera.flyTo({
|
||||
@ -831,7 +763,7 @@ function layerClick() {
|
||||
if (
|
||||
entitys[na]._name &&
|
||||
entitys[na]._name ===
|
||||
'point' + newData.properties.XZDM
|
||||
'point' + newData.properties.XZDM
|
||||
) {
|
||||
let info = entitys[na]._info;
|
||||
// entitys[na].label.show = true
|
||||
@ -855,7 +787,7 @@ function layerClick() {
|
||||
XZQDM = '';
|
||||
} else {
|
||||
// // 已经有镇了，监听村点击
|
||||
villageClick(layers, xy, level, cartographic);
|
||||
villageClick(layers, xy, level, cartographic,movement);
|
||||
}
|
||||
} else {
|
||||
removeWms(['village_CQL']);
|
||||
@ -873,7 +805,7 @@ function layerClick() {
|
||||
}
|
||||
let XZQDM = '';
|
||||
// 村点击高亮
|
||||
function villageClick(layers, xy, level, cartographic) {
|
||||
function villageClick(layers, xy, level, cartographic,movement) {
|
||||
const index = layers.findIndex(
|
||||
item =>
|
||||
item._imageryProvider._layers &&
|
||||
@ -949,6 +881,12 @@ function villageClick(layers, xy, level, cartographic) {
|
||||
],
|
||||
};
|
||||
townZuowu.value = info; //保存数据
|
||||
|
||||
// 展示弹窗
|
||||
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
|
||||
viewer.scene.postRender.addEventListener(
|
||||
infoWindowPostRender
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1021,7 +959,7 @@ function leftFoldClick() {
|
||||
leftWra ? (leftWra.style.transform = 'translate(0,0)') : '';
|
||||
} else {
|
||||
let leftWra = document.querySelector('.leftWra');
|
||||
leftWra ? leftWra.style.transform = 'translate(-107%,0)':'';
|
||||
leftWra ? leftWra.style.transform = 'translate(-107%,0)' : '';
|
||||
}
|
||||
}
|
||||
function rightFoldClick() {
|
||||
@ -1928,11 +1866,9 @@ function typesof() {
|
||||
tooltip: {
|
||||
formatter: params => {
|
||||
if (params.seriesName !== 'mouseoutSeries') {
|
||||
return `${
|
||||
params.seriesName
|
||||
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
|
||||
params.color
|
||||
};"></span>${option.series[params.seriesIndex].pieData.value}`;
|
||||
return `${params.seriesName
|
||||
}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
|
||||
};"></span>${option.series[params.seriesIndex].pieData.value}`;
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -2842,7 +2778,7 @@ function getAreaFenlei() {
|
||||
});
|
||||
});
|
||||
})
|
||||
.catch(err => {});
|
||||
.catch(err => { });
|
||||
}
|
||||
let fenleiRef = ref({});
|
||||
function mbHandle() {
|
||||
@ -2866,7 +2802,7 @@ function mbHandle() {
|
||||
fenleiRef.value = town;
|
||||
getAreaFenlei();
|
||||
})
|
||||
.catch(err => {});
|
||||
.catch(err => { });
|
||||
}
|
||||
|
||||
/*------------------------------------------柱状图--------------------------------------------*/
|
||||
@ -3086,7 +3022,7 @@ function infoWindowPostRender() {
|
||||
// 隐藏弹窗
|
||||
function hiddenOverlayChart() {
|
||||
// 移除各种高亮
|
||||
XZDM = '';
|
||||
// XZDM = '';
|
||||
XZQDM = '';
|
||||
removeWms(['village_CQL']);
|
||||
// removeWms(['aaa']);
|
||||
@ -3131,9 +3067,11 @@ $height: calc(100vh - 100px);
|
||||
.center {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.imgrotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 45px;
|
||||
@ -3155,11 +3093,9 @@ $height: calc(100vh - 100px);
|
||||
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%
|
||||
);
|
||||
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;
|
||||
}
|
||||
@ -3169,11 +3105,9 @@ $height: calc(100vh - 100px);
|
||||
height: 25px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%
|
||||
);
|
||||
background: linear-gradient(180deg,
|
||||
rgba(16, 111, 111, 1) 0%,
|
||||
rgba(47, 214, 214, 1) 100%);
|
||||
border: 1.5px solid rgba(23, 194, 180, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -3191,6 +3125,7 @@ $height: calc(100vh - 100px);
|
||||
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;
|
||||
@ -3201,6 +3136,7 @@ $height: calc(100vh - 100px);
|
||||
font-size: 30px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@ -3261,11 +3197,9 @@ $height: calc(100vh - 100px);
|
||||
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%
|
||||
);
|
||||
background: linear-gradient(90deg,
|
||||
rgba(21, 173, 148, 0.1) 0%,
|
||||
rgba(21, 173, 148, 0) 100%);
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
@ -3310,6 +3244,7 @@ $height: calc(100vh - 100px);
|
||||
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;
|
||||
@ -3320,6 +3255,7 @@ $height: calc(100vh - 100px);
|
||||
font-size: 30px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.rightTop {
|
||||
width: 100%;
|
||||
height: 40%;
|
||||
@ -3460,7 +3396,7 @@ $height: calc(100vh - 100px);
|
||||
// align-items: flex-end;
|
||||
padding: 30px 8px 20px 8px;
|
||||
|
||||
& > div:nth-child(1) {
|
||||
&>div:nth-child(1) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
@ -3468,7 +3404,7 @@ $height: calc(100vh - 100px);
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
& > div:nth-child(2) {
|
||||
&>div:nth-child(2) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: 129px;
|
||||
height: 24px;
|
||||
@ -3507,11 +3443,11 @@ $height: calc(100vh - 100px);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& > div {
|
||||
&>div {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
& > div:nth-child(1) {
|
||||
&>div:nth-child(1) {
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
@ -3520,7 +3456,7 @@ $height: calc(100vh - 100px);
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
& > div:nth-child(2) {
|
||||
&>div:nth-child(2) {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
width: 129px;
|
||||
height: 24px;
|
||||
@ -3535,14 +3471,14 @@ $height: calc(100vh - 100px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.back_button {
|
||||
position: absolute;
|
||||
right: 30%;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
:deep(.el-select__popper.el-popper) {
|
||||
}
|
||||
:deep(.el-select__popper.el-popper) {}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.select_city {
|
||||
|
||||
@ -206,7 +206,7 @@
|
||||
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 * as turf from '@turf/turf';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
||||
import axios from 'axios';
|
||||
|
||||
@ -269,7 +269,7 @@
|
||||
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 * as turf from '@turf/turf';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
||||
import axios from 'axios';
|
||||
|
||||
@ -211,7 +211,7 @@
|
||||
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 * as turf from '@turf/turf';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
||||
import axios from 'axios';
|
||||
|
||||
@ -175,7 +175,7 @@
|
||||
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 * as turf from '@turf/turf';
|
||||
import { useEcharts } from '@/hooks/useEcharts';
|
||||
import { getarea, getTownship, getvillage, getareas, dow } from '@/api/crops/classify.js';
|
||||
import axios from 'axios';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user