This commit is contained in:
伊丽莎白 2023-04-23 18:18:06 +08:00
parent 2a384502ab
commit dac2b7a581
2 changed files with 333 additions and 108 deletions

View File

@ -2,7 +2,7 @@ window.serverAPI = {
baseUrl: "http://192.168.2.96:8080",
// geoserver
geoserverUrl: "http://192.168.2.20:9080/geoserver",
geoserverUrl: "http://121.36.229.60:9080/geoserver",
username: "admin",
password: 'geoserver',
}

View File

@ -17,10 +17,7 @@
<span>作物类型统计-高标准农田</span>
<p>
下载 &nbsp;
<img
src="@/assets/icons/svg/downloads.svg"
style="width: 14px; height: 14px; cursor: pointer"
/>
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
</p>
</div>
<div ref="farmlandDiv" class="farmlandDiv"></div>
@ -31,19 +28,12 @@
<span>作物类型统计-行政区划</span>
<p>
下载 &nbsp;
<img
src="@/assets/icons/svg/downloads.svg"
style="width: 14px; height: 14px; cursor: pointer"
/>
<img src="@/assets/icons/svg/downloads.svg" style="width: 14px; height: 14px; cursor: pointer" />
</p>
</div>
<el-select @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-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>
@ -53,96 +43,62 @@
<template #title>图例</template>
<div class="mt-4">
<el-checkbox-group v-model="checkList" @change="change">
<el-checkbox
style="
<el-checkbox v-for="(value, item, key) in dic" :key="key" :style="{
background: value.color,
border: `1px solid ${value.color}`,
width: `100%`,
}" v-model="checked3" :disabled="value.disabled" :label="item" />
<!-- <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="
" 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="
" 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="
" 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="
" 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="
" 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="
" 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="
" 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="
" 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="其他"
/>
" 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>
@ -158,11 +114,21 @@
<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 }}</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>
</div>
</template>
<script setup>
import { ref, onMounted, inject } from 'vue';
import { ref, onMounted, inject, watch } from 'vue';
import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
import { useEcharts } from '@/hooks/useEcharts';
@ -176,6 +142,7 @@ const ProgressBarDiv = ref(null);
const ASdivisionDiv = ref(null);
let Township = reactive({ arr: [], brr: [], crr: [] }); //
const value = ref('');
const clickInfoMap = ref({ info: [] });
let dd = {
小麦: [],
玉米: [],
@ -189,17 +156,30 @@ let dd = {
其他: [],
};
let dic = {
小麦: 'rgba(102, 142, 214, 0.8)',
玉米: 'rgba(255, 225, 104, 0.8)',
大豆: 'rgba(156, 220, 130, 0.8)',
地瓜: 'rgba(156, 220, 130, 0.8)',
花生: 'rgba(212, 236, 89, 0.8)',
蓝莓: 'rgba(50, 211, 235, 0.8)',
茶叶: 'rgba(91, 196, 159, 0.8)',
马铃薯: 'rgba(254, 182, 77, 0.8)',
白菜和萝卜: 'rgba(250, 129, 109, 0.8)',
其他: 'rgba(250, 129, 109, 0.8)',
小麦: { 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)',
}
var data = {
title: ['区域一', '区域二', '区域三', '区域四', '区域五', '区域六', '区域七', '区域八'],
corn: [333.3, null, 500, 500, 333.3, null, 333.3, 500],
@ -231,6 +211,9 @@ onMounted(() => {
ProgressBar(); //
ASdivision(); //
getArea(); //
checkList.value = Object.keys(dic)
// checkList.value = Object.keys(dic.filter(item => !item.disabled))
});
const mapOption = {
url:
@ -342,7 +325,6 @@ function initMap() {
});
//
let provider = providerPoint._imageryProvider;
console.log(providerPoint);
if (provider && provider.ready && provider._layers && providerPoint.show === true) {
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
let promise = provider.pickFeatures(
@ -363,7 +345,9 @@ function initMap() {
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
addwms();
// addwms();
//
layerClick()
//
// Cesium.GeoJsonDataSource.load(
@ -471,7 +455,7 @@ function initMap() {
// );
}
const checkList = ref(Object.keys(dic));
const checkList = ref([]);
function getLevel(height) {
if (height > 48000000) {
@ -515,13 +499,47 @@ function getLevel(height) {
}
}
function change(e) {
console.log('e:', e);
console.log('checkList:', checkList.value);
removeWms('crop');
addwms();
function change(e, a) {
console.log('e:', e, a);
// console.log('checkList:', checkList.value);
// 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]) {
addLayerWms(layersDic[item], item)
}
})
} 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)
}
})
}
})
watch(() => clickInfoMap.value, (val) => {
console.log('valvalvalvalvalvalvalvalvalval:', val)
})
// namewms
function removeWms(name) {
// customName
// let viewer = viewers.value
@ -535,7 +553,6 @@ function removeWms(name) {
function addwms() {
// let viewer = viewers.value
const name = "'" + checkList.value.join("','") + "'";
console.log('name:', name);
let map = new Cesium.WebMapServiceImageryProvider({
url: `http://121.36.229.60:9080/geoserver/shuzisannong/wms?`,
layers: 'shuzisannong:fenlei', //
@ -549,11 +566,151 @@ function addwms() {
map.customName = 'crop'; //
viewer.imageryLayers.addImageryProvider(map); //
}
// wms
function addLayerWms(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; //
viewer.imageryLayers.addImageryProvider(map); //
}
//
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;
console.log('layers:', layers);
//
// let newLayer = layers.filter(item => {
// const index = Object.values(layersDic).findIndex(it => item._imageryProvider._layers && it === item._imageryProvider._layers)
// if (index > -1) {
// return item
// }
// })
let newData = []
let promise = layers.map(async item => {
console.log('item')
if (item._imageryProvider._layers) {
//
if (Object.values(layersDic).findIndex(it => it === item._imageryProvider._layers) > -1) {
const providerPoint = item;
//
let provider = providerPoint._imageryProvider;
if (provider && provider.ready && provider._layers && providerPoint.show === true) {
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
let promise = provider.pickFeatures(xy.x, xy.y, level, cartographic.longitude, cartographic.latitude);
if (promise) {
await promise.then(data => {
if (data.length > 0) {
let info = data['0'].properties
console.log('info:', info)
const ind = newData.findIndex(ii => ii && ii.crop === info.crop)
if (ind < 0) {
console.log('push:', info)
newData.push(info)
console.log('newData:', newData)
}
}
});
}
}
}
}
})
await Promise.all(promise)
console.log('newDatanewDatanewDatanewDatanewData:', newData)
if (newData.length > 0) {
const coordinate = movement.position; // // 
var ellipsoid = viewer.scene.globe.ellipsoid; // 
var cartesian = viewer.camera.pickEllipsoid(coordinate, ellipsoid);
console.log('cartesian:', cartesian);
if (cartesian) {
let cartographic = ellipsoid.cartesianToCartographic(cartesian);
let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
console.log('longitudeString:', longitudeString);
// newData.lon = longitudeString;
// newData.lat = latitudeString; /**/
console.log('data:', newData);
clickInfoMap.value = {
info: newData,
// ...newData['0'],
lon: longitudeString,
lat: latitudeString,
};
}
showOverlayChart(coordinate); // 使
viewer.scene.postRender.addEventListener(infoWindowPostRender);
} else {
hiddenOverlayChart(); //  // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
// 
function infoWindowPostRender() {
// let viewer = viewers.value;
// console.log('clickInfoMap.value:', clickInfoMap.value);
if (clickInfoMap.value && clickInfoMap.value.lon && clickInfoMap.value.lat) {
//
const gisPosition = Cesium.Cartesian3.fromDegrees(
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);
}
//
function showOverlayChart(position) {
console.log('显示')
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 getArea = (item, index) => {
return getarea({ time: '2023-04-19', subregion: index, parent: item }).then(response => {
console.log(response.data);
return response.data;
});
};
@ -618,7 +775,6 @@ const selectTab = () => {
let arr = [...Township.arr];
arr.forEach(item => {
if (item.properties.XZDM == value.value) {
console.log(item.properties);
getArea(item.properties.XZMC, '2');
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(
@ -632,13 +788,11 @@ const selectTab = () => {
}
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)];
ASdivision();
});
@ -1015,7 +1169,6 @@ function farmland() {
var tooltip = option.tooltip;
//
function formatFun(params) {
// console.log('params====>', params)
let tipStr = params[0].axisValueLabel + '</br>'; //
let totalNum = 0; //
// params labelvalue
@ -1416,9 +1569,11 @@ function ASdivision() {
<style lang="scss" scoped>
$height: calc(100vh - 100px);
.center {
width: 100%;
height: 100%;
.title {
width: 100%;
height: 45px;
@ -1432,22 +1587,22 @@ $height: calc(100vh - 100px);
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%
);
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;
@ -1464,11 +1619,13 @@ $height: calc(100vh - 100px);
width: 23%;
background: rgba(2, 31, 26, 0.85);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
.leftTop {
// height: 35%;
max-width: calc(100% - 20px);
display: flex;
flex-direction: column;
.areaDiv {
width: 100%;
height: 327px;
@ -1477,10 +1634,12 @@ $height: calc(100vh - 100px);
padding: 1px;
}
}
.leftbottom {
height: 35%;
display: flex;
flex-direction: column;
.typesofDiv {
width: 100%;
height: 267px;
@ -1500,6 +1659,7 @@ $height: calc(100vh - 100px);
align-items: center;
background: rgba(2, 31, 26, 0.85);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
.rightTop {
width: 100%;
height: 40%;
@ -1508,17 +1668,20 @@ $height: calc(100vh - 100px);
flex-direction: column;
justify-content: flex-start;
align-items: center;
.farmlandDiv {
width: 100%;
height: 340px;
opacity: 1;
}
.ProgressBar {
width: 100%;
height: 9px;
opacity: 1;
}
}
.rightbottom {
width: 100%;
height: 455px;
@ -1528,6 +1691,7 @@ $height: calc(100vh - 100px);
justify-content: flex-start;
align-items: center;
padding-top: 13px;
.el-select {
width: 80%;
font-size: 14px;
@ -1535,13 +1699,16 @@ $height: calc(100vh - 100px);
background: rgba(22, 94, 102, 1);
border: 1px solid rgba(4, 153, 153, 1) !important;
margin-top: 20px;
:deep(.el-input__wrapper) {
background-color: transparent;
}
:deep(.el-input__inner) {
color: rgba(255, 255, 255, 0.7);
}
}
.ASdivision {
width: 415px;
height: 368px;
@ -1549,6 +1716,7 @@ $height: calc(100vh - 100px);
}
}
}
:deep(.el-select-dropdown) {
background: red !important;
}
@ -1558,6 +1726,8 @@ $height: calc(100vh - 100px);
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);
@ -1566,15 +1736,19 @@ $height: calc(100vh - 100px);
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;
}
--el-collapse-border-color: none;
--el-collapse-content-bg-color: none;
// opacity: 1;
// border-radius: 4px;
// background: rgba(2, 31, 26, 0.6);
@ -1592,6 +1766,7 @@ $height: calc(100vh - 100px);
color: rgba(255, 255, 255, 1);
text-align: center;
}
.mt-4 {
.el-checkbox {
height: 30px;
@ -1606,6 +1781,7 @@ $height: calc(100vh - 100px);
text-align: left;
}
}
:deep(.el-checkbox__label) {
color: rgba(255, 255, 255, 1);
}
@ -1623,6 +1799,7 @@ $height: calc(100vh - 100px);
background: rgba(2, 31, 26, 0.6);
border: 1px solid rgba(4, 153, 153, 1);
}
.tool {
position: absolute;
right: 30%;
@ -1636,4 +1813,52 @@ $height: calc(100vh - 100px);
align-items: flex-start;
display: none;
}
#popup1 {
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;
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;
}
}
</style>