tianlong/Agriculture-front-end
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Agriculture-front-end/src/views/meteorological/monitor/FloodWarning/index.vue

1733 lines
72 KiB
Vue
Raw Normal View History

up
2023-06-06 10:46:36 +08:00
<template>
<div class="center">
<div style="width: 100%; height: 100%" id="cesiumContainer"></div>
<div class="rightWra">
<div class="farmlandHeader">
监测日期:&emsp;
<el-select
v-model="value"
popper-class="select_city"
class="m-2"
placeholder="Select"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<div class="rightTop">
<div class="title">
<span>预警信息发布</span>
</div>
<div class="farmlandDiv">
<div class="radioDiv">
预警范围：
<el-radio-group v-model="radio1" class="ml-4">
<el-radio label="1" size="large">5km</el-radio>
<el-radio label="2" size="large">10km</el-radio>
</el-radio-group>
</div>
<el-table
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{ 'text-align': 'center' }"
:data="SaveResultsDiv"
style="width: 100%"
>
<el-table-column prop="createdTime" label="设备号" />
<el-table-column prop="tyName" label="预警情况" />
<el-table-column prop="weizhi" label="联系人" />
<el-table-column prop="affectedArea" label="联系电话" />
</el-table>
<el-button class="but" type="primary">发布预警短信</el-button>
</div>
</div>
<div class="rightFoldDiv" @click="rightFoldClick()">
<el-tooltip
:disabled="!rightWraFlag"
:show-arrow="false"
hide-after="0"
show-after="200"
class="box-item"
effect="dark"
content="收起"
placement="top"
>
<img v-if="rightWraFlag" src="@/assets/images/close1.png" alt="" />
</el-tooltip>
<el-tooltip
:disabled="rightWraFlag"
:show-arrow="false"
hide-after="0"
show-after="200"
class="box-item"
effect="dark"
content="展开"
placement="top"
>
<img
class="imgrotate"
v-if="!rightWraFlag"
src="@/assets/images/close1.png"
alt=""
/>
</el-tooltip>
</div>
</div>
<div class="tool">
<span><img src="@/assets/images/LAYER.png" alt="" /></span>
<span><img src="@/assets/images/amplify.png" alt="" /></span>
<span><img src="@/assets/images/reduce.png" alt="" /></span>
<span><img src="@/assets/images/measure.png" alt="" /></span>
<span><img src="@/assets/images/face.png" alt="" /></span>
<span><img src="@/assets/images/position.png" alt="" /></span>
</div>
<div id="popup">
<div>
<span>名称：</span>
<p>{{ informationData.name }}</p>
</div>
<div>
<span>当前位置：</span>
<p>{{ informationData.fLongitude }}°E/{{ informationData.fLatitude }}°N</p>
</div>
<div>
<span>时间：</span>
<p>{{ moment(informationData.time).format('YYYY-MM-DD HH:mm:ss') }}</p>
</div>
<div>
<span>气压：</span>
<p>{{ informationData.pressure }}百帕</p>
</div>
<div>
<span>最大风速：</span>
<p>{{ informationData.speed }}米/秒</p>
</div>
<div>
<span>风力：</span>
<p>{{ informationData.power }}级</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 / 666.67).toFixed(2) }} 亩</div>
</div>
<div v-if="townZuowu.XZQMC">
<div>村名：</div>
<div>{{ townZuowu.XZQMC }}</div>
</div>
<div class="cancel" @click="hiddenOverlayChart">X</div>
</div>
<el-collapse class="legend" accordion>
<el-collapse-item name="1">
<template #title>图例</template>
<div class="mt-4">
<el-checkbox-group v-model="checkList" @change="change">
<el-checkbox
v-for="(value, item, key) in dic"
:key="key"
:style="{
backgroundColor: value.color,
border: `1px solid value.color`,
width: `100%`,
}"
:v-model="value.disabled"
:disabled="value.disabled"
:label="item"
/>
</el-checkbox-group>
</div>
</el-collapse-item>
</el-collapse>
<el-button v-if="flag" class="back_button" @click="back()">返回</el-button>
up
2023-04-16 22:33:44 +08:00
</div>
</template>
up
2023-06-06 10:46:36 +08:00
<script setup>
import { ref, onMounted, inject, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';
import * as echarts from 'echarts';
import TimeLine from '@/components/TimeLine/TimeLine.vue';
import moment from 'Moment';
// import * as turf from '@turf/turf';
import { useEcharts } from '@/hooks/useEcharts';
import { ElLoading } from 'element-plus';
import { getarea, getTownship, getvillage, getareas } from '@/api/crops/classify.js';
import {
getytyphoon,
getyear,
getndPower,
gettyphoonDamageSave,
gettyphoonDamageSelect,
gettyphoonDamageDelete,
gettyphoonDamage,
} from '@/api/meteorological/remoteSense/estimate.js';
import axios from 'axios';
import 'echarts-gl';
import { download } from '@/utils/request';
let viewer = ref(null);
const value = ref('2023');
let Township = reactive({ arr: [], brr: [], crr: [] }); //街道
let clickInfoMap = ref({ name: '', value: '' });
const formLandRef = ref([]);
const flag = ref(false);
let rightWraFlag = ref(false);
const checkList = ref(['false']);
const areaDiv = ref(null);
const value1 = ref('');
const options = ref([]);
let informationData = ref([]);
let windArr = ref([]);
let pressureArr = ref([]);
let typhoonTime = ref([]);
const SaveResultsDiv = ref([]);
const radio1 = ref('1')
var baozi =
'data:image/png;base64,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
let dic = {
'蓝色预警': { color: 'rgba(9, 187, 222, 1)', disabled: false },
'黄色预警': { color: 'rgba(255, 235, 59, 1)', disabled: false },
'橙色预警': { color: 'rgba(234, 165, 93, 1)', disabled: false },
'红色预警': { color: 'rgba(212, 48, 48, 1)', disabled: false },
};
const rules = reactive({
power: [
{
required: true,
message: 'Please select Activity zone',
trigger: 'change',
},
],
count: [
{
required: true,
message: 'Please select Activity count',
trigger: 'change',
},
],
date1: [
{
type: 'date',
required: true,
message: 'Please pick a date',
trigger: 'change',
},
],
date2: [
{
type: 'date',
required: true,
message: 'Please pick a time',
trigger: 'change',
},
],
type: [
{
type: 'array',
required: true,
message: 'Please select at least one activity type',
trigger: 'change',
},
],
resource: [
{
required: true,
message: 'Please select activity resource',
trigger: 'change',
},
],
desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
});
watch(
() => value1.value,
val => {
let startTime = moment(value1.value[0]).format('YYYY-MM-DD')
? moment(value1.value[0]).format('YYYY-MM-DD ')
: '';
let endTime = moment(value1.value[1]).format('YYYY-MM-DD')
? moment(value1.value[1]).format('YYYY-MM-DD')
: '';
gettyphoonDamageSelect({ startTime: startTime, endTime: endTime }).then(res => {
console.log(res.data);
SaveResultsDiv.value = res.data;
});
}
);
//行政区划数据
var data = {
title: [],
};
let dd = {
小麦: [],
玉米: [],
大豆: [],
地瓜: [],
花生: [],
蓝莓: [],
茶叶: [],
马铃薯: [],
白菜和萝卜: [],
其他: [],
};
let areatext = '8383894';
//表格数据
let tableData = ref([]);
// 组件挂载完成后执行
onMounted(() => {
//地图
initMap();
getFarmland();
getytyphoons(); //默认展示
getyears(); //年
gettyphoonDamageSelects();
let rightWra = document.querySelector('.rightWra');
rightWra.style.transform = 'translate(107%,0)';
});
/*-------------地图------------------------*/
const mapOption = {
url:
'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0' +
'&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}' +
'&style=default&format=tiles&tk=31091965e263284a501a723b8909f405',
layer: 'tdtCva',
style: 'default',
format: 'tiles',
tileMatrixSetID: 'c',
subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: [
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'19',
],
maximumLevel: 18,
};
Cesium.Ion.defaultAccessToken =
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYzcwZmJmNi02MzQ5LTQ1MGEtODgzMy0yZTZiZGExY2MzMGMiLCJpZCI6MTAxOTgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJnYyJdLCJpYXQiOjE1ODEzMDgxNTR9.NeJU4yfUi-SnLrNDOBYsQgmiSh3B4axCTi1m84Qw99c';
function initMap() {
viewer = new Cesium.Viewer('cesiumContainer', {
baseLayerPicker: false,
shouldAnimate: true, //自动播放
infoBox: false, //信息框
animation: false, //“动画”窗口小部件提供用于播放，暂停和倒退的按钮，以及当前时间和日期，并由“飞梭环”包围，用于控制动画的速度。cesium示例地图左下角那个
timeline: false, //时间轴是用于显示和控制当前场景时间的小部件。
geocoder: false, //查找，用于查找地址和地标，以及将照相机悬挂到它们。使用铯离子进行地址解析。,cesium示例地图右上角的放大镜
homeButton: false, //主页按钮
navigationHelpButton: false, //导航帮助按钮
selectionIndicator: false, //原生选择绿框
fullscreenButton: false, //右下角的全屏按钮
// terrainProvider:new Cesium.createWorldTerrain(),
terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
sceneModePicker: false, //是否显示投影方式控件
contextOptions: {
webgl: {
alpha: true,
},
},
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
...mapOption,
// url: "http://service.sdmap.gov.cn/hisimage/weipian202209?tk=9cc3e9deb3cf643b6f133717c333d16d",
// layer: "c",
// style: ",c",
// format: "image/png",
// tileMatrixSetID: "EPSG:4490",
// rectangle: Cesium.Rectangle.fromDegrees(114.8, 34.35, 122.82, 38.43),
// // subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
// tilingScheme: new Cesium.GeographicTilingScheme(),
// tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
// // maximumLevel: 18
}),
});
// 去除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: 0,
});
// 图层点击事件
// layerClick();
// 蒙版
mbHandle();
}
up
2023-04-16 22:33:44 +08:00
up
2023-06-06 10:46:36 +08:00
// data数据数组
// name实体名称，方便以后删除
// color实体颜色
function addBoundaryHandle(data, name, color) {
data.forEach(item => {
let arr = [];
item[0].forEach(mem => {
arr.push(mem[0]);
arr.push(mem[1]);
});
viewer.entities.add({
name: name,
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray(arr),
width: 6,
// material: new Cesium.PolylineDashMaterialProperty({//虚线
material: new Cesium.PolylineGlowMaterialProperty({
//光晕
glowPower: 0.2,
color: color
? Cesium.Color.fromCssColorString(color)
: Cesium.Color.fromBytes(250, 128, 114), //#FA8072
}),
// followSurface: false, //是否贴着地表
clampToGround: true, //贴地
},
});
});
}
function getLevel(height) {
if (height > 48000000) {
return 0;
} else if (height > 24000000) {
return 1;
} else if (height > 12000000) {
return 2;
} else if (height > 6000000) {
return 3;
} else if (height > 3000000) {
return 4;
} else if (height > 1500000) {
return 5;
} else if (height > 750000) {
return 6;
} else if (height > 375000) {
return 7;
} else if (height > 187500) {
return 8;
} else if (height > 93750) {
return 9;
} else if (height > 46875) {
return 10;
} else if (height > 23437.5) {
return 11;
} else if (height > 11718.75) {
return 12;
} else if (height > 5859.38) {
return 13;
} else if (height > 2929.69) {
return 14;
} else if (height > 1464.84) {
return 15;
} else if (height > 732.42) {
return 16;
} else if (height > 366.21) {
return 17;
} else {
return 18;
}
up
2023-04-16 22:33:44 +08:00
}
up
2023-06-06 10:46:36 +08:00
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 = '';
// 图层点击事件
function layerClick() {
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (movement) {
var ray = viewer.camera.getPickRay(movement.position);
var cartesian = viewer.scene.globe.pick(ray, viewer.scene);
if (cartesian) {
let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
if (cartographic) {
let xy = new Cesium.Cartesian2();
let alti = viewer.camera.positionCartographic.height;
let level = getLevel(alti);
const layers = viewer.imageryLayers._layers;
// 筛选出黄岛区服务
const index = layers.findIndex(
item =>
item._imageryProvider._layers &&
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_town'
);
if (index > -1) {
const providerPoint = layers[index];
// 拿取最后一个图层
let provider = providerPoint._imageryProvider;
if (
provider &&
provider.ready &&
provider._layers &&
providerPoint.show === true
) {
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
let promise = provider.pickFeatures(
xy.x,
xy.y,
level,
cartographic.longitude,
cartographic.latitude
);
if (promise) {
promise.then(data => {
if (data.length > 0) {
let newData = data['0'];
if (newData.properties && newData.properties.XZDM) {
console.log('XZDM:', XZDM);
console.log(
'newData.properties.XZDM:',
newData.properties.XZDM
);
if (XZDM !== newData.properties.XZDM) {
flag.value = true;
//防止重复加载
XZDM = newData.properties.XZDM;
value.value = XZDM; //
if (selectTab) {
selectTab(); //
}
let item = newData.data;
// 定位
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(
item.bbox[0],
item.bbox[1],
item.bbox[2],
item.bbox[3]
),
duration: 2,
});
// 移除高亮
deleteEntityByName('townLine');
// 高亮边界
addBoundaryHandle(
item.geometry && item.geometry.coordinates,
'townLine',
'yellow'
);
// 移除以前的
removeWms(['village_CQL']);
// 添加新的
addvillage(
`XZDM=${newData.properties.XZDM}`,
'village_CQL'
);
// 显示该镇的种植结构
let entitys = viewer.entities._entities._array;
for (var na = entitys.length - 1; na >= 0; na--) {
if (
entitys[na]._name &&
entitys[na]._name ===
'point' + newData.properties.XZDM
) {
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
);
} else {
// if (entitys[na].label) {
// entitys[na].label.show = false
// }
}
}
// 移除村高亮
deleteEntityByName('villageLine');
XZQDM = '';
} else {
// // 已经有镇了，监听村点击
villageClick(layers, xy, level, cartographic, movement);
}
} else {
removeWms(['village_CQL']);
// 移除框框
hiddenOverlayChart(); // 清除监听事件
}
}
});
}
}
}
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
let XZQDM = '';
// 村点击高亮
function villageClick(layers, xy, level, cartographic, movement) {
const index = layers.findIndex(
item =>
item._imageryProvider._layers &&
item._imageryProvider._layers === 'shuzisannong:huangdaoqu_village'
);
if (index > -1) {
const providerPoint = layers[index];
// 拿取最后一个图层
let provider = providerPoint._imageryProvider;
if (provider && provider.ready && provider._layers && providerPoint.show === true) {
xy = provider.tilingScheme.positionToTileXY(cartographic, level, xy);
let promise = provider.pickFeatures(
xy.x,
xy.y,
level,
cartographic.longitude,
cartographic.latitude
);
if (promise) {
promise.then(data => {
if (data.length > 0) {
let newData = data['0'];
console.log(newData);
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(
newData.data.bbox[0],
newData.data.bbox[1],
newData.data.bbox[2],
newData.data.bbox[3]
),
duration: 2,
});
if (newData.properties && newData.properties.XZQDM) {
if (XZQDM !== newData.properties.XZQDM) {
//防止
XZQDM = newData.properties.XZQDM;
let item = newData.data;
// 移除高亮
deleteEntityByName('villageLine');
// 高亮边界
addBoundaryHandle(
item.geometry && item.geometry.coordinates,
'villageLine',
'yellow'
);
// townZuowu.value = info//保存数据
// 后插和村
if (newData.properties.XZQDM === '370211104217') {
// console.log('后河岔村委会')
const rectangle = Cesium.Rectangle.fromDegrees(
item.bbox[0],
item.bbox[1],
item.bbox[2],
item.bbox[3]
);
const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
let latitude = Cesium.Math.toDegrees(center.latitude);
let info = {
lon: longitude,
lat: latitude,
...item.properties,
// XZQMC
label: [
{ crop: '茶叶', Shape_Area: 2820 },
{ crop: '大豆', Shape_Area: 2767 },
{ crop: '花生', Shape_Area: 62356 },
{ crop: '蓝莓', Shape_Area: 5443 },
{ crop: '地瓜', Shape_Area: 897 },
{ crop: '小麦', Shape_Area: 20111 },
],
};
townZuowu.value = info; //保存数据
// 展示弹窗
showOverlayChart(movement.position); // 添加地图移动监听：使地图移动弹窗跟着移动
viewer.scene.postRender.addEventListener(infoWindowPostRender);
}
}
}
}
});
}
}
}
}
// 添加村
// 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 ：是否模糊查询
function removeWms(nameArry, isMohu) {
if (viewer) {
// 倒叙遍历，customName是自定义的属性
const layers = viewer.imageryLayers._layers;
for (let f = layers.length - 1; f >= 0; f--) {
nameArry.forEach(item => {
if (layers[f]._imageryProvider && layers[f]._imageryProvider.customName) {
if (isMohu) {
if (layers[f]._imageryProvider.customName.indexOf(item) > -1) {
viewer.imageryLayers.remove(layers[f]);
}
} else {
if (layers[f]._imageryProvider.customName === item) {
viewer.imageryLayers.remove(layers[f]);
}
}
}
});
}
}
}
// 根据实体名字删除实体(模糊删除)
function deleteEntityByName(name) {
if (viewer) {
let entitys = viewer.entities._entities._array;
for (var na = entitys.length - 1; na >= 0; na--) {
if (entitys[na]._name && entitys[na]._name === name) {
viewer.entities.remove(entitys[na]);
}
}
}
}
//折叠
function rightFoldClick() {
rightWraFlag.value = !rightWraFlag.value;
if (rightWraFlag.value) {
let rightWra = document.querySelector('.rightWra');
rightWra.style.transform = 'translate(0,0)';
} else {
let rightWra = document.querySelector('.rightWra');
rightWra.style.transform = 'translate(107%,0)';
}
}
/*------------------接口--------------------*/
//默认展示
const getytyphoons = () => {
getytyphoon({ year: 2023 }).then(res => {
tableData.value = res;
});
};
//年
const getyears = () => {
getyear().then(res => {
res.forEach(item => {
if (Number(item.year) >= 2000) {
options.value.push(item);
}
});
});
};
const gettyphoonDamageSelects = () => {
gettyphoonDamageSelect({ startTime: '', endTime: '' }).then(res => {
SaveResultsDiv.value = res.data;
});
};
const selectTab = () => {
Township.arr.forEach(item => {
if (item.properties.XZDM == value.value) {
}
});
if (value.value == '370211') {
removeWms(['village_CQL']);
XZDM = null;
removeWms(['aaa']);
return;
}
let arr = [...Township.arr];
console.log('arr:', arr);
arr.forEach(item => {
if (item.properties.XZDM == value.value) {
viewer.camera.flyTo({
destination: Cesium.Rectangle.fromDegrees(
item.bbox[0],
item.bbox[1],
item.bbox[2],
item.bbox[3]
),
duration: 2,
});
}
let arr = [...Township.brr];
let brr = [];
// console.log(Township.brr);
arr.forEach(item => {
if (item.properties.XZDM == value.value) {
brr.push(item.properties.XZQMC);
}
});
// console.log(brr);
data.title = [...Object.values(brr)];
});
let town = [...Township.arr];
const townData = town.find(item => item.properties.XZDM === value.value);
if (townData) {
// 移除镇高亮
deleteEntityByName('townLine');
// 高亮镇边界
addBoundaryHandle(townData.geometry.coordinates, 'townLine', 'yellow');
}
// 移除以前村
removeWms(['aaa']);
// 添加村
addvillage(`XZDM=${value.value}`, 'aaa');
getarea({ time: '2023-04-26', subregion: '1', parent: '黄岛区' }).then(res => {
let arr = [];
res.data.map((item, index) => {
if (item.region == townData.properties.XZMC) {
arr.push({
crop: item.type,
Shape_Area: item.area,
});
}
});
townZuowu.value = {
label: arr,
};
showOverlayChart({ x: 642, y: 312 });
});
};
/*-------------echarts--------------*/
function soil() {
console.log(typhoonTime.value);
const soilDivIntance = echarts.init(areaDiv.value);
let option = {
grid: {
left: '5%',
right: '5%',
top: '20%',
bottom: '15%',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: 'rgba(255,255,255,0.7)',
},
},
backgroundColor: 'rgba(255,255,255,0.1)',
padding: [5, 10],
textStyle: {
color: 'rgb(255,255,255)',
},
},
legend: {
x: 'center',
y: '15',
icon: 'stack',
itemWidth: 6,
itemHeight: 5,
textStyle: {
color: '#FFFFFF',
},
data: ['风速', '气压'],
},
xAxis: {
type: 'category',
data: typhoonTime.value,
boundaryGap: true,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: 'rgba(255,255,255,0.5)',
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
color: '#DEEBFF',
},
},
},
yAxis: [
{
type: 'value',
position: 'left',
name: '风速(m/s)',
splitLine: {
show: true,
lineStyle: {
color: ['rgba(255,255,255,0.2)'],
},
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.3)',
},
},
nameTextStyle: {
color: '#DEEBFF',
fontSize: 12,
lineHeight: 0,
},
axisLabel: {
margin: 2,
textStyle: {
fontSize: 12,
color: '#DEEBFF',
},
},
},
{
type: 'value',
name: '气压(hPa)',
position: 'right',
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: ['rgba(255,255,255,0.2)'],
},
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.3)',
},
},
nameTextStyle: {
color: '#DEEBFF',
fontSize: 12,
lineHeight: 0,
},
axisLabel: {
margin: 2,
textStyle: {
fontSize: 12,
color: '#DEEBFF',
},
},
},
],
series: [
{
name: '风速',
type: 'line',
smooth: true,
showSymbol: false,
data: windArr.value,
itemStyle: {
normal: {
color: 'rgba(205, 92, 92, 1)',
},
},
lineStyle: {
normal: {
width: 3,
},
},
},
{
name: '气压',
type: 'line',
smooth: true,
yAxisIndex: 1,
showSymbol: false,
symbol: 'circle',
symbolSize: 6,
data: pressureArr.value,
itemStyle: {
normal: {
color: 'rgba(0, 191, 255, 1)',
},
},
lineStyle: {
normal: {
width: 3,
},
},
},
],
};
useEcharts(soilDivIntance, option);
}
// 添加wms
function addWms(layers, customName) {
let map = new Cesium.WebMapServiceImageryProvider({
url: serverAPI.geoserverUrl + `/shuzisannong/wms?`,
layers: layers, //图层名
parameters: {
service: 'WMS',
format: 'image/png',
transparent: true, //是否透明
// CQL_FILTER: `crop in (${name})`,
},
});
map.customName = customName; //自己定义各种属性
let dd = viewer.imageryLayers.addImageryProvider(map); //添加图层
if (customName.indexOf('gbznt') > -1) {
// viewer.imageryLayers.lower(dd);//将图层下移一层
viewer.imageryLayers.lowerToBottom(dd); //将图层移到最底层
viewer.imageryLayers.raise(dd); //将图层上移一层
}
}
//返回
function back() {
delete townZuowu.value.XZQMC;
removeWms(['gbznt'], true);
removeWms(['aaa']);
value.value = '370211';
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),
duration: 2,
});
flag.value = false;
hiddenOverlayChart();
}
/*--------------------------------------------------------------------------------------------*/
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(
item.bbox[0],
item.bbox[1],
item.bbox[2],
item.bbox[3]
);
const center = Cesium.Rectangle.center(rectangle); //获取视角范围中心点(得到的结果为弧度Cartographic)
let longitude = Cesium.Math.toDegrees(center.longitude); //将弧度转为度
let latitude = Cesium.Math.toDegrees(center.latitude);
if (item.properties.XZDM === '370211011') {
//灵山卫街道
longitude = 120.0863;
latitude = 35.941;
} else if (item.properties.XZDM === '370211003') {
//薛家岛街道
longitude = 120.243682;
latitude = 35.97123201;
}
const townData = fl[item.properties.XZMC];
let label = [];
if (townData) {
label = townData.map((it, inex) => {
// let dd = `${it.properties.crop} ：${(it.properties.Shape_Area / 666.67).toFixed(2)} 亩`
// return dd
return it.properties;
});
}
});
})
.catch(err => {});
}
let fenleiRef = ref({});
function mbHandle() {
axios({
url:
serverAPI.geoserverUrl +
'/shuzisannong/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=shuzisannong%3Afenlei&maxFeatures=137&outputFormat=application%2Fjson',
})
.then(res => {
let features = res.data.features;
let town = {};
// 按镇分类
features.forEach(item => {
let key = item.properties.town;
if (town[key]) {
town[key].push(item);
} else {
town[key] = [item];
}
});
fenleiRef.value = town;
getAreaFenlei();
})
.catch(err => {});
}
// 地图移动时弹窗跟随
function infoWindowPostRender() {
// let viewer = viewers.value;
if (clickInfoMap.value.lon && clickInfoMap.value.lat) {
//经纬度转为世界坐标
const gisPosition = Cesium.Cartesian3.fromDegrees(
Number(clickInfoMap.value.lon),
Number(clickInfoMap.value.lat),
0
); //转化为屏幕坐标
var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
viewer.scene,
gisPosition
);
if (Cesium.defined(windowPosition)) {
const pop = document.getElementById('popup');
if (pop) {
pop.style.top = windowPosition.y - 10 + 'px';
pop.style.left = windowPosition.x + 10 + 'px';
}
}
}
}
// 隐藏弹窗
function hiddenOverlayChart() {
const pop = document.getElementById('popup');
if (pop) {
pop.style.display = 'none'; // 清除监听事件
}
viewer.scene.postRender.removeEventListener(infoWindowPostRender);
}
//显示弹窗
function showOverlayChart(position) {
const pop = document.getElementById('popup');
if (pop) {
pop.style.display = 'block';
pop.style.position = 'absolute';
pop.style.top = position.y - 10 + 'px';
pop.style.left = position.x + 10 + 'px';
pop.style.zIndex = 99;
}
}
/*-------------------------------------------------------------------------------------------*/
up
2023-04-16 22:33:44 +08:00
</script>
up
2023-06-06 10:46:36 +08:00
<style lang="scss" scoped>
$height: calc(100vh - 100px);
up
2023-04-16 22:33:44 +08:00
up
2023-06-06 10:46:36 +08:00
.center {
width: 100%;
height: 100%;
.imgrotate {
transform: rotate(180deg);
}
.title {
width: 100%;
height: 45px;
background: url('@/assets/images/title.png');
background-repeat: no-repeat;
background-size: 110% 100%;
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: 45px;
padding-left: 46px;
display: flex;
cursor: pointer;
align-items: center;
justify-content: space-between;
:deep(.el-input__wrapper) {
width: 100px;
border-radius: 30px;
border: 1px solid rgba(23, 194, 180, 1);
background: rgba(41, 255, 255, 0.1);
height: 34px;
}
span {
width: 80%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 1) 33.33%,
rgba(41, 255, 219, 1) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
p {
width: 120px;
height: 25px;
border-radius: 20px;
font-size: 14px;
background: linear-gradient(
180deg,
rgba(16, 111, 111, 1) 0%,
rgba(47, 214, 214, 1) 100%
);
border: 1.5px solid rgba(23, 194, 180, 1);
display: flex;
justify-content: center;
align-items: center;
}
}
}
.frame {
:deep(.el-table__cell) {
color: #333;
}
}
.rightWra {
position: absolute;
top: 10px;
right: 20px;
width: 23%;
height: $height;
opacity: 1;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(2, 31, 26, 0.85);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
transition: transform 1s;
.farmlandHeader {
display: flex;
font-size: 18px;
font-weight: 400;
letter-spacing: 0px;
align-items: center;
color: rgba(255, 255, 255, 1);
margin: 20px 0;
padding: 0 10px;
.el-select {
// width: 80%;
// font-size: 14px;
// color: #333;
// background: rgba(22, 94, 102, 1);
// border: 1px solid rgba(4, 153, 153, 1) !important;
// margin-top: 20px;
:deep(.el-input__wrapper) {
background-color: transparent;
box-shadow: none;
border-radius: 4px;
background: linear-gradient(
180deg,
rgba(38, 212, 191, 0.5) 0%,
rgba(43, 186, 186, 0.5) 25.69%,
rgba(45, 165, 181, 0.5) 66.67%,
rgba(54, 111, 168, 0.5) 100%
);
border: 1px solid rgba(137, 211, 245, 1);
}
:deep(.el-input__inner) {
color: #fff;
}
}
}
.rightFoldDiv {
width: 30px;
height: 30px;
position: absolute;
left: -8%;
top: 50%;
transform: translate(0, -50%);
font-size: 30px;
color: #ccc;
}
.rightTop {
width: 100%;
height: 88%;
opacity: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.farmlandDiv {
// background: rgba(255, 255, 255, 0.05);
display: flex;
width: 95%;
flex-direction: column;
padding: 5px 10px 5px 10px;
color: rgba(255, 255, 255, 1);
height: 100%;
:deep(.el-table--fit){
height:90%
}
.but{
width: 100px;
margin: 10px auto;
}
.radioDiv{
display: flex;
align-items: center;
justify-content: center;
}
:deep(.el-table tr) {
background-color: transparent;
}
:deep(.el-table) {
--el-table-border-color: none;
color: rgba(255, 255, 255, 1);
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
background-color: revert;
}
.Crops {
display: flex;
width: 100%;
margin-bottom: 10px;
font-size: 14px;
font-weight: 400;
height: 31px;
flex-direction: row;
align-items: center;
justify-content: space-around;
opacity: 1;
background: linear-gradient(
90deg,
rgba(21, 173, 148, 0.1) 0%,
rgba(21, 173, 148, 0) 100%
);
div {
display: flex;
align-items: center;
}
}
.el-checkbox-group {
display: flex;
flex-direction: column;
}
:deep(.ones) {
width: 100%;
height: 171;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
--el-table-tr-bg-color: null;
--el-table-border-color: null;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
}
}
.ProgressBar {
width: 100%;
height: 9px;
opacity: 1;
}
}
.rightbottom {
width: 100%;
height: 490px;
opacity: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
.ASdivision {
display: flex;
justify-content: center;
width: 95%;
flex-direction: column;
padding: 5px 10px 5px 10px;
color: rgba(255, 255, 255, 1);
height: 40%;
:deep(.el-table tr) {
background-color: transparent;
}
:deep(.el-table) {
--el-table-border-color: none;
color: rgba(255, 255, 255, 1);
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
background-color: revert;
}
.Crops {
display: flex;
width: 100%;
margin-bottom: 10px;
font-size: 14px;
font-weight: 400;
height: 31px;
flex-direction: row;
align-items: center;
justify-content: space-around;
opacity: 1;
background: linear-gradient(
90deg,
rgba(21, 173, 148, 0.1) 0%,
rgba(21, 173, 148, 0) 100%
);
div {
display: flex;
align-items: center;
}
}
.el-checkbox-group {
display: flex;
flex-direction: column;
}
:deep(.ones) {
width: 100%;
height: 171;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
--el-table-tr-bg-color: null;
--el-table-border-color: null;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
}
}
}
}
:deep(.el-input__wrapper) {
opacity: 1;
border-radius: 4px;
// background: rgba(22, 94, 102, 1);
// border: 1px solid rgba(4, 153, 153, 1);
// box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.25);dsawe
width: 70%;
.el-input__inner {
color: #ccc;
}
}
.legend {
position: absolute;
right: 25%;
bottom: 7%;
width: 129px;
border: 1px solid rgba(4, 153, 153, 1);
// height: 50px;
:deep(.el-collapse-item__header) {
background: rgba(2, 31, 26, 0.6);
color: rgba(255, 255, 255, 1);
text-align: center;
padding: 0 30px;
font-size: 14px;
}
--el-collapse-content-bg-color {
background: rgba(2, 31, 26, 0.6);
}
:deep(.el-collapse-item__content) {
background: rgba(2, 31, 26, 0.6);
padding: 0 10px;
padding-bottom: 10px;
}
--el-collapse-border-color: none;
--el-collapse-content-bg-color: none;
// opacity: 1;
// border-radius: 4px;
// background: rgba(2, 31, 26, 0.6);
// display: flex;
// flex-direction: column;
// justify-content: flex-start;
// align-items: center;
// padding: 10px 10px 10px 10px;
p {
margin: 10px;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
text-align: center;
}
.mt-4 {
.el-checkbox {
height: 30px;
width: 100%;
margin-bottom: 2px;
padding-left: 10px;
font-size: 14px;
font-weight: 400;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
text-align: left;
}
}
:deep(.el-checkbox__label) {
color: black;
}
}
.bottom_center {
position: absolute;
// left: calc(400px + 20px + 8vw);
left: -2%;
right: 0;
margin: auto;
width: calc(100% - (400px * 2) - (10vw * 2));
min-width: 380px;
bottom: 5%;
height: 75px;
opacity: 1;
border-radius: 5px;
background: rgba(2, 31, 26, 0.6);
border: 1px solid rgba(4, 153, 153, 1);
}
.tool {
position: absolute;
right: 30%;
top: 8%;
width: 30px;
height: 280px;
opacity: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
display: none;
}
#popup {
width: 285px;
height: 286px;
opacity: 1;
border-radius: 5px;
background: rgba(2, 31, 26, 0.6);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
padding: 6px 8px 6px 8px;
div {
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 1);
display: flex;
align-items: center;
margin: 0px;
span {
display: block;
flex: 1;
padding-left: 30px;
}
p {
text-align: center;
width: 130px;
background: rgba(217, 231, 255, 0.2);
padding: 5px;
margin: 5px;
margin-right: 20px;
}
}
.cancel {
position: absolute;
right: 10px;
top: 5px;
color: rgba(255, 255, 255, 1);
cursor: pointer;
display: none;
}
}
#pop {
border-radius: 5px;
background: rgba(2, 31, 26, 1);
display: none;
// justify-content: flex-start;
// align-items: flex-end;
padding: 30px 8px 20px 8px;
.cancel {
position: absolute;
right: 10px;
top: 5px;
color: rgba(255, 255, 255, 1);
cursor: pointer;
}
& > div {
display: flex;
margin-bottom: 10px;
& > div:nth-child(1) {
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 1);
// margin-top: 20px;
line-height: 24px;
margin-right: 10px;
}
& > 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);
display: flex;
justify-content: center;
align-items: center;
padding: 2px 10px 2px 10px;
// margin-top: 20px;
}
}
}
.back_button {
position: absolute;
right: 30%;
top: 20px;
}
.detailsDiv {
:deep(.detailsDialog) {
border-radius: 4px;
background: rgba(3, 48, 54, 0.95);
border: 2px solid rgba(4, 153, 153, 1);
color: rgba(255, 255, 255, 1);
}
:deep().el-dialog__body {
color: rgba(255, 255, 255, 1) !important;
}
.center {
div {
display: flex;
align-items: center;
justify-content: space-between;
}
}
p {
width: 151px;
height: 24px;
opacity: 1;
background: rgba(217, 231, 255, 0.2);
text-align: center;
line-height: 24px;
margin-right: 50px;
}
:deep(.el-dialog__header) {
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
:deep(.el-dialog__title) {
color: #fff !important;
}
}
</style>
<style lang="scss">
.select_city {
background: rgba(2, 31, 26, 0.85);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.5);
.el-select-dropdown__item.hover {
background: rgba(2, 31, 26, 0.95);
box-shadow: inset 0px 0px 15px 6px rgba(41, 255, 255, 0.7);
}
.el-select-dropdown__item {
color: #fff;
}
}
.el-select__popper {
border: none !important;
background: transparent !important;
}
.el-popper {
border: none !important;
background: transparent !important;
}
.el-popper__arrow::before {
background: rgba(41, 255, 255, 0.7) !important;
}
.el-popper__arrow {
display: none;
}
</style>
Reference in New Issue Copy Permalink