up
This commit is contained in:
@ -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;
|
||||
|
Reference in New Issue
Block a user