<template>
|
<div class="Map">
|
<div style="margin-bottom: 20px">
|
<el-radio-group v-model="radioSeven" size="medium">
|
<el-radio-button label="PM2.5" ></el-radio-button>
|
<el-radio-button label="PM10"></el-radio-button>
|
<el-radio-button label="SO2"></el-radio-button>
|
<el-radio-button label="NO2"></el-radio-button>
|
<el-radio-button label="CO"></el-radio-button>
|
<el-radio-button label="03"></el-radio-button>
|
<el-radio-button label="TVOC"></el-radio-button>
|
</el-radio-group>
|
</div>
|
<div style="height: 90%;border: 1px solid;">
|
<div id="map_container" style="width:100%; height:100%;" />
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'Map',
|
data() {
|
return {
|
radioSeven: 'PM2.5',
|
mapCenterlon: 0,
|
mapCenterlat: 0,
|
planData: [], // 飞行数据
|
map: null
|
}
|
},
|
mounted() {
|
this.getData() // 无人机轨迹数据
|
},
|
methods: {
|
// 走航车轨迹数据
|
async getData() {
|
this.$request({
|
url: '/cruiser/cruiserTrajectory',
|
method: 'get',
|
params: {
|
mac: 'p5dnd7a0243622',
|
time1: '2022-11-01 00:00:00',
|
time2: '2022-11-02 00:00:00'
|
}
|
}).then(res => {
|
// console.log(res)
|
this.planData = res.data
|
this.mapCenterlon = res.data[0].flylon
|
this.mapCenterlat = res.data[0].flylat
|
// console.log(this.mapCenterlon, this.mapCenterlat)
|
this.map = new window.BMapGL.Map('map_container')
|
this.map.centerAndZoom(new BMapGL.Point(this.mapCenterlon, this.mapCenterlat), 19) // 初始化地图，设置中心点坐标和地图级别
|
this.map.enableScrollWheelZoom() // 开启鼠标滚轮缩放
|
// 地球模式
|
this.map.setMapType(BMAP_EARTH_MAP) // 设置地图类型为地球模式
|
this.map.setTilt(0) // 设置地图的倾斜角度
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.Map{
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
