<template>
|
<div class="main_body">
|
<el-container style="height: 100%">
|
<el-aside width="300px" style="background-color: rgb(238, 241, 246)">
|
<el-date-picker
|
v-model="value1"
|
style="margin-left: 10px; width: 280px; height: 40px"
|
type="date"
|
placeholder="选择日期"
|
:picker-options="pickerOptions"
|
/>
|
</el-aside>
|
<el-main>
|
<div
|
style="
|
position: fixed;
|
z-index: 20;
|
padding-left: 20px;
|
height: 75px;
|
line-height: 80px;
|
width: 100%;
|
font-size: 18px;
|
font-weight: bold;
|
background-color: rgba( 192,192,192, 0.4);"
|
>
|
<el-radio-group v-model="defautRadio.name" size="medium" @change="selectRedio">
|
<el-radio-button v-for="(item, key) in radio" :key="key" :label="item.name" />
|
</el-radio-group>
|
</div>
|
<div id="container" style="width:100%; height:100%;resize:both;z-index: 0" />
|
</el-main>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
|
import axios from 'axios'
|
import { getToken } from '@/utils/auth'
|
|
export default {
|
data() {
|
return {
|
dates: [], // 存放date数组
|
// 禁用指定日期
|
value1: '',
|
value: [],
|
map: null,
|
radio: [
|
{ code: 'a34004', name: 'PM2.5' },
|
{ code: 'a34002', name: 'PM10' },
|
{ code: 'a21026', name: 'SO2' },
|
{ code: 'a21004', name: 'NO2' },
|
{ code: 'a21005', name: 'CO' },
|
{ code: 'a05024', name: 'O3' },
|
{ code: 'a99054', name: 'TVOC' }
|
],
|
defautRadio: { code: 'a34004', name: 'PM2.5' },
|
Layler: null, // 存放图层
|
textMarkers: { code: '', markers: [] }, // 存放文本标注
|
levelSensor: [35, 75, 115, 150, 250]
|
}
|
},
|
// 改变时触发计算属性
|
computed: {
|
pickerOptions: function() {
|
var _this = this
|
return {
|
disabledDate(time) {
|
// console.log(time.getFullYear() + '-' + ((time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)) + '-' + (time.getDate() < 10 ? '0' + time.getDate() : time.getDate()))
|
// console.log(_this.dates)
|
for (let i = 0; i < _this.dates.length; i++) {
|
if (time.getTime() === _this.dates[i]) {
|
// console.log(_this.dates[i])
|
return false
|
} else {
|
return true
|
}
|
}
|
}
|
}
|
}
|
},
|
mounted() {
|
this.initMap()
|
this.getDate()
|
},
|
methods: {
|
lnglatToG20(lnglat) {
|
lnglat = this.map.lngLatToGeodeticCoord(lnglat)
|
lnglat.x = AMap.Util.format(lnglat.x, 3)
|
lnglat.y = AMap.Util.format(lnglat.y, 3)
|
return lnglat
|
},
|
handleOpen(key, keyPath) {
|
console.log(key, keyPath)
|
},
|
handleClose(key, keyPath) {
|
console.log(key, keyPath)
|
},
|
// 选中redio
|
selectRedio(item) {
|
this.map.remove(this.textMarkers.markers)
|
this.map.remove(this.Layler)
|
this.addLayers(item)
|
},
|
// 初始化地图
|
initMap() {
|
var map = new AMap.Map('container', {
|
resizeEnable: true,
|
rotateEnable: true,
|
pitchEnable: true,
|
zoom: 17,
|
pitch: 80,
|
rotation: -15,
|
viewMode: '3D', // 开启3D视图,默认为关闭
|
buildingAnimation: true, // 楼块出现是否带动画
|
expandZoomRange: true,
|
zooms: [3, 20],
|
center: [120.9781494, 31.4265156]
|
})
|
this.map = map
|
},
|
// 添加图层
|
addLayers(name) {
|
let code = ''
|
for (let i = 0; i < this.radio.length; i++) {
|
if (name === this.radio[i].name) {
|
code = this.radio[i].code
|
}
|
}
|
if (code === 'a34002') {
|
this.levelSensor = [50, 150, 250, 350, 420]
|
} else if (code === 'a21026') {
|
this.levelSensor = [150, 500, 650, 800, 1600]
|
} else if (code === 'a21004') {
|
this.levelSensor = [100, 200, 700, 1200, 2340]
|
} else if (code === 'a21005') {
|
this.levelSensor = [5, 10, 35, 60, 90]
|
} else if (code === 'a05024') {
|
this.levelSensor = [160, 200, 300, 400, 800]
|
} else if (code === 'a99054') {
|
this.levelSensor = [1.5, 3, 5]
|
}
|
console.log('=======================')
|
console.log(this.value)
|
var object3Dlayer = new AMap.Object3DLayer({ zIndex: 110, opacity: 1 })
|
var points3D = new AMap.Object3D.RoundPoints({
|
eventSupport: true
|
})
|
points3D.transparent = true
|
|
var lines = new AMap.Object3D.Line()
|
var lineGeo = lines.geometry
|
var geometry = points3D.geometry
|
for (let i = 0; i < this.value.length; i++) {
|
const obj = (this.value[i])
|
console.log(66)
|
if (!(obj.flylon === undefined)) {
|
var center = this.lnglatToG20([obj.flylon, obj.flylat])
|
if (i < this.value.length - 1) {
|
const obj1 = (this.value[i + 1])
|
if (!(obj1.flylon === undefined)) {
|
var center1 = this.lnglatToG20([obj1.flylon, obj1.flylat])
|
// 连线
|
lineGeo.vertices.push(center.x, center.y, -(obj.flyhig * 10))
|
lineGeo.vertexColors.push(0.0497, 0.3419, 0.9301, 1)
|
lineGeo.vertices.push(center1.x, center1.y, -(obj1.flyhig * 10))
|
lineGeo.vertexColors.push(0.0497, 0.3419, 0.9301, 1)
|
//
|
// const distance = Math.sqrt((center1.x - center.x) * (center1.x - center.x) + (center1.y - center.y) * (center1.y - center.y) + (obj1.flyhig * 10 - obj.flyhig * 10) * (obj1.flyhig * 10 - obj.flyhig * 10))
|
// console.log(distance)
|
}
|
}
|
// 随机高度。Z 轴正方向指向地下，因此这里设置高度要添加负号指向反方向
|
if (obj[code]) {
|
if (Number(obj[code]) < this.levelSensor[0] && this.levelSensor[0] !== undefined) {
|
geometry.vertices.push(center.x, center.y, -(obj.flyhig * 10))
|
geometry.pointSizes.push(40)
|
geometry.vertexColors.push(0, 0.8941, 0, 0.6)
|
} else if (Number(obj[code]) < this.levelSensor[1] && this.levelSensor[1] !== undefined) {
|
geometry.vertices.push(center.x, center.y, -(obj.flyhig * 10))
|
geometry.pointSizes.push(40)
|
geometry.vertexColors.push(1, 1, 0, 0.8)
|
} else if (Number(obj[code]) < this.levelSensor[2] && this.levelSensor[2] !== undefined) {
|
geometry.vertices.push(center.x, center.y, -(obj.flyhig * 10))
|
geometry.pointSizes.push(40)
|
geometry.vertexColors.push(1, 0.4941, 0, 0.8)
|
} else if (Number(obj[code]) < this.levelSensor[3] && this.levelSensor[3] !== undefined) {
|
geometry.vertices.push(center.x, center.y, -(obj.flyhig * 10))
|
geometry.pointSizes.push(40)
|
geometry.vertexColors.push(1, 0, 0, 0.8)
|
} else if (Number(obj[code]) < this.levelSensor[4 && this.levelSensor[4] !== undefined]) {
|
geometry.vertices.push(center.x, center.y, -(obj.flyhig * 10))
|
geometry.pointSizes.push(40)
|
geometry.vertexColors.push(0.6000, 0, 0.2980, 0.8)
|
} else {
|
if (this.levelSensor[0] !== undefined) {
|
geometry.vertices.push(center.x, center.y, -(obj.flyhig * 10))
|
geometry.pointSizes.push(40)
|
geometry.vertexColors.push(0.4941, 0.4941, 0.1373, 0.8)
|
} else {
|
continue
|
}
|
}
|
}
|
|
var A = new AMap.Text({
|
text: obj[code],
|
position: [obj.flylon, obj.flylat],
|
height: (obj.flyhig * 10),
|
verticalAlign: 'center',
|
map: this.map,
|
style: {
|
'background-color': 'rgba(0,0,0,0)',
|
'position': 'relative',
|
'top': '-18px',
|
'left': '6px',
|
'width': '32px',
|
'height': '32px',
|
'font-size': '12px',
|
'line-height': '32px',
|
'border-radius': '100%',
|
'border': 'none'
|
}
|
// 'border': 'none',
|
})
|
A.on('click', () => {
|
alert(JSON.stringify(obj))
|
})
|
this.textMarkers.code = obj
|
this.textMarkers.markers.push(A)
|
}
|
// geometry.pointAreas.push(0.3,0,0.7,0.5);
|
}
|
points3D.borderWeight = 3
|
object3Dlayer.add(lines)
|
object3Dlayer.add(points3D)
|
this.map.add(object3Dlayer)
|
this.Layler = object3Dlayer
|
},
|
// 获取组织下存在飞行记录的日期
|
getDate() {
|
axios.get('http://47.99.64.149:8081/uav/test', {
|
params: {
|
batch: '2021-07-08 01:00:00'
|
},
|
headers: {
|
token: getToken()
|
}
|
}).then(res => {
|
console.log('--------------------------------------')
|
console.log(res)
|
if (res.data.code === 0) {
|
for (let i = 0; i < res.data.data.length; i++) {
|
this.value.push(JSON.parse(res.data.data[i].value))
|
}
|
}
|
this.addLayers('PM2.5')
|
})
|
// axios.get('http://47.99.64.149:8081/uav/queryDate', {
|
// params: {
|
// organizationId: this.$store.state.orgId
|
// },
|
// headers: {
|
// token: getToken()
|
// }
|
// }).then(res => {
|
// this.dates = JSON.parse(JSON.stringify(res.data.data.datesStr))
|
// console.log('------------------------')
|
// // console.log(this.dates)
|
// const dates = []
|
// for (let i = 0; i < this.dates.length; i++) {
|
// const date = this.dates[i].replace(/-/g, '/')
|
// var timestamp = new Date(date).getTime()
|
// dates.push(timestamp)
|
// }
|
// this.dates = dates
|
// console.log(this.dates)
|
// })
|
}
|
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.main_body {
|
border: 0;
|
margin: 0;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
.el-header, .el-footer {
|
background-color: #B3C0D1;
|
color: #333;
|
text-align: center;
|
line-height: 60px;
|
}
|
|
.el-aside {
|
background-color: #D3DCE6;
|
color: #333;
|
text-align: left;
|
line-height: 52px;
|
}
|
|
/deep/ .el-input__inner {
|
height:40px;
|
}
|
/deep/ .el-picker-panel__body {
|
width: 280px;
|
}
|
.el-main {
|
padding: 0;
|
width: 100%;
|
height: 100%;
|
}
|
|
body > .el-container {
|
margin-bottom: 40px;
|
}
|
|
.el-container:nth-child(5) .el-aside,
|
.el-container:nth-child(6) .el-aside {
|
line-height: 260px;
|
}
|
|
.el-container:nth-child(7) .el-aside {
|
line-height: 320px;
|
}
|
.el-radio-button--medium .el-radio-button__inner {
|
padding: 16px 20px;
|
font-size: 14px;
|
height: 38px;
|
border-radius: 0;
|
width: 80px;
|
}
|
</style>
|
