tianlong/Agriculture-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
tianlong
2023-06-20 16:37:55 +08:00
parent c2ce122a52
commit 94e7e9685f
300 changed files with 11891 additions and 9511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

451
src/views/crops/output/wheat/index.vue
View File

@ -128,13 +128,19 @@
<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 / 666.67).toFixed(2) }} 亩</div>
</div>
<div v-if="townZuowu.XZQMC">
<div>村名：</div>
<div>{{ townZuowu.XZQMC }}</div>
<div>
<div class="rowWra">
<span>地区：</span>
<span>{{ regionName }}</span>
</div>
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
<span>单产量：</span>
<span>{{ item.wheatUnitOutputValue }}公斤/亩</span>
</div>
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
<span>总产量：</span>
<span>{{ item.wheatOutput }}亩</span>
</div>
</div>
<div class="cancel" @click="hiddenOverlayChart">X</div>
</div>
@ -337,6 +343,7 @@ import {
getparameterEstimationYear,
getparameterEstimation,
} from '@/api/crops/wheat.js';
import { getgarrison } from '@/api/crops/site.js';
import axios from 'axios';
import 'echarts-gl';
import { downLoadFile } from '@/utils/download.js';
@ -368,6 +375,9 @@ let tableItemAll = ref([]);
const num = ref(1);
let operate = ref(true);
const chartModeDiv = ref(null);
let cunVar = ref(null);
let zhenVar = ref(null);
let regionName = ref('');
let amount = ref([
{
wheatUnitOutputValue: 0,
@ -489,18 +499,164 @@ function initMap() {
// 去除logo
viewer.cesiumWidget.creditContainer.style.display = 'none';
//加载地图服务
addWms('shuzisannong:huangdaoqu_town', 'tl');
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 2,
});
// 图层点击事件
layerClick();
// layerClick();
// 蒙版
mbHandle();
getAreaFenlei();
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
cun(); //添加村
zhen(); //添加镇
addWheelEvent(); //鼠标滚动控制村级矢量显示隐藏
addEvent(); //点击事件
}
//鼠标滑轮事件
const addWheelEvent = () => {
const handler = viewer.scene.preRender.addEventListener(() => {
{
//从Cesium中获取当前地图瓦片等级
if (viewer.camera.positionCartographic.height <= 13000) {
cunVar.show = true;
} else {
cunVar.show = false;
zhenVar.show = true;
}
}
});
};
const cun = () => {
var shp = new Cesium.WebMapServiceImageryProvider({
url: serverAPI.geoserverUrl + `/map-huangdaoqu_village/wms111/`,
layers: 'huangdaoqu_village@huangdaoqu_village',
tileWidth: '256', //图片宽高
tileHeight: '256', //图片宽高
//STYLES: 'landmarks',
//SLD_BODY: yanshi,
enablePickFeatures: true, //是否允许点击
parameters: {
service: 'WMS',
format: 'image/png',
srs: 'EPSG:4326',
VERSION: '1.1.1',
transparent: true, //是否透明
exceptions: 'application/vnd.ogc.se_inimage',
},
});
cunVar = viewer.imageryLayers.addImageryProvider(shp);
cunVar.show = false;
};
const zhen = () => {
var shp = new Cesium.WebMapServiceImageryProvider({
url: serverAPI.geoserverUrl + '/map-huangdaoqu_town/wms111/',
layers: 'huangdaoqu_town@huangdaoqu_town',
tileWidth: '256', //图片宽高
tileHeight: '256', //图片宽高
//STYLES: 'landmarks',
//SLD_BODY: yanshi,
enablePickFeatures: true, //是否允许点击
parameters: {
service: 'WMS',
format: 'image/png',
srs: 'EPSG:4326',
VERSION: '1.1.1',
transparent: true, //是否透明
exceptions: 'application/vnd.ogc.se_inimage',
},
});
zhenVar = viewer.imageryLayers.addImageryProvider(shp);
};
const addEvent = () => {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event => {
// event.position 是鼠标获取的屏幕坐标，也就是2D笛卡尔点（Cartesian2）
// 屏幕坐标转为世界坐标
let cartesian = viewer.scene.globe.pick(
viewer.camera.getPickRay(event.position),
viewer.scene
);
// 世界坐标转换为弧度
let ellipsoid = viewer.scene.globe.ellipsoid;
let cartographic = ellipsoid.cartesianToCartographic(cartesian);
// 弧度转换为经纬度
let lon = Cesium.Math.toDegrees(cartographic.longitude); // 经度
let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
// console.log(lon ,lat)
//选择feature
viewer.selectedEntity = undefined;
var pickRay = viewer.camera.getPickRay(event.position);
var featuresPromise = viewer.imageryLayers.pickImageryLayerFeatures(pickRay, viewer.scene);
// 用 async 函数包装事件处理逻辑
(async () => {
if (!Cesium.defined(featuresPromise)) {
console.log('No features picked.');
} else {
try {
// 使用 await 处理异步结果
const features = await featuresPromise;
if (!features[features.length - 1].properties.XZQDM) {
value.value = features[features.length - 1].properties.XZDM;
regionName.value = features[features.length - 1].properties.XZMC;
getwheatGetAllTowns({ divisions: value.value }).then(res => {
let arr = [];
res.data.forEach(item => {
if (item.subName == features[features.length - 1].properties.XZMC) {
arr.push(item);
}
});
clickInfoMap.value = {
info: arr,
lon: lon,
lat: lat,
};
});
selectTab();
} else {
// value.value = features[features.length - 1].properties.XZDM;
// regionName.value = features[features.length - 1].properties.XZQMC;
// getvillage({
// divisions: features[features.length - 1].properties.XZDM,
// }).then(res => {
// let arr = [];
// res.data.forEach(item => {
// if (
// item.tomeName == features[features.length - 1].properties.XZQMC
// ) {
// arr.push(item);
// }
// });
// clickInfoMap.value = {
// info: arr,
// lon: lon,
// lat: lat,
// };
// });
}
showOverlayChart(event.position); // 添加地图移动监听：使地图移动弹窗跟着移动
viewer.scene.postRender.addEventListener(infoWindowPostRender);
// This function is called asynchronously when the list of picked features is available.
} catch (error) {
console.error('Error occurred:', error);
}
}
})();
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};
// data数据数组
// name实体名称，方便以后删除
// color实体颜色
@ -587,12 +743,15 @@ function getFarmland() {
let townZuowu = ref({ label: [] }); //镇的作物
let XZDM = '';
let cartesians = ref([]);
// 图层点击事件
function layerClick() {
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (movement) {
var ray = viewer.camera.getPickRay(movement.position);
var ellipsoid = viewer.scene.globe.ellipsoid; // 将屏幕坐标转为地理坐标
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
cartesians = cartesian;
if (cartesian) {
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
if (cartographic) {
@ -632,7 +791,6 @@ function layerClick() {
//防止
XZDM = newData.properties.XZDM;
value.value = XZDM; //
selectTab(); //
let item = newData.data;
// 定位
viewer.camera.flyTo({
@ -655,13 +813,47 @@ function layerClick() {
// 移除以前的
removeWms(['village_CQL']);
// 添加新的
addvillage(
`XZDM=${newData.properties.XZDM}`,
'village_CQL'
);
// 显示该镇的种植结构
// addvillage(
// `XZDM=${newData.properties.XZDM}`,
// 'village_CQL'
// );
let entitys = viewer.entities._entities._array;
insectarr.value.forEach(item => {
for (var na = entitys.length - 1; na >= 0; na--) {
if (newData.properties.XZDM == item.subregion) {
clickInfoMap.value = item;
let info = entitys[na]._info;
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);
townZuowu.value = {
lon: longitudeString,
lat: latitudeString,
};
}
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
viewer.scene.postRender.addEventListener(
infoWindowPostRender
);
} else {
// if (entitys[na].label) {
// entitys[na].label.show = false
// }
}
}
});
// 显示该镇的种植结构
for (var na = entitys.length - 1; na >= 0; na--) {
if (
entitys[na]._name &&
@ -671,10 +863,6 @@ function layerClick() {
let info = entitys[na]._info;
// entitys[na].label.show = true
townZuowu.value = info; //保存数据
console.log(
townZuowu.value,
'------------------'
);
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
viewer.scene.postRender.addEventListener(
infoWindowPostRender
@ -686,11 +874,11 @@ function layerClick() {
}
}
// 移除村高亮
deleteEntityByName('villageLine');
// deleteEntityByName('villageLine');
XZQDM = '';
} else {
// // 已经有镇了，监听村点击
villageClick(layers, xy, level, cartographic);
// villageClick(layers, xy, level, cartographic);
}
} else {
removeWms(['village_CQL']);
@ -941,15 +1129,22 @@ const getwheatGetAllVillagess = city => {
};
const selectTab = () => {
console.log(value.value);
if (value.value == '') {
getwheatGetAllTownss();
removeWms(['village_CQL']);
removeWms(['aaa']);
} else {
getwheatGetAllVillagess(value.value);
}
getwheatTotalYearValues(value.value);
getgarrison().then(res => {
res.features.forEach(item => {
if (item.properties.XZDM == value.value) {
deleteEntityByName('townLine');
addBoundaryHandle(item.geometry.coordinates, 'townLine', 'yellow');
}
});
});
// if (value.value == '') {
// getwheatGetAllTownss();
// removeWms(['village_CQL']);
// removeWms(['aaa']);
// } else {
// getwheatGetAllVillagess(value.value);
// }
// getwheatTotalYearValues(value.value);
};
//下载
@ -976,7 +1171,6 @@ const Deta3 = item => {
}
};
const dowcity = () => {
console.log(insectarr);
let arr = JSON.parse(JSON.stringify(amount.value[0]));
console.log(arr);
insectarr.value.push(arr);
@ -999,7 +1193,7 @@ const onSubmit = () => {
value: 'subName',
},
{
lable: '单产量(斤/亩)',
lable: '单产量(公斤/亩)',
value: 'wheatUnitOutputValue',
},
{
@ -1013,7 +1207,7 @@ const onSubmit = () => {
value: 'subName',
},
{
lable: '单产量(斤/亩)',
lable: '单产量(公斤/亩)',
value: 'wheatUnitOutputValue',
},
{
@ -1043,12 +1237,10 @@ const onSubmit = () => {
: 0;
});
for (const key in amount.value[0]) {
console.log(amount.value[0][key]);
if (amount.value[0][key] !== '合计') {
amount.value[0][key] = amount.value[0][key].toFixed(2);
}
}
console.log(amount);
const statInfo = chartModeDiv.value; // 获取图表元素
statInfo.style.width = window.innerWidth - 100 + 'px'; //初始化echarts图表宽度
statInfo.style.height = window.innerHeight - 100 + 'px';
@ -1095,7 +1287,7 @@ const exportExcel = (
) => {
let fieldNameObj = {
subName: '区域名称',
wheatUnitOutputValue: '单产量(斤/亩)',
wheatUnitOutputValue: '单产量(公斤/亩)',
wheatOutput: '总产量(吨)',
};
const list = changeTableHead(tableData, fieldNameObj);
@ -1226,7 +1418,7 @@ function areachar() {
yAxis: [
{
type: 'value',
name: '产量(斤/亩)',
name: '产量(公斤/亩)',
// min: 0,
// max: calMax(data.yData, 0),
// interval: calMax(data.yData, 0) / 5,
@ -1400,7 +1592,7 @@ function farmland() {
},
{
type: 'value',
name: '产量(斤/亩)',
name: '产量(公斤/亩)',
min: 0,
position: 'bottom',
splitLine: {
@ -1524,8 +1716,8 @@ function addWms(layers, customName) {
}
//返回
function back() {
removeWms(['gbznt'], true);
addWms('shuzisannong:huangdaoqu_town', 'tl');
deleteEntityByName('townLine');
deleteEntityByName('villageLine');
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 2,
@ -1694,7 +1886,7 @@ function ASdivision() {
],
series: [
{
name: '单产量(斤/亩)',
name: '单产量(公斤/亩)',
type: 'bar',
barWidth: 5,
data: data[0],
@ -1819,7 +2011,7 @@ function chartModes() {
yAxis: [
{
type: 'value',
name: '单产量(斤/亩)',
name: '单产量(公斤/亩)',
splitLine: {
show: true,
lineStyle: {
@ -1867,7 +2059,7 @@ function chartModes() {
],
series: [
{
name: '单产量(斤/亩)',
name: '单产量(公斤/亩)',
type: 'bar',
yAxisIndex: 0,
data: 单产量,
@ -1887,14 +2079,12 @@ function chartModes() {
/*--------------------------------------------------------------------------------------------*/
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(
@ -1927,29 +2117,44 @@ function getAreaFenlei() {
}
// 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, //贴地
}),
info: {
label: label,
...item.properties,
// 经纬度，以便监听
lon: longitude,
lat: latitude,
},
});
// // 添加点
// 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, //贴地
// }),
// info: {
// label: label,
// ...item.properties,
// // 经纬度，以便监听
// lon: longitude,
// lat: latitude,
// },
// });
});
// let entitys = viewer.entities._entities._array;
// getparameterEstimation({
// year: formInline.value.time,
// statistical: formInline.value.statistical,
// type: formInline.value.droughtRating,
// area: formInline.value.area,
// }).then(res => {
// res.data.forEach(items => {
// entitys.forEach(item => {
// if (items.subName == item.info.XZMC) {
// console.log(111);
// }
// });
// });
// });
})
.catch(err => {});
}
@ -1974,26 +2179,23 @@ function mbHandle() {
});
fenleiRef.value = town;
getAreaFenlei();
console.log('11');
})
.catch(err => {});
}
// 地图移动时弹窗跟随
function infoWindowPostRender() {
// let viewer = viewers.value;
if (townZuowu.value && townZuowu.value.lon && townZuowu.value.lat) {
if (clickInfoMap.value.lon && clickInfoMap.value.lat) {
//经纬度转为世界坐标
const gisPosition = Cesium.Cartesian3.fromDegrees(
Number(townZuowu.value.lon),
Number(townZuowu.value.lat),
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('pop');
pop.style.top = windowPosition.y - 10 + 'px';
@ -2006,27 +2208,14 @@ function hiddenOverlayChart() {
// 移除各种高亮
XZDM = '';
XZQDM = '';
removeWms(['village_CQL']);
removeWms(['aaa']);
deleteEntityByName('villageLine');
deleteEntityByName('townLine');
const pop = document.getElementById('pop');
pop.style.display = 'none'; // 清除监听事件
value.value = '370211';
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
// 重定位
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 2,
});
removeWms(['gbznt'], true);
// addWms('shuzisannong:huangdaoqu_town', 'tl');
flag.value = false;
deleteEntityByName('townLine');
}
//显示弹窗
function showOverlayChart(position) {
console.log(position);
const pop = document.getElementById('pop');
pop.style.display = 'block';
pop.style.position = 'absolute';
@ -2037,9 +2226,7 @@ function showOverlayChart(position) {
// function random(min, max) {
// return Math.floor(Math.random() * (max - min)) + min;
// }
/*-------------------------------------------------------------------------------------------*/
// }/*-------------------------------------------------------------------------------------------*/
</script>
<style lang="scss" scoped>
@ -2471,32 +2658,40 @@ $height: calc(100vh - 100px);
#popup {
border-radius: 5px;
background: rgba(2, 31, 26, 0.6);
background: rgba(2, 31, 26, 1);
display: none;
// justify-content: flex-start;
// align-items: flex-end;
padding: 30px 8px 20px 8px;
border: 2px solid rgba(4, 153, 153, 1);
& > div:nth-child(1) {
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 1);
// margin-top: 20px;
line-height: 24px;
}
& > 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);
.rowWra {
display: flex;
justify-content: center;
align-items: center;
padding: 2px 10px 2px 10px;
// margin-top: 20px;
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 {
@ -2515,31 +2710,26 @@ $height: calc(100vh - 100px);
// justify-content: flex-start;
// align-items: flex-end;
padding: 30px 8px 20px 8px;
border: 2px solid rgba(4, 153, 153, 1);
.cancel {
position: absolute;
right: 10px;
top: 5px;
color: rgba(255, 255, 255, 1);
cursor: pointer;
}
& > div {
.rowWra {
display: flex;
margin-bottom: 10px;
& > div:nth-child(1) {
justify-content: space-between;
& > 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;
}
& > div:nth-child(2) {
& > span:nth-child(2) {
color: rgba(255, 255, 255, 1);
width: 129px;
width: 169px;
height: 24px;
opacity: 1;
border-radius: 2px;
@ -2548,9 +2738,16 @@ $height: calc(100vh - 100px);
justify-content: center;
align-items: center;
padding: 2px 10px 2px 10px;
// margin-top: 20px;
}
}
.cancel {
position: absolute;
right: 10px;
top: 5px;
color: rgba(255, 255, 255, 1);
cursor: pointer;
}
}
.back_button {
position: absolute;