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

BIN
src/views/Leaflet/marker-icon.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 849 B

411
src/views/crops/classify/Classify.vue
View File

@ -186,16 +186,20 @@
</div>
<div id="pop"></div>
<div id="popup1">
<div v-for="(item, index) in clickInfoMap.info" :key="index">
<div>
<div class="rowWra">
<span>作物：</span>
<span>{{ item.crop }}</span>
<span>地区：</span>
<span>{{ regionName }}</span>
</div>
<div class="rowWra">
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
<span>{{ item.name }}：</span>
<span>{{ item.area }}亩</span>
</div>
<!-- <div class="rowWra">
<span>面积：</span>
<span>{{ item.Shape_Area.toFixed(2) }} 亩</span>
</div>
<div class="rowWra">
<span>{{ item.area}} 亩</span>
</div> -->
<!-- <div class="rowWra">
<span>镇名：</span>
<span>{{ item.town }}</span>
</div>
@ -206,7 +210,7 @@
<div class="rowWra" v-if="item.people">
<span>土地所有人：</span>
<span>{{ item.people }}</span>
</div>
</div> -->
</div>
<div class="cancel" @click="hiddenOverlayChart">X</div>
</div>
@ -397,6 +401,9 @@ const insectarr = ref([]);
let checkListdata = ref([]);
let timeArr = ref([]); //年数组
let SwitchFlag = ref(true);
let cunVar = ref(null);
let zhenVar = ref(null);
let regionName = ref('');
let highStandard = [
'高标准农田1.0',
'高标准农田2.0',
@ -866,24 +873,24 @@ let dic = {
小麦: { color: 'rgba(25, 196, 22, 1)', disabled: false },
玉米: { color: 'rgba(255, 240, 26, 1)', disabled: true },
大豆: { color: 'rgba(255, 184, 148, 1)', disabled: false },
地瓜: { color: 'rgba(255, 77, 77, 1)', disabled: false },
地瓜: { color: 'rgba(255, 18, 18, 1)', disabled: false },
花生: { color: 'rgba(255, 140, 255, 1)', disabled: false },
蓝莓: { color: 'rgba(26, 110, 255, 1)', disabled: false },
蓝莓: { color: ' rgba(0, 153, 255, 1)', disabled: false },
茶叶: { color: 'rgba(0, 209, 195, 1)', disabled: false },
马铃薯: { color: 'rgba(255, 171, 87, 1)', disabled: true },
马铃薯: { color: 'rgba(253, 127, 1, 1)', disabled: true },
白菜和萝卜: { color: 'rgba(201, 255, 148, 1)', disabled: true },
其他: { color: 'rgba(140, 26, 255, 1)', disabled: false },
其他: { color: 'rgba(166, 224, 255, 1)', disabled: false },
};
// 图层字典
let layersDic = {
小麦: 'shuzisannong:xiaomai',
小麦: 'xiaomai',
// 玉米: 'shuzisannong:yumi',
大豆: 'shuzisannong:dadou',
地瓜: 'shuzisannong:digua',
花生: 'shuzisannong:huasheng',
蓝莓: 'shuzisannong:lanmei',
茶叶: 'shuzisannong:chaye',
其他: 'shuzisannong:other',
大豆: 'dadou',
地瓜: 'digua',
花生: 'huasheng',
蓝莓: 'lanmei',
茶叶: 'chaye',
其他: 'qitanongzuowu',
// 马铃薯: 'rgba(225, 153, 75, 1)',
// 白菜和萝卜: 'rgba(166, 209, 82, 1)',
};
@ -954,7 +961,7 @@ let dictionaryArr = [
// 透明度
opacity: 0.8,
// 扇形颜色
color: 'rgba(255, 77, 77, 1)',
color: 'rgba(255, 18, 18, 1)',
},
label: {
show: true,
@ -969,7 +976,7 @@ let dictionaryArr = [
// 透明度
opacity: 0.8,
// 扇形颜色
color: 'rgba(26, 110, 255, 1)',
color: ' rgba(0, 153, 255, 1)',
},
label: {
show: true,
@ -999,7 +1006,7 @@ let dictionaryArr = [
// 透明度
opacity: 0.8,
// 扇形颜色
color: 'rgba(255, 171, 87, 1)',
color: 'rgba(253, 127, 1, 1)',
},
label: {
show: true,
@ -1029,7 +1036,7 @@ let dictionaryArr = [
// 透明度
opacity: 0.8,
// 扇形颜色
color: 'rgba(140, 26, 255, 1)',
color: 'rgba(166, 224, 255, 1)',
},
label: {
show: true,
@ -1070,7 +1077,7 @@ function initonMounted() {
typesof(); //图表
farmland(); //图表
ASdivision(); //图表
getFarmland();
// getFarmland();
gethighStandards(); //高标准农田
theTimes(); //年
for (const key in dic) {
@ -1086,7 +1093,6 @@ function initonMounted() {
localStorage.setItem(router.currentRoute.value.path, true);
}
onUpdated(() => {
console.log(localStorage.getItem(router.currentRoute.value.path));
if (localStorage.getItem(router.currentRoute.value.path) == 'false') {
document.querySelector('.mode').innerText = '地图模式';
} else {
@ -1173,32 +1179,221 @@ function initMap() {
});
// 图层点击事件
layerClick();
// layerClick();
// 监听相机移动，实现根据缩放级别村级矢量的显隐
// cameraMove()
// 图层遮罩
// maskLayer()
// // 添加镇级矢量
// addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
// let cityDS = Cesium.GeoJsonDataSource.load(
// `${serverAPI.geoserverUrl}/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Ahuangdaoqu_town&maxFeatures=50&outputFormat=application%2Fjson`,
// {
// fill: Cesium.Color.YELLOW.withAlpha(0.01),
// strokeWidth: 3,
// markerSymbol: '?',
// clampToGround: true,
// outline: true,
// outlineColor: Cesium.Color.BLACK,
// }
// );
// viewer.dataSources.add(cityDS);
zoomInCenter(viewer);
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
viewer.scene.screenSpaceCameraController.enableRotate = false;
// 如果为true，则允许用户平移地图。如果为假，相机将保持锁定在当前位置。此标志仅适用于2D和Columbus视图模式。
// viewer.scene.screenSpaceCameraController.enableTranslate = false;
// // 如果为真，允许用户放大和缩小。如果为假，相机将锁定到距离椭圆体的当前距离
// viewer.scene.screenSpaceCameraController.enableZoom = false;
// // 如果为真，则允许用户倾斜相机。如果为假，相机将锁定到当前标题。这个标志只适用于3D和哥伦布视图。
// viewer.scene.screenSpaceCameraController.enableTilt = false;
addWheelEvent(); //鼠标滚动控制村级矢量显示隐藏
// addEvent(); //点击事件
clickSearch()
}
const checkList = ref(['false']);
//鼠标滑轮事件
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 clickSearch = () => {
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(event => {
var gaoliang = viewer.entities.getById('gaoliang');
var gaoliangline = viewer.entities.getById('gaoliangline');
if (gaoliang) {
viewer.entities.remove(gaoliang);
viewer.entities.remove(gaoliangline);
gaoliang = null;
gaoliangline = null;
}
var pickRay = viewer.camera.getPickRay(event.position);
var featuresPromise = viewer.imageryLayers.pickImageryLayerFeatures(
pickRay,
viewer.scene
);
if (!Cesium.defined(featuresPromise)) {
console.log('No features picked.');
} else {
Cesium.when(featuresPromise, features => {
if (features.length > 0) {
var start = features[0].data.outerHTML.indexOf('<gml:coordinates>');
var end = features[0].data.outerHTML.indexOf('</gml:coordinates>');
var result = features[0].data.outerHTML.substring(start + 17, end);
var coordArr = result.split(' ').map(coord => {
const [lon, lat] = coord.split(',');
return Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat), 0);
});
var hierarchy = new Cesium.PolygonHierarchy(coordArr);
var entity = viewer.entities.add({
id: 'gaoliang',
polygon: {
hierarchy: hierarchy,
material: Cesium.Color.YELLOW.withAlpha(0),
},
});
let e = viewer.entities.getById('gaoliang');
heightEntity = viewer.entities.add({
id: 'gaoliangline',
polyline: {
positions: e.polygon.hierarchy.getValue().positions,
width: 10,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.5, // 一个数字属性，指定发光强度，占总线宽的百分比。
color: Cesium.Color.ORANGERED,
}),
clampToGround: true,
},
});
}
});
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};
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;
console.log(features);
if (!features[features.length - 1].properties.XZQDM) {
value.value = features[features.length - 1].properties.XZDM;
regionName.value = features[features.length - 1].properties.XZMC;
getcropper({ divisions: value.value }).then(res => {
clickInfoMap.value = {
info: res.data,
lon: lon,
lat: lat,
};
});
selectTab();
showOverlayChart(event.position); // 添加地图移动监听：使地图移动弹窗跟着移动
viewer.scene.postRender.addEventListener(infoWindowPostRender);
} 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,
// };
// });
}
// This function is called asynchronously when the list of picked features is available.
} catch (error) {
console.error('Error occurred:', error);
}
}
})();
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};
const checkList = ref(['false']);
function getLevel(height) {
if (height > 48000000) {
return 0;
@ -1273,11 +1468,12 @@ watch(
});
newData.forEach(item => {
if (layersDic[item]) {
addWms(layersDic[item], item + 'zuowu');
addWms(layersDic[item], layersDic[item]);
}
});
// 添加镇级矢量
addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
cun(); //添加村
zhen(); //添加镇
} else if (val.length < oldVal.length) {
// 挑选出减少的数据
const newData = oldVal.filter(item => {
@ -1288,7 +1484,7 @@ watch(
});
newData.forEach(item => {
if (layersDic[item]) {
removeWms([item + 'zuowu']);
removeWms([layersDic[item]]);
}
});
}
@ -1298,13 +1494,15 @@ watch(
// 添加wms
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; //自己定义各种属性
@ -1318,6 +1516,7 @@ function addWms(layers, customName, bottom) {
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
viewer.imageryLayers.raise(dd); //将图层上移一层
}
return map;
}
// 根据根据级别显示村级矢量
function cameraMove() {
@ -1345,7 +1544,7 @@ function cameraMove() {
// }
// 添加全部
addWms('shuzisannong:huangdaoqu_village', 'village');
addWms('huangdaoqu_village', 'huangdaoqu_village');
} else {
removeWms(['village'], false);
}
@ -1397,7 +1596,7 @@ function maskLayer() {
dataSources[k].name &&
dataSources[k].name === 'geojsonDataSource'
) {
// this.viewer.dataSources.remove(dataSources[k])
// viewer.dataSources.remove(dataSources[k])
let entities = dataSources[k].entities.values;
for (var i = 0; i < entities.length; i++) {
let entity = entities[i];
@ -1434,7 +1633,6 @@ let XZDM = '';
function layerClick() {
let 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);
@ -1449,7 +1647,7 @@ function layerClick() {
const index = layers.findIndex(
item =>
item._imageryProvider._layers &&
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
item._imageryProvider._layers === 'huangdaoqu_town@huangdaoqu_town'
);
if (index > -1) {
const providerPoint = layers[index];
@ -1502,10 +1700,10 @@ function layerClick() {
removeWms(['village_CQL']);
// 添加新的
// 更改为根据级别添加村级矢量
addvillage(
`XZDM=${newData.properties.XZDM}`,
'village_CQL'
);
// addvillage(
// `XZDM=${newData.properties.XZDM}`,
// 'village_CQL'
// );
// 隐藏pop
hiddenOverlayChart();
} else {
@ -1589,7 +1787,7 @@ async function zuowuClick(layers, cartographic, level, xy, movement) {
};
}
showOverlayChart(coordinate); // 添加地图移动监听：使地图移动弹窗跟着移动
viewer.scene.postRender.addEventListener(infoWindowPostRender);
// viewer.scene.postRender.addEventListener(infoWindowPostRender);
} else {
hiddenOverlayChart(); // 清除监听事件 // viewer.scene.postRender.removeEventListener(infoWindowPostRender);
}
@ -1624,24 +1822,6 @@ function addBoundaryHandle(data, name, color) {
});
});
}
// 添加村
// 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 ：是否模糊查询
@ -1658,7 +1838,7 @@ function removeWms(nameArry, isMohu) {
) {
if (isMohu) {
if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
viewer.imageryLayers.remove(layers[f]);
viewer.imageryLayers.remove(layers[f] + '@' + layers[f]);
}
} else {
if (layers[f]._imageryProvider.customName === item) {
@ -1707,19 +1887,20 @@ function infoWindowPostRender() {
}
// 隐藏弹窗
function hiddenOverlayChart() {
// let viewer = viewers.value;
const pop = document.getElementById('popup1');
pop.style.display = 'none'; // 清除监听事件
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
deleteEntityByName('landtype');
value.value = '370211';
deleteEntityByName('townLine');
selectTab();
}
//显示弹窗
function showOverlayChart(position) {
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.display = 'block';
pop.style.zIndex = 99;
}
@ -1740,18 +1921,18 @@ function SwitchMode() {
}
const formLandRef = ref([]);
// 获取高标准农田
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 => {
formLandRef.value = res.data.features;
})
.catch(err => {});
}
// 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 => {
// formLandRef.value = res.data.features;
// })
// .catch(err => {});
// }
//每页条数
const handleCurrentChange = val => {
currentPage.value = val;
@ -1771,11 +1952,6 @@ function back() {
value.value = '370211';
// selectTab();
deleteEntityByName('townLine');
removeWms(['village_CQL']);
getcropTypeStatisticss('370211');
removeWms(['huangdaoqu_town'], true);
removeWms(['shuzisannong:farmlandgbzn'], true);
addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 2,
@ -2028,29 +2204,15 @@ const selectTab = () => {
XZDM = null;
deleteEntityByName('townLine');
removeWms(['village_CQL']);
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 2,
});
return;
}
getvillages(value.value);
areachar();
let arr = [...Township.arr];
getgarrison().then(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,
});
}
});
});
@ -2084,7 +2246,7 @@ const selectTab = () => {
// 移除镇高亮
deleteEntityByName('townLine');
// 添加新的
addvillage(`XZDM=${value.value}`, 'village_CQL');
// addvillage(`XZDM=${value.value}`, 'village_CQL');
};
//列表模式-年
const theTimes = () => {
@ -2478,7 +2640,7 @@ function typesof() {
rotateSensitivity: 1,
zoomSensitivity: 0,
panSensitivity: 0,
autoRotate: true,
autoRotate: false,
distance: 300,
},
// 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
@ -3027,16 +3189,16 @@ function ASdivision() {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(255, 77, 77, 1)', // 设置边框颜色
borderColor: 'rgba(255, 18, 18, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(255, 77, 77, 1)', // 0% 处的颜色
color: 'rgba(255, 18, 18, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 77, 77, 1)', // 100% 处的颜色
color: 'rgba(255, 18, 18, 1)', // 100% 处的颜色
},
],
},
@ -3178,16 +3340,16 @@ function ASdivision() {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(26, 110, 255, 1)', // 设置边框颜色
borderColor: ' rgba(0, 153, 255, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(26, 110, 255, 1)', // 0% 处的颜色
color: ' rgba(0, 153, 255, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(26, 110, 255, 1)', // 100% 处的颜色
color: ' rgba(0, 153, 255, 1)', // 100% 处的颜色
},
],
},
@ -3216,16 +3378,16 @@ function ASdivision() {
barBorderRadius: [0, 0, 0, 0],
barBorderRadius: [0, 0, 0, 0], //
borderWidth: 1, // 设置边框宽度
borderColor: 'rgba(140, 26, 255, 1)', // 设置边框颜色
borderColor: 'rgba(166, 224, 255, 1)', // 设置边框颜色
color: {
colorStops: [
{
offset: 0,
color: 'rgba(140, 26, 255, 1)', // 0% 处的颜色
color: 'rgba(166, 224, 255, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(140, 26, 255, 1)', // 100% 处的颜色
color: 'rgba(166, 224, 255, 1)', // 100% 处的颜色
},
],
},
@ -3407,7 +3569,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 77, 77, 1)',
color: 'rgba(255, 18, 18, 1)',
},
data: SweetPotato,
},
@ -3427,7 +3589,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(26, 110, 255, 1)',
color: ' rgba(0, 153, 255, 1)',
},
data: Blueberries,
},
@ -3447,7 +3609,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(255, 171, 87, 1)',
color: 'rgba(253, 127, 1, 1)',
},
data: Potatoes,
},
@ -3467,7 +3629,7 @@ function chartModes() {
barWidth: 13,
stack: '分类',
itemStyle: {
color: 'rgba(140, 26, 255, 1)',
color: 'rgba(166, 224, 255, 1)',
},
data: Other,
},
@ -3733,7 +3895,6 @@ $height: calc(100vh - 100px);
.typesofDiv {
width: 375px;
height: 397px;
background: url('@/assets/images/bj1_00000_iSpt.png');
background-repeat: no-repeat;
background-size: 85% 85%;
background-position: center;
@ -4051,7 +4212,7 @@ $height: calc(100vh - 100px);
& > span:nth-child(2) {
color: rgba(255, 255, 255, 1);
width: 129px;
width: 165px;
height: 24px;
opacity: 1;
border-radius: 2px;

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;

319
src/views/crops/site/Site.vue
View File

@ -157,16 +157,30 @@
</div>
<div id="popup">
<div>
等级：
<p>{{ clickInfoMap.grade }}</p>
</div>
<div>
经度：
<p>{{ clickInfoMap.lon }}</p>
</div>
<div>
纬度：
<p>{{ clickInfoMap.lat }}</p>
<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.good }}亩</span>
</div>
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
<span>较好：</span>
<span>{{ item.better }}亩</span>
</div>
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
<span>适中：</span>
<span>{{ item.moderate }}亩</span>
</div>
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
<span>较差：</span>
<span>{{ item.difference }}亩</span>
</div>
<div v-for="(item, index) in clickInfoMap.info" :key="index" class="rowWra">
<span>差：</span>
<span>{{ item.poor }}亩</span>
</div>
</div>
<div class="cancel" @click="hiddenOverlayChart">X</div>
</div>
@ -375,6 +389,9 @@ let pageSize = ref(12); //每页条数
let tableNewData = ref([]);
let tableItem = ref([]);
let operate = ref(true);
let cunVar = ref(null);
let zhenVar = ref(null);
let regionName = ref('');
let amount = ref([
{
好: 0,
@ -418,6 +435,13 @@ let dic = {
较差: { color: 'rgba(239, 152, 0, 1)', disabled: false },
差: { color: 'rgba(247, 85, 0, 1)', disabled: false },
};
let layersDic = {
好: 'hao',
较好: 'jiaohao',
适中: 'shizhong',
较差: 'jiaocha',
差: 'cha',
};
watch(
() => checkList.value,
(val, oldVal) => {
@ -430,27 +454,12 @@ watch(
}
});
newData.forEach(item => {
switch (item) {
case '好':
addvillages(5, item);
break;
case '较好':
addvillages(4, item);
break;
case '适中':
addvillages(3, item);
break;
case '较差':
addvillages(2, item);
break;
case '差':
addvillages(1, 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 => {
@ -460,8 +469,7 @@ watch(
}
});
newData.forEach(item => {
console.log(item);
removeWms([item]);
removeWms([layersDic[item]]);
});
}
}
@ -503,7 +511,6 @@ function initonMounted() {
for (const key in dic) {
if (dic[key].disabled !== true) {
console.log(key);
checkListdata.value.push(key);
}
}
@ -589,11 +596,149 @@ function initMap() {
});
// 图层点击事件
layerClick();
// layerClick();
// 蒙版
mbHandle();
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
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;
getfarmland({ 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实体颜色
@ -978,6 +1123,7 @@ function removeWms(nameArry, isMohu) {
}
} else {
if (layers[f]._imageryProvider.customName === item) {
console.log(layers[f]);
viewer.imageryLayers.remove(layers[f]);
}
}
@ -1341,27 +1487,13 @@ const getvillages = 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,
});
getfarmlands(value.value); //作物长势等级面积统计
getstatisticss(value.value); //作物长势等级面积占比
if (value.value !== '370211') {
@ -1506,7 +1638,7 @@ const Deta4 = item => {
getadministrativeDivisions({ divisions: value.value, whetherToDownload: false }).then(
res => {
res.data.forEach(item => {
console.log(item)
console.log(item);
arr.push({
region: item.subregionName,
good: item.good,
@ -2100,33 +2232,36 @@ function farmland() {
}
// 添加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 (bottom) {
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
viewer.imageryLayers.raise(dd); //将图层上移一层
}
}
//返回
function back() {
removeWms(['gbznt'], true);
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 2,
});
getTownships('370211');
delete townZuowu.value.XZQMC;
deleteEntityByName('townLine');
deleteEntityByName('villageLine');
value.value = '370211';
selectTab();
flag.value = false;
hiddenOverlayChart();
}
// 图表点击事件
function ChartClick(item) {
@ -2829,6 +2964,12 @@ function hiddenOverlayChart() {
pop.style.display = 'none'; // 清除监听事件
}
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
value.value = '370211';
deleteEntityByName('townLine');
getfarmlands(value.value); //作物长势等级面积统计
getstatisticss(value.value); //作物长势等级面积占比
getTownships(value.value)
// selectTab();
}
//显示弹窗
function showOverlayChart(position) {
@ -3295,58 +3436,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;
& > 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: 165px;
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;

405
src/views/index.vue
View File

File diff suppressed because one or more lines are too long

2912
src/views/meteorological/monitor/DryHotAir/index.vue
View File

File diff suppressed because one or more lines are too long

2911
src/views/meteorological/monitor/FloodWarning/index.vue
View File

File diff suppressed because one or more lines are too long

665
src/views/meteorological/monitor/drought/index.vue
View File

File diff suppressed because one or more lines are too long

2911
src/views/meteorological/monitor/freeze/index.vue
View File

File diff suppressed because one or more lines are too long

2345
src/views/meteorological/monitor/information/index.vue
View File

File diff suppressed because one or more lines are too long

323
src/views/meteorological/remoteSense/FloodExtraction/FloodExtraction.vue
View File

@ -212,16 +212,14 @@
</el-collapse>
<div id="popup">
<div>
等级：
<p>{{ clickInfoMap.grade }}</p>
</div>
<div>
经度：
<p>{{ clickInfoMap.lon }}</p>
</div>
<div>
纬度：
<p>{{ clickInfoMap.lat }}</p>
<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.yesFloodingPercentage }}亩</span>
</div>
</div>
<div class="cancel" @click="hiddenOverlayChart">X</div>
</div>
@ -336,7 +334,7 @@ const formLandRef = ref([]);
const flag = ref(false);
let leftWraFlag = ref(false);
let rightWraFlag = ref(false);
const checkList = ref(['false']);
const checkList = ref([]);
let checkListdata = ref([]);
let areacharData = reactive({ lable: [], value: [] }); //冷冻等级面积
let typesofData = ref([]); //面积统计
@ -351,6 +349,9 @@ let currentPage = ref(1); //当前页
let pageSize = ref(12); //每页条数
let timeArr = ref([]); //年数组
const chartModeDiv = ref(null);
let cunVar = ref(null);
let zhenVar = ref(null);
let regionName=ref('')
let amount = ref([
{
洪涝: 0,
@ -367,12 +368,6 @@ let dic = {
洪涝区: { color: 'rgba(9, 187, 222, 1)', disabled: false },
};
let highStandardArr = ref([]);
watch(
() => Township.arr,
val => {
console.log('val:', val);
}
);
//行政区划数据
var data = {
title: [],
@ -389,9 +384,13 @@ let dd = {
白菜和萝卜: [],
其他: [],
};
let layersDic = {
洪涝区: 'honglao',
};
watch(
() => checkList.value,
(val, oldVal) => {
console.log(val, oldVal);
if (val.length > oldVal.length) {
// 挑选出增多的数据
const newData = val.filter(item => {
@ -401,14 +400,12 @@ watch(
}
});
newData.forEach(item => {
switch (item) {
case '洪涝区':
addvillages(2, item);
break;
default:
break;
if (layersDic[item]) {
addWms(layersDic[item], layersDic[item]);
}
});
zhen();
cun();
} else if (val.length < oldVal.length) {
// 挑选出减少的数据
const newData = oldVal.filter(item => {
@ -418,7 +415,7 @@ watch(
}
});
newData.forEach(item => {
removeWms([item]);
removeWms([layersDic[item]]);
});
}
}
@ -435,9 +432,9 @@ let TypeTime = {
// 组件挂载完成后执行
onMounted(() => {
initonMounted()
initonMounted();
});
function initonMounted(){
function initonMounted() {
getydamageAreas('370211'); //农作物受灾面积统计
getproportions('370211'); //农作物受灾面积占比
gethighStandards(); //高标准农田冷冻等级面积统计
@ -447,7 +444,6 @@ function initonMounted(){
initMap();
areachar();
typesof();
getFarmland();
for (const key in dic) {
if (dic[key].disabled !== true) {
checkListdata.value.push(key);
@ -542,19 +538,162 @@ function initMap() {
});
// 去除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();
// layerClick();
// 蒙版
mbHandle();
// mbHandle();
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
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;
gettownInformation({ divisions: value.value }).then(res => {
let arr = [];
res.data.forEach(item => {
if (
item.name == 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实体颜色
@ -625,19 +764,19 @@ function getLevel(height) {
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 => {});
}
// 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 = '';
@ -1263,15 +1402,15 @@ const selectTab = () => {
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(
// item.bbox[0],
// item.bbox[1],
// item.bbox[2],
// item.bbox[3]
// ),
// duration: 0,
// });
}
});
});
@ -1468,7 +1607,7 @@ function areachar() {
top: '5%',
data: ['面积'],
right: '5%',
bottom:5,
bottom: 5,
icon: 'rect',
textStyle: {
fontSize: 14, //字体大小
@ -1896,21 +2035,22 @@ function chartModes() {
useEcharts(ASdivisionDivIntance, 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 (bottom) {
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
viewer.imageryLayers.raise(dd); //将图层上移一层
}
@ -1926,7 +2066,6 @@ function back() {
value.value = '370211';
selectTab();
if (flag.value === '1') {
console.log(flag.value);
addWms('shuzisannong:huangdaoqu_town', 'tl');
}
viewer.camera.flyTo({
@ -2124,8 +2263,8 @@ function hiddenOverlayChart() {
if (pop) {
pop.style.display = 'none'; // 清除监听事件
}
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
deleteEntityByName('townLine');
}
//显示弹窗
function showOverlayChart(position) {
@ -2720,58 +2859,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: 165px;
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;

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;

16
src/views/meteorological/remoteSense/estimate/index.vue
View File

@ -567,7 +567,7 @@ function initMap() {
// 去除logo
viewer.cesiumWidget.creditContainer.style.display = 'none';
addWms('shuzisannong:huangdaoqu_town', 'tl');
addWms('huangdaoqu_town', 'huangdaoqu_town');
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
duration: 0,
@ -2376,21 +2376,22 @@ function soil() {
}
// 添加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 (bottom) {
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
viewer.imageryLayers.raise(dd); //将图层上移一层
}
@ -2404,7 +2405,6 @@ function back() {
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),

329
src/views/meteorological/remoteSense/freeze/Freeze.vue
View File

@ -178,16 +178,14 @@
</el-collapse>
<div id="popup">
<div>
等级：
<p>{{ clickInfoMap.grade }}</p>
</div>
<div>
经度：
<p>{{ clickInfoMap.lon }}</p>
</div>
<div>
纬度：
<p>{{ clickInfoMap.lat }}</p>
<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>
@ -398,6 +396,9 @@ let operate = ref(true);
let tableNewData = ref([]);
const chartModeDiv = ref(null);
let SwitchFlag = ref(true);
let cunVar = ref(null);
let zhenVar = ref(null);
let regionName = ref('');
let amount = ref([
{
无冻害: 0,
@ -434,6 +435,13 @@ let dic = {
中度冻害: { color: 'rgba(234, 165, 93, 1)', disabled: false },
重度冻害: { color: 'rgba(215, 25, 28, 0.8)', disabled: false },
};
// 图层字典
let layersDic = {
无冻害: 'no',
轻度冻害: 'qing',
中度冻害: 'medium',
重度冻害: 'serious',
};
watch(
() => checkList.value,
(val, oldVal) => {
@ -446,24 +454,12 @@ watch(
}
});
newData.forEach(item => {
switch (item) {
case '无冻害':
addvillages(1, item);
break;
case '轻度冻害':
addvillages(2, item);
break;
case '中度冻害':
addvillages(3, item);
break;
case '重度冻害':
addvillages(4, item);
break;
default:
break;
if (layersDic[item]) {
addWms(layersDic[item], layersDic[item]);
}
});
addWms('shuzisannong:huangdaoqu_town', 'shuzisannong:huangdaoqu_town');
cun(); //添加村
zhen(); //添加镇
} else if (val.length < oldVal.length) {
// 挑选出减少的数据
const newData = oldVal.filter(item => {
@ -473,8 +469,7 @@ watch(
}
});
newData.forEach(item => {
console.log(item);
removeWms([item]);
removeWms([layersDic[item]]);
});
}
}
@ -621,11 +616,148 @@ function initMap() {
});
// 图层点击事件
layerClick();
// layerClick();
// 蒙版
mbHandle();
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 450; //相机的高度的最小值
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 720000; //相机高度的最大值
viewer.scene.screenSpaceCameraController._minimumZoomRate = 30000; // 设置相机缩小时的速率
viewer.scene.screenSpaceCameraController._maximumZoomRate = 5906376272000; //设置相机放大时的速率
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;
getstatisticsOfTheArea({ 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实体颜色
@ -729,7 +861,7 @@ function layerClick() {
const index = layers.findIndex(
item =>
item._imageryProvider._layers &&
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
item._imageryProvider._layers === 'huangdaoqu_town@huangdaoqu_town'
);
if (index > -1) {
const providerPoint = layers[index];
@ -1196,8 +1328,10 @@ const theTimes = () => {
//冷冻等级面积统计
const getstatisticsOfTheAreas = city => {
areacharData = reactive({ lable: [], value: [] });
areacharData.lable = [];
areacharData.value = [];
getstatisticsOfTheArea({ divisions: city }).then(res => {
console.log(areacharData.lable, areacharData.value);
res.data.forEach(item => {
areacharData.lable.push(item.level);
areacharData.value.push(item.area);
@ -1259,6 +1393,12 @@ const geteachFreezingGradeAreas = () => {
//镇
const getTownships = city => {
dd = {
无冻害: [],
轻度冻害: [],
中度冻害: [],
重度冻害: [],
};
getTownship({ divisions: city }).then(res => {
Township.brr = res.data;
Township.arr = res.data.sort((a, b) => {
@ -1297,7 +1437,7 @@ const getTownships = city => {
}
});
Object.keys(dd).forEach(it => {
const index = town.findIndex(a => a && a.type === it);
const index = town.findIndex(a => a && a.type === it && a.area > 0);
if (index > -1) {
dd[it].push(1);
} else {
@ -1348,41 +1488,28 @@ 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');
getstatisticsOfTheAreas(value.value); //冷冻等级面积统计
getproportionOfAreas(value.value);
getadministratives(value.value);
if (value.value == '370211') {
removeWms(['village_CQL']);
XZDM = null;
removeWms(['aaa']);
getstatisticsOfTheAreas(value.value); //冷冻等级面积统计
getproportionOfAreas(value.value);
getTownships(); //更新镇的数据
hiddenOverlayChart(); //隐藏弹窗
ASdivision();
areachar();
typesof();
return;
} else {
getstatisticsOfTheAreas(value.value); //冷冻等级面积统计
getproportionOfAreas(value.value);
getadministratives(value.value);
ASdivision();
areachar();
typesof();
}
// let arr = [...Township.arr];
@ -1410,9 +1537,6 @@ const selectTab = () => {
// // console.log(brr);
// data.title = [...Object.values(brr)];
// });
ASdivision();
areachar();
typesof();
let town = [...Township.arr];
// const townData = town.find(item => item.properties.XZDM === value.value);
// if (townData) {
@ -1583,6 +1707,7 @@ const exportExcel = (tableData, fileName = '用户列表', pageName = 'Sheet1')
/*-------------echarts--------------*/
function areachar() {
const areaDivIntance = echarts.init(areaDiv.value);
console.log(areacharData.lable);
var option = {
textStyle: {
fontSize: 0,
@ -2034,7 +2159,6 @@ function chartModes() {
let 中度冻害 = [];
let 重度冻害 = [];
insectarr.value.forEach(item => {
console.log(item.轻度冻害);
arr.push(item.region);
item.无冻害 !== undefined ? 无冻害.push(item.无冻害) : 无冻害.push(0);
item.中度冻害 !== undefined ? 中度冻害.push(item.中度冻害) : 中度冻害.push(0);
@ -2227,21 +2351,22 @@ function chartModes() {
useEcharts(ASdivisionDivIntance, 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 (bottom) {
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
viewer.imageryLayers.raise(dd); //将图层上移一层
}
@ -2273,7 +2398,7 @@ function back() {
selectTab();
if (flag.value === '1') {
console.log(flag.value);
addWms('shuzisannong:huangdaoqu_town', 'tl');
addWms('huangdaoqu_town', 'huangdaoqu_town');
}
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(119.5091, 35.5671, 120.3285, 36.1455),
@ -2304,7 +2429,7 @@ function ChartClick(item) {
}
if (!cz) {
// 添加高标准农田服务
addWms(layername, layername + 'gbznt');
addWms(layername, layername);
townZuowu.value.label = [
{ crop: '小麦', Shape_Area: '53000' },
{ crop: '地瓜', Shape_Area: '50000' },
@ -2333,6 +2458,7 @@ function ChartClick(item) {
}
function ASdivision() {
const ASdivisionDivIntance = echarts.init(ASdivisionDiv.value);
console.log(dd);
var option = {
// 设置图表的位置
grid: {
@ -2722,13 +2848,18 @@ function hiddenOverlayChart() {
if (pop) {
pop.style.display = 'none'; // 清除监听事件
}
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
deleteEntityByName('townLine');
value.value = '370211';
getstatisticsOfTheAreas(value.value); //冷冻等级面积统计
getproportionOfAreas(value.value);
getadministratives(value.value);
getTownships('370211'); //镇
areachar();
typesof();
}
//显示弹窗
function showOverlayChart(position) {
console.log(111);
const pop = document.getElementById('popup');
if (pop) {
pop.style.display = 'block';
@ -3199,58 +3330,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;

1979
src/views/plough/VideoSurveillance/index.vue
View File

File diff suppressed because it is too large Load Diff

30
src/views/plough/abandonedLand/index.vue
View File

@ -758,21 +758,21 @@ function addBoundaryHandle(data, name, color) {
// 添加村
// CQL_FILTER:筛选的语句
// customName地图服务自定义属性名
function addvillage(CQL_FILTER, customName) {
let map2 = new Cesium.WebMapServiceImageryProvider({
url: `http://36.134.44.75:9080/geoserver/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);
}
// function addvillage(CQL_FILTER, customName) {
// let map2 = new Cesium.WebMapServiceImageryProvider({
// url: `http://36.134.44.75:9080/geoserver/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 ：是否模糊查询

194
src/views/system/user/manage/index.vue Normal file
View File

@ -0,0 +1,194 @@
<template>
<div class="centent">
<div class="header">
<el-button type="primary" @click="dialogVisible = true">添加</el-button>
</div>
<div class="center">
<el-table
:data="tableData"
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
style="width: 100%"
header-row-class-name="tabth"
>
<el-table-column prop="data" label="日期" />
<el-table-column prop="layerName" label="图层名:" />
<el-table-column prop="type" label="种类" />
<el-table-column prop="suiffx" label="格式" />
<el-table-column prop="remark" label="备注" />
<el-table-column prop="操作" label="操作">
<template #default="scope">
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog v-model="dialogVisible" title="添加" width="30%" :before-close="handleClose">
<el-form label-width="100px" :model="formLabelAlign" style="max-width: 460px">
<el-form-item label="日期:">
<el-input v-model="formLabelAlign.data" placeholder="例如：2023-06-15" />
</el-form-item>
<el-form-item label="图层名:">
<el-input
v-model="formLabelAlign.layerName"
placeholder="例如：2023-06-15-xiaomai"
/>
</el-form-item>
<el-form-item label="种类:">
<el-select
popper-class="select_type"
v-model="formLabelAlign.type"
width="100"
placeholder="请选择"
>
<el-option label="湿润" value="湿润" />
<el-option label="适宜" value="适宜" />
<el-option label="轻度干旱" value="轻度干旱" />
<el-option label="中度干旱" value="中度干旱" />
<el-option label="重度干旱" value="重度干旱" />
<el-option label="无冻害" value="无冻害" />
<el-option label="轻度冻害" value="轻度冻害" />
<el-option label="中度冻害" value="中度冻害" />
<el-option label="重度冻害" value="重度冻害" />
<el-option label="洪涝" value="洪涝" />
<el-option label="好" value="好" />
<el-option label="较好" value="较好" />
<el-option label="适中" value="适中" />
<el-option label="较差" value="较差" />
<el-option label="差" value="差" />
<el-option label="茶叶" value="茶叶" />
<el-option label="大豆" value="大豆" />
<el-option label="花生" value="花生" />
<el-option label="蓝莓" value="蓝莓" />
<el-option label="地瓜" value="地瓜" />
<el-option label="小麦" value="小麦" />
<el-option label="玉米" value="玉米" />
<el-option label="马铃薯" value="马铃薯" />
<el-option label="白菜和萝卜" value="白菜和萝卜" />
</el-select>
</el-form-item>
<el-form-item label="格式:">
<el-select popper-class="select_type" v-model="formLabelAlign.suffix" width="100" placeholder="请选择">
<el-option label="tif" value="features" />
<el-option label="shp" value="gridValue" />
</el-select>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="formLabelAlign.remark" />
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="addlist">确认</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, onMounted, inject, reactive, watch } from 'vue';
import { ElMessageBox } from 'element-plus';
import { getsaveMap } from '@/api/manage/manaje.js';
const dialogVisible = ref(false);
const formLabelAlign = reactive({
data: '',
type: '',
suffix: '',
remark: '',
layerName: '',
});
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
];
/*-----------接口---------------*/
const getsaveMaps = data => {
console.log(data);
getsaveMap({ mapServices: data }).then(res => {
console.log(res.data);
});
};
/*------------事件----------------*/
const addlist = () => {
dialogVisible.value = false;
getsaveMaps(formLabelAlign);
};
</script>
<style lang="scss" scoped>
.centent {
width: 98%;
margin: 10px;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.08);
.header {
padding: 10px;
}
.center {
padding: 0 20px;
:deep(
.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th
) {
color: rgba(0, 0, 0, 1);
}
height: 93%;
:deep(.el-table__inner-wrapper) {
height: 96% !important;
}
.example-pagination-block {
font-size: 14px;
display: flex;
align-items: center;
justify-content: flex-end;
}
:deep(.tabth) {
background-color: rgba(247, 247, 247, 1);
.el-table-fixed-column--left {
background: rgba(247, 247, 247, 1) !important;
}
}
}
}
</style>
<style lang="scss">
.select_type {
background: #fff;
.el-select-dropdown__item.hover {
background: rgba(217, 231, 255, 0.2);
}
.el-select-dropdown__item {
color: black;
}
}
</style>