<template>
|
<div class="content">
|
<div class="formInBox ">
|
<el-form
|
:inline="true"
|
:model="formInline"
|
>
|
<el-form-item>
|
<el-radio-group
|
v-model="formInline.pollutant"
|
size="small"
|
@input="getPollutant"
|
>
|
<el-radio-button
|
v-for="item in sensorArr"
|
:key="item.code"
|
:label="item.name"
|
/>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item>
|
<RegionCity
|
:select-size="'small'"
|
@regionForm="regionData"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-radio-group
|
v-model="formInline.dateRadio"
|
size="small"
|
>
|
<el-radio-button label="小时" />
|
<el-radio-button label="天" />
|
<el-radio-button label="月" />
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item>
|
<selectHour
|
:data-type="dataType"
|
@selectHourData="selectHourData"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<el-button
|
type="primary"
|
size="small"
|
@click="onSubmit"
|
>
|
查询
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div id="mapd" />
|
<div class="timeLine">
|
<Main
|
v-if="dateTimes.length > 0&&formInline.city!==''"
|
:options="options"
|
:date-times="dateTimes"
|
:date-type="formInline.dayType"
|
@getDateFun="getDateFun"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import _ from 'lodash'
|
import RegionCity from '@/components/Cascader/regionCity'
|
import selectHour from './components/selectHour.vue'
|
import Main from './components/timeLinePlay.vue'
|
export default {
|
components: { RegionCity, selectHour, Main },
|
data () {
|
return {
|
map: null,
|
heatmap: null,
|
markerClusterer: null,
|
city: '苏州',
|
formInline: {
|
city: '',
|
cityCode: '',
|
dayType: 'hour',
|
starTime: '',
|
endTime: '',
|
dateRadio: '小时',
|
pollutant: 'PM10',
|
},
|
selectSensor: {code: 'a34002', name: 'PM10', maxNumber: 500},
|
sensorArr: [
|
{ code: 'a34002', name: 'PM10', maxNumber: 500 },
|
{ code: 'a34004', name: 'PM2.5', maxNumber: 350 },
|
{ code: 'a21026', name: 'SO2', maxNumber: 2100 },
|
{ code: 'a21004', name: 'NO2', maxNumber: 750 },
|
{ code: 'a21005', name: 'CO', maxNumber: 48 },
|
{ code: 'a05024', name: 'O3', maxNumber: 1000 },
|
{ code: 'a99054', name: 'TVOC', maxNumber: 4 }
|
],
|
heatMapData: [],
|
dataType: 'datetimerange',
|
options: {
|
speed: 2
|
},
|
polygon: null,
|
dateTimes: [],
|
activeItem: {},
|
markerList: []
|
}
|
},
|
watch: {
|
'formInline.dateRadio': {
|
handler: function (newVal, oldVal) {
|
if (newVal === '小时') {
|
this.dataType = 'datetimerange'
|
this.formInline.dayType = 'hour'
|
this.dateTimes = []
|
} else if (newVal === '天') {
|
this.dataType = 'daterange'
|
this.dateTimes = []
|
this.formInline.dayType = 'day'
|
} else if (newVal === '月') {
|
this.dataType = 'monthrange'
|
this.dateTimes = []
|
this.formInline.dayType = 'month'
|
}
|
},
|
deep: true
|
},
|
'formInline.city': {
|
handler: function (newVal, oldVal) {
|
console.log('newVal', newVal === '')
|
if (newVal !== '') {
|
this.init1()
|
this.map.setCity(newVal)
|
if (!!this.formInline.starTime && !!this.formInline.endTime) {
|
this.onSubmit()
|
}
|
}
|
},
|
deep: true
|
},
|
activeItem: {
|
handler (newVal, oldVal) {
|
if (this.markerList.length > 0) {
|
console.log('2222', this.map.getAllOverlays('marker'))
|
this.map.remove(this.markerList)
|
this.markerList = []
|
// this.markerClusterer = null
|
}
|
this.getData(newVal.name)
|
},
|
deep: true
|
}
|
},
|
mounted () {
|
this.$nextTick(() => {
|
this.initMap()
|
this.createHeatMap()
|
})
|
},
|
|
destroyed () {
|
if (this.map) {
|
this.map.destroy()
|
}
|
},
|
methods: {
|
getDateFun (item) {
|
console.log(item)
|
this.activeItem = item
|
},
|
getPollutant (data) {
|
this.selectSensor = _.find(this.sensorArr, { name: data })
|
console.log(this.selectSensor)
|
},
|
// 初始化地图
|
initMap () {
|
var map = new AMap.Map('mapd', {
|
resizeEnable: true,
|
zooms: [3, 18],
|
zoom: 11,
|
})
|
this.map = map
|
// let that = this
|
},
|
init1 () { // 区域遮盖
|
var that = this
|
if (that.polygon) {
|
that.map.remove(that.polygon)
|
}
|
AMap.plugin('AMap.DistrictSearch', function () {
|
new AMap.DistrictSearch({
|
extensions: 'all',
|
subdistrict: 0
|
}).search(that.formInline.city, function (status, result) { // 外多边形坐标数组和内多边形坐标数组
|
var outer = [
|
new AMap.LngLat(-360, 90, true),
|
new AMap.LngLat(-360, -90, true),
|
new AMap.LngLat(360, -90, true),
|
new AMap.LngLat(360, 90, true)
|
]
|
var holes = result.districtList[0].boundaries
|
var pathArray = [outer]
|
pathArray.push.apply(pathArray, holes)
|
that.polygon = new AMap.Polygon({
|
pathL: pathArray,
|
strokeColor: 'red', // 城市边界颜色
|
strokeWeight: 3,
|
fillColor: '#FFF', // 遮罩背景色黑色
|
fillOpacity: 1
|
})
|
that.polygon.setPath(pathArray)
|
that.map.add(that.polygon)
|
})
|
})
|
},
|
getData (newVal) {
|
this.$request({
|
url: '/heatMap/query',
|
method: 'get',
|
params: {
|
code: this.formInline.cityCode,
|
startTime: newVal,
|
type: this.selectSensor.code,
|
form: this.formInline.dayType
|
}
|
})
|
.then(res => {
|
if (res.data !== '0') {
|
// this.map.remove(this.heatmap)
|
if (this.heatmap === null) {
|
this.createHeatMap()
|
}
|
this.heatMapData = []
|
this.heatMapData = res.data
|
this.heatmap.setDataSet({
|
data: this.heatMapData,
|
max: this.selectSensor.maxNumber
|
})
|
// let zoomLevel = this.map.getZoom()
|
//
|
this.setMarkers(this.heatMapData)
|
} else {
|
this.heatmap = null
|
}
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
|
setMarkers (curData) {
|
curData.forEach((item, index) => {
|
let div = document.createElement('div')
|
let bgColor = 'hsla(180, 100%, 50%, 0.7)'
|
let fontColor = '#000'
|
let borderColor = 'hsl(180, 100%, 40%)'
|
let shadowColor = 'hsl(180, 100%, 50%)'
|
div.id = 'pint' + index
|
div.style.backgroundColor = bgColor
|
let size = 40
|
div.style.width = div.style.height = size + 'px'
|
div.style.border = 'solid 1px ' + borderColor
|
div.style.borderRadius = size / 2 + 'px'
|
div.style.boxShadow = '0 0 1px ' + shadowColor
|
div.innerHTML = Math.floor(Number(item.count))
|
div.style.lineHeight = size + 'px'
|
div.style.color = fontColor
|
div.style.fontSize = '14px'
|
div.style.textAlign = 'center'
|
let marker = new AMap.Marker({
|
position: [item.lng, item.lat],
|
title: item.name,
|
extData: Math.floor(Number(item.count)),
|
anchor: 'center',
|
// 将 html 传给 content
|
content: div,
|
// 以 icon 的 [center bottom] 为原点
|
offset: new AMap.Pixel(3, 10)
|
})
|
this.markerList.push(marker)
|
})
|
this.map.add(this.markerList)
|
var count = this.markerList.length
|
// eslint-disable-next-line no-new
|
if (this.markerClusterer) {
|
this.markerClusterer.clearMarkers()
|
}
|
let that = this
|
AMap.plugin('AMap.MarkerClusterer', function () {
|
that.markerClusterer = new AMap.MarkerClusterer(that.map, that.markerList, {
|
gridSize: 100,
|
renderClusterMarker: function (context) {
|
let contNumber = 0
|
context.markers.forEach(item => {
|
contNumber += item.getExtData()
|
})
|
let factor = Math.pow(context.count / count, 1 / 18)
|
let div = document.createElement('div')
|
let Hue = 180 - factor * 180
|
let bgColor = 'hsla(' + Hue + ',100%,50%,0.7)'
|
let fontColor = 'hsla(' + Hue + ',100%,20%,1)'
|
let borderColor = 'hsla(' + Hue + ',100%,40%,1)'
|
let shadowColor = 'hsla(' + Hue + ',100%,50%,1)'
|
div.style.backgroundColor = bgColor
|
let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20)
|
div.style.width = div.style.height = size + 'px'
|
div.style.border = 'solid 1px ' + borderColor
|
div.style.borderRadius = size / 2 + 'px'
|
div.style.boxShadow = '0 0 1px ' + shadowColor
|
div.innerHTML = contNumber
|
div.style.lineHeight = size + 'px'
|
div.style.color = fontColor
|
div.style.fontSize = '14px'
|
div.style.textAlign = 'center'
|
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
|
context.marker.setContent(div)
|
}
|
})
|
})
|
},
|
getDayListData () {
|
this.$request({
|
url: '/heatMap/queryTime',
|
method: 'get',
|
params: {
|
type: this.formInline.dayType,
|
startTime: this.formInline.starTime,
|
endTime: this.formInline.endTime,
|
}
|
})
|
.then(res => {
|
this.dateTimes = res.data
|
})
|
.catch(err => {
|
console.log(err)
|
})
|
},
|
createHeatMap () {
|
let that = this
|
this.map.plugin(['AMap.Heatmap'], function () {
|
// 初始化heatmap对象
|
that.heatmap = new AMap.Heatmap(that.map, {
|
radius: 100, // 给定半径
|
opacity: [0.2, 0.8],
|
gradient: {
|
'0': '#d81e06',
|
'0.2': '#ea9518',
|
'0.4': '#fd8200',
|
'0.6': '#fd0001',
|
'0.8': '#95014b',
|
'1': '#7e0226'
|
}
|
})
|
})
|
},
|
|
onSubmit () {
|
if (!!this.formInline.city && !!this.formInline.starTime && !!this.formInline.endTime) {
|
this.map.clearMap()
|
this.getDayListData()
|
this.getData(this.formInline.starTime)
|
this.init1()
|
// this.map.setZoom(12)
|
} else {
|
this.$message({
|
showClose: true,
|
duration: 2000,
|
message: '请选择区域或者时间！',
|
type: 'error'
|
})
|
}
|
},
|
regionData (city) {
|
console.log(city)
|
if (city.org) {
|
this.formInline.city = city.org
|
this.formInline.cityCode = city.orgid
|
} else {
|
this.formInline.city = ''
|
this.formInline.cityCode = ''
|
}
|
},
|
selectHourData (data) {
|
if (data) {
|
this.formInline.starTime = data[0]
|
this.formInline.endTime = data[1]
|
} else {
|
this.formInline.starTime = ''
|
this.formInline.endTime = ''
|
}
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.content{
|
width: 100%;
|
height: 100%;
|
position: relative;
|
.formInBox{
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
position: absolute;
|
padding: 5px 10px;
|
width: 100%;
|
z-index: 999;
|
background: rgba(204,204,204,0.5);
|
/deep/.el-form-item{
|
margin-bottom: 0px;
|
}
|
}
|
}
|
#mapd {
|
width: 100%;
|
height: 100%;
|
resize: both;
|
z-index: 0;
|
}
|
.timeLine{
|
position: absolute;
|
padding: 5px 10px;
|
bottom: 15px;
|
width: 100%;
|
z-index: 999;
|
}
|
/deep/.menu-icon {
|
font-size: 20px;
|
width: 30px;
|
height: 30px;
|
background-size: cover;
|
background-repeat: no-repeat;
|
display: inline-block;
|
background-image: url('./components/img/round.png');
|
}
|
/deep/.menu-font{
|
font-size: 16px;
|
text-align: center;
|
max-width: 120px;
|
}
|
/deep/.amap-logo,/deep/.amap-copyright{
|
display: none!important;
|
}
|
</style>
|
