From a5e288eead42db17f8715bc21326465648bc1c04 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 27 Mar 2024 13:17:32 +0800
Subject: [PATCH] fix: 盐城热力图
---
src/views/hotMap/index.vue | 145 +++++++++++++++++++++++++++++++++--------------
1 files changed, 101 insertions(+), 44 deletions(-)
diff --git a/src/views/hotMap/index.vue b/src/views/hotMap/index.vue
index b788b45..c20b9be 100644
--- a/src/views/hotMap/index.vue
+++ b/src/views/hotMap/index.vue
@@ -22,7 +22,7 @@
</el-radio-group>
</el-form-item>
<el-form-item>
- <el-select
+ <!-- <el-select
v-model="orgId"
size="small"
placeholder="���������"
@@ -34,7 +34,15 @@
:label="item.name"
:value="item.id"
/>
- </el-select>
+ </el-select> -->
+ <el-cascader
+ v-model="orgId"
+ size="small"
+ :options="orgData"
+ :props="props"
+ clearable
+ @change="regionData"
+ />
</el-form-item>
<el-form-item>
<el-radio-group
@@ -77,7 +85,7 @@
class="buttomColorLine"
/>
<Main
- v-if="dateTimes.length > 0&&formInline.city!==''"
+ v-if="dateTimes.length > 0"
:options="options"
:date-times="dateTimes"
:date-type="formInline.dayType"
@@ -88,7 +96,7 @@
</template>
<script>
-import dayjs from 'dayjs'
+// import dayjs from 'dayjs'
import _ from 'lodash'
import selectHour from './components/selectHour.vue'
import Main from './components/timeLinePlay.vue'
@@ -101,7 +109,8 @@
heatmap: null,
markerClusterer: null,
orgData: [],
- orgId: null,
+ props: { checkStrictly: true, label: 'name', value: 'id', children: 'children' },
+ orgId: [],
city: '������',
formInline: {
city: '',
@@ -265,13 +274,7 @@
// },
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
}
@@ -279,9 +282,9 @@
created () {
},
mounted () {
- let dataTime = dayjs().format('YYYY-MM-DD')
+ // let dataTime = dayjs().format('YYYY-MM-DD')
this.getOrganizationId()
- this.getData(`${dataTime} 00`)
+ // this.getData(`${dataTime} 00`)
},
destroyed () {
@@ -307,6 +310,9 @@
getDateFun (item) {
console.log(item)
this.activeItem = item
+ if (this.orgId.length > 0) {
+ this.getData(item.name)
+ }
},
getPollutant (data) {
this.selectSensor = _.find(this.sensorArr, { name: data })
@@ -319,18 +325,24 @@
},
// ���������������
initMap () {
+ let zoom = 10
+ if (this.formInline.cityCode === '320900') {
+ zoom = this.formInline.areName === 'dafengqu' ? 15 : 13
+ }
var map = new AMap.Map('mapd', {
resizeEnable: true,
- zooms: [1, 10],
- zoom: 10,
+ zoomEnable: false,
+ zoom: zoom
})
this.map = map
+ map.on('click', function (e) {
+ console.log('e.lnglat.getLng() + ', ' + e.lnglat.getLat()', e.lnglat.getLng() + ',' + e.lnglat.getLat())
+ })
this.init1()
// let that = this
},
init1 () { // ������������
var that = this
- this.map.setCity(this.formInline.city)
if (that.polygon) {
that.map.remove(that.polygon)
that.map.remove(that.districtSearch)
@@ -348,9 +360,45 @@
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)
+ let ycPoints = {
+ areas: [{ // ������1
+ rejectTexture: true, // ������������������������������������
+ path: [[
+ [120.06316306, 33.41753995999999],
+ [120.2617243421, 33.41753995999999],
+ [120.2617243421, 33.308387182],
+ [120.06316306, 33.308387182],
+ [120.06316306, 33.41753995999999]
+ ]]
+ }]
+ }
+
+ var holes = result.districtList[0].boundaries
+ console.log('that.formInline', that.formInline)
+ if (that.formInline.cityCode === '320900') {
+ // ������
+
+ that.map.setCenter([120.16, 33.36])
+ if (that.formInline.areName === 'dafengqu') {
+ that.map.setCenter([120.435345, 33.203704])
+ ycPoints = {
+ areas: [{ // ������1
+ rejectTexture: true, // ������������������������������������
+ path: [[ [120.41615942, 33.215693],
+ [120.45416756599998, 33.215693],
+ [120.45416756599998, 33.192137742599996],
+ [120.41615942000003, 33.19213774259998],
+ [120.41615942, 33.215693] ]]
+ }]
+ }
+ }
+ pathArray.push.apply(pathArray, ycPoints.areas[0].path)
+ } else {
+ pathArray.push.apply(pathArray, holes)
+ that.map.setCity(that.formInline.city)
+ }
+ // pathArray.push.apply(pathArray, holes)
that.polygon = new AMap.Polygon({
pathL: pathArray,
strokeColor: 'red', // ������������������
@@ -368,7 +416,7 @@
url: '/heatMap/query',
method: 'get',
params: {
- id: this.orgId,
+ id: this.orgId[0],
startTime: newVal,
type: this.selectSensor.code,
form: this.formInline.dayType
@@ -379,16 +427,14 @@
if (this.heatmap === null) {
this.createHeatMap()
}
- this.heatMapData = []
this.heatMapData = res.data
this.dataProcessing(this.heatMapData)
this.heatmap.setDataSet({
data: this.heatMapData,
max: this.selectSensor.maxNumber
})
- console.log('000', this.selectSensor.maxNumber)
- console.log('1111', this.heatmap.getDataSet())
} else {
+ this.map.remove(this.heatmap)
this.heatmap = null
}
})
@@ -532,15 +578,18 @@
method: 'get'
})
.then(res => {
- this.orgData = res.data
- let cityData = _.find(this.orgData, { id: this.orgId })
- if (this.orgId === 73) {
- this.formInline.city = cityData.cityName
- this.formInline.cityCode = String(cityData.cityCode)
- } else {
- this.formInline.city = cityData.areaName
- this.formInline.cityCode = String(cityData.areaCode)
- }
+ this.orgData = res.data.map(item => {
+ if (item.id === 73) {
+ item.children = [{
+ id: 'shiqu',
+ name: '������'
+ }, {
+ id: 'dafengqu',
+ name: '���������'
+ }]
+ }
+ return item
+ })
})
.catch(err => {
console.log(err)
@@ -548,10 +597,12 @@
},
createHeatMap () {
let that = this
+ let radius = this.formInline.areName === 'shiqu' ? 100 : 100
+ console.log('radius', radius)
this.map.plugin(['AMap.Heatmap'], function () {
// ���������heatmap������
that.heatmap = new AMap.Heatmap(that.map, {
- radius: 100, // ������������
+ radius: radius, // ������������
opacity: [0.5, 1],
gradient: that.selectSensor.gradient
})
@@ -561,15 +612,15 @@
onSubmit () {
if (!!this.formInline.city && !!this.formInline.starTime && !!this.formInline.endTime) {
// this.map.clearMap()
+
this.getDayListData()
+
+ if (this.map) {
+ this.map.destroy()
+ }
+ this.initMap()
+ this.createHeatMap()
this.getData(this.formInline.starTime)
- this.$nextTick(() => {
- if (this.map) {
- this.map.destroy()
- }
- this.initMap()
- this.createHeatMap()
- })
// this.map.setZoom(12)
} else {
this.$message({
@@ -581,21 +632,27 @@
}
},
regionData (id) {
- let cityData = _.find(this.orgData, { id: id })
- if (id === 73) {
+ console.log('id', id)
+ let cityData = _.find(this.orgData, { id: id[0] })
+ if (id[0] === 73) {
+ if (id[1]) {
+ this.formInline.areName = id[1]
+ }
this.formInline.city = cityData.cityName
this.formInline.cityCode = String(cityData.cityCode)
} else {
this.formInline.city = cityData.areaName
this.formInline.cityCode = String(cityData.areaCode)
}
- console.log('cityData', cityData)
},
selectHourData (data) {
+ console.log('ccccc', this.formInline)
if (data) {
this.formInline.starTime = data[0]
this.formInline.endTime = data[1]
- this.getDayListData()
+ if (this.formInline.city) {
+ this.getDayListData()
+ }
} else {
this.formInline.starTime = ''
this.formInline.endTime = ''
--
Gitblit v1.8.0