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

307
src/views/meteorological/remoteSense/drought/Drought.vue
View File

@ -179,27 +179,14 @@
</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 class="rowWra">
<span>地区：</span>
<span>{{ regionName }}</span>
</div>
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
<span>{{ item.level }}：</span>
<span>{{ parseInt(item.area).toFixed(2) }}亩</span>
</div>
</div>
<div class="cancel" @click="hiddenOverlayChart">X</div>
</div>
@ -421,6 +408,9 @@ let checkListdata = ref([]);
let SwitchFlag = ref(true);
let timeArr = ref([]); //年数组
const num = ref(1);
let cunVar = ref(null);
let zhenVar = ref(null);
let regionName = ref('');
let amount = ref([
{
湿润: 0,
@ -483,11 +473,11 @@ let tableData = ref([]);
// 图层字典
let layersDic = {
湿润: 'shuzisannong:xiaomai',
适宜: 'shuzisannong:dadou',
轻度干旱: 'shuzisannong:digua',
中度干旱: 'shuzisannong:huasheng',
重度干旱: 'shuzisannong:lanmei',
湿润: 'shirun',
适宜: 'shiyi',
轻度干旱: 'qing_ganhan',
中度干旱: 'medium_ganhan',
重度干旱: 'zhong_ganhan',
};
// 组件挂载完成后执行
@ -605,18 +595,148 @@ function initMap() {
// 去除logo
viewer.cesiumWidget.creditContainer.style.display = 'none';
addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 0,
});
// 图层点击事件
layerClick();
// layerClick();
// 蒙版
mbHandle();
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;
getareaStatisticsDrought({ divisions: value.value }).then(res => {
clickInfoMap.value = {
info: res.data,
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实体颜色
@ -1106,27 +1226,12 @@ watch(
}
});
newData.forEach(item => {
switch (item) {
case '湿润':
addvillages(2, item);
break;
case '适宜':
addvillages(3, item);
break;
case '轻度干旱':
addvillages(4, item);
break;
case '中度干旱':
addvillages(5, item);
break;
case '重度干旱':
addvillages(6, item);
break;
default:
break;
if (layersDic[item]) {
addWms(layersDic[item], layersDic[item]);
}
});
addWms('shuzisannong:huangdaoqu_town', 'tl');
cun(); //添加村
zhen(); //添加镇
} else if (val.length < oldVal.length) {
// 挑选出减少的数据
const newData = oldVal.filter(item => {
@ -1136,8 +1241,7 @@ watch(
}
});
newData.forEach(item => {
console.log(item);
removeWms([item]);
removeWms([layersDic[item]]);
});
}
}
@ -1426,27 +1530,13 @@ const getadministratives = city => {
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');
getareaStatisticsDroughts(value.value);
getproportionOfAreas(value.value);
@ -1464,7 +1554,6 @@ const selectTab = () => {
return;
}
getadministratives(value.value);
// let arr = [...Township.arr];
// console.log('arr:', arr);
// arr.forEach(item => {
@ -2118,21 +2207,27 @@ function farmland() {
useEcharts(farmlandDivIntance, option);
}
// 添加wms
function addWms(layers, customName) {
function addWms(layers, customName, bottom) {
let map = new Cesium.WebMapServiceImageryProvider({
url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
layers: layers, //图层名
url: serverAPI.geoserverUrl + `/map-${layers}/wms111/`,
layers: layers + '@' + layers, //图层名
parameters: {
service: 'WMS',
format: 'image/png',
srs: 'EPSG:4326',
VERSION: '1.1.1',
transparent: true, //是否透明
// CQL_FILTER: `crop in (${name})`,
exceptions: 'application/vnd.ogc.se_inimage',
},
});
map.customName = customName; //自己定义各种属性
let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
if (customName.indexOf('gbznt') > -1) {
// viewer.imageryLayers.lower(dd);//将图层下移一层
// if (customName.indexOf('gbznt') > -1) {
// // viewer.imageryLayers.lower(dd);//将图层下移一层
// viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
// viewer.imageryLayers.raise(dd); //将图层上移一层
// }
if (bottom) {
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
viewer.imageryLayers.raise(dd); //将图层上移一层
}
@ -2189,7 +2284,7 @@ function ChartClick(item) {
}
if (!cz) {
// 添加高标准农田服务
addWms(layername, layername + 'gbznt');
addWms(layername, layername);
townZuowu.value.label = [
{ crop: '小麦', Shape_Area: '53000' },
{ crop: '地瓜', Shape_Area: '50000' },
@ -2629,7 +2724,6 @@ function infoWindowPostRender() {
viewer.scene,
gisPosition
);
if (Cesium.defined(windowPosition)) {
const pop = document.getElementById('popup');
if (pop) {
@ -2687,6 +2781,15 @@ function hiddenOverlayChart() {
pop.style.display = 'none'; // 清除监听事件
}
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
value.value = '370211';
deleteEntityByName('townLine');
getTownships(); //更新镇的数据
getadministratives(value.value);
getproportionOfAreas(value.value);
getareaStatisticsDroughts(value.value)
ASdivision();
areachar();
typesof();
}
//显示弹窗
function showOverlayChart(position) {
@ -3391,58 +3494,42 @@ $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);
.rowWra {
display: flex;
align-items: center;
p {
margin-bottom: 10px;
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;
}
& > span:nth-child(2) {
color: rgba(255, 255, 255, 1);
width: 179px;
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;
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;