From f64742aeed083684ead735a8a7e13c4be4685682 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 29 Apr 2024 09:34:26 +0800
Subject: [PATCH] fix: 热力图修改
---
src/views/hotMap/index.vue | 665 ++++++++++++++++++++++++++++++++++++------------------
1 files changed, 440 insertions(+), 225 deletions(-)
diff --git a/src/views/hotMap/index.vue b/src/views/hotMap/index.vue
index c20b9be..da40f41 100644
--- a/src/views/hotMap/index.vue
+++ b/src/views/hotMap/index.vue
@@ -75,6 +75,13 @@
>
������
</el-button>
+ <!-- <el-button
+ class="btn"
+ style="margin-bottom: 5px"
+ @click="drawRectangle"
+ >
+ ������������
+ </el-button> -->
</el-form-item>
</el-form>
</div>
@@ -112,6 +119,173 @@
props: { checkStrictly: true, label: 'name', value: 'id', children: 'children' },
orgId: [],
city: '������',
+ selectYcLocationInfor: {},
+ ycPoints: [
+ {
+ id: 117,
+ name: '������������',
+ radius: 50,
+ centerPoint: [120.162594, 33.335508],
+ zoom: 15,
+ path: [[
+ [
+ 120.14212385147812,
+ 33.3501711960911
+ ],
+ [
+ 120.18375173538925,
+ 33.3501711960911
+ ],
+ [
+ 120.18375173538925,
+ 33.32428486558254
+ ],
+ [
+ 120.14212385147812,
+ 33.32428486558254
+ ],
+ [
+ 120.14212385147812,
+ 33.3501711960911
+ ],
+ ]]
+ },
+ {
+ id: 118,
+ name: '������������',
+ radius: 100,
+ centerPoint: [120.159189, 33.362052],
+ zoom: 15,
+ path: [[
+ [
+ 120.14180812194945,
+ 33.376155594175906
+ ],
+ [
+ 120.1767841275036,
+ 33.376155594175906
+ ],
+ [
+ 120.1767841275036,
+ 33.349560021621436
+ ],
+ [
+ 120.14180812194945,
+ 33.349560021621436
+ ],
+ [
+ 120.14180812194945,
+ 33.376155594175906
+ ]
+ ]]
+ },
+ {
+ id: 119,
+ name: '������������������',
+ zoom: 16,
+ radius: 100,
+ centerPoint: [120.216872, 33.378334],
+ path: [
+ [
+ [
+ 120.20549907401204,
+ 33.38532153338434
+ ],
+ [
+ 120.22927417472005,
+ 33.38532153338434
+ ],
+ [
+ 120.22927417472005,
+ 33.37125561579751
+ ],
+ [
+ 120.20549907401204,
+ 33.37125561579751
+ ],
+ [
+ 120.20549907401204,
+ 33.38532153338434
+ ]
+ ]
+ ]
+ },
+ {
+ id: 120,
+ name: '������������',
+ zoom: 15,
+ radius: 60,
+ centerPoint: [120.123716, 33.400926],
+ path: [[
+ [
+ 120.10800871968269,
+ 33.411207878716695
+ ],
+ [
+ 120.13839278340339,
+ 33.411207878716695
+ ],
+ [
+ 120.13839278340339,
+ 33.39053545526069
+ ],
+ [
+ 120.10800871968269,
+ 33.39053545526069
+ ]
+ ]]
+ },
+ {
+ id: 121,
+ name: '������������',
+ zoom: 16,
+ radius: 60,
+ centerPoint: [120.159868, 33.392545],
+ path: [[
+ [
+ 120.1529805980623,
+ 33.39872613771991
+ ],
+ [
+ 120.16664913520219,
+ 33.39872613771991
+ ],
+ [
+ 120.16664913520219,
+ 33.38616740820813
+ ],
+ [
+ 120.1529805980623,
+ 33.38616740820813
+ ]
+ ]]
+ },
+ {
+ id: 122,
+ name: '������������������',
+ zoom: 16,
+ radius: 100,
+ centerPoint: [120.433178, 33.203129],
+ path: [[
+ [
+ 120.42407972171901,
+ 33.21116367463085
+ ],
+ [
+ 120.4417823012173,
+ 33.21116367463085
+ ],
+ [
+ 120.4417823012173,
+ 33.196926006173
+ ],
+ [
+ 120.42407972171901,
+ 33.196926006173
+ ]
+ ]]
+ },
+ ],
formInline: {
city: '',
cityCode: '',
@@ -123,8 +297,26 @@
},
selectSensor: {code: 'a34002',
name: 'PM10',
- maxNumber: 500,
src: require('@/assets/images/tl_PM10.png'),
+ colorList: [{
+ maxNumber: 50,
+ color: '#12a112'
+ }, {
+ maxNumber: 150,
+ color: '#feff01'
+ }, {
+ maxNumber: 250,
+ color: '#fd8200'
+ }, {
+ maxNumber: 350,
+ color: '#fd0001'
+ }, {
+ maxNumber: 420,
+ color: '#95014b'
+ }, {
+ maxNumber: 500,
+ color: '#7e0226'
+ }],
gradient: {
0: '#12a112',
0.1: '#12a112',
@@ -137,8 +329,26 @@
sensorArr: [
{ code: 'a34002',
name: 'PM10',
- maxNumber: 500,
src: require('@/assets/images/tl_PM10.png'),
+ colorList: [{
+ maxNumber: 50,
+ color: '#12a112'
+ }, {
+ maxNumber: 150,
+ color: '#feff01'
+ }, {
+ maxNumber: 250,
+ color: '#fd8200'
+ }, {
+ maxNumber: 350,
+ color: '#fd0001'
+ }, {
+ maxNumber: 420,
+ color: '#95014b'
+ }, {
+ maxNumber: 500,
+ color: '#7e0226'
+ }],
gradient: {
0: '#12a112',
0.1: '#12a112',
@@ -150,84 +360,148 @@
}},
{ code: 'a34004',
name: 'PM2.5',
- maxNumber: 350,
+ colorList: [{
+ maxNumber: 35,
+ color: '#12a112'
+ }, {
+ maxNumber: 75,
+ color: '#feff01'
+ }, {
+ maxNumber: 115,
+ color: '#fd8200'
+ }, {
+ maxNumber: 150,
+ color: '#fd0001'
+ }, {
+ maxNumber: 250,
+ color: '#95014b'
+ }, {
+ maxNumber: 350,
+ color: '#7e0226'
+ }],
src: require('@/assets/images/tl_PM2.5.png'),
- gradient: {
- 0: '#12a112',
- 0.1: '#12a112',
- 0.21: '#feff01',
- 0.32: '#fd8200',
- 0.42: '#fd0001',
- 0.71: '#95014b',
- 1: '#7e0226'
- } },
+ gradient: {}
+ },
{ code: 'a21026',
name: 'SO2',
- maxNumber: 150,
src: require('@/assets/images/tl_SO2.png'),
- gradient: {
- 1: '#feff01',
- 0.3: '#12a112',
- }
+ colorList: [{
+ maxNumber: 50,
+ color: '#12a112'
+ }, {
+ maxNumber: 150,
+ color: '#feff01'
+ }, {
+ maxNumber: 475,
+ color: '#fd8200'
+ }, {
+ maxNumber: 800,
+ color: '#fd0001'
+ }, {
+ maxNumber: 1600,
+ color: '#95014b'
+ }, {
+ maxNumber: 2100,
+ color: '#7e0226'
+ }],
+ gradient: {}
},
{ code: 'a21004',
name: 'NO2',
- maxNumber: 400,
src: require('@/assets/images/tl_NO2.png'),
- gradient: {
- 0: '#12a112',
- 0.1: '#12a112',
- 0.15: '#feff01',
- 0.19: '#feff01',
- 0.20: '#fd8200',
- 0.25: '#fd8200',
- 0.45: '#fd8200',
- 0.5: '#fd0001',
- 0.7: '#95014b',
- 1: '#7e0226'
- }},
+ colorList: [{
+ maxNumber: 40,
+ color: '#12a112'
+ }, {
+ maxNumber: 80,
+ color: '#feff01'
+ }, {
+ maxNumber: 180,
+ color: '#fd8200'
+ }, {
+ maxNumber: 280,
+ color: '#fd0001'
+ }, {
+ maxNumber: 565,
+ color: '#95014b'
+ }, {
+ maxNumber: 750,
+ color: '#7e0226'
+ }],
+ gradient: {}
+ },
{ code: 'a21005',
name: 'CO',
- maxNumber: 48,
src: require('@/assets/images/tl_CO.png'),
- gradient: {
- 0.0: '#12a112',
- 0.04: '#12a112',
- 0.083: '#feff01',
- 0.29: '#fd8200',
- 0.5: '#fd0001',
- 0.75: '#95014b',
- 1: '#7e0226'
- }},
+ colorList: [{
+ maxNumber: 2,
+ color: '#12a112'
+ }, {
+ maxNumber: 4,
+ color: '#feff01'
+ }, {
+ maxNumber: 14,
+ color: '#fd8200'
+ }, {
+ maxNumber: 24,
+ color: '#fd0001'
+ }, {
+ maxNumber: 36,
+ color: '#95014b'
+ }, {
+ maxNumber: 48,
+ color: '#7e0226'
+ }],
+ gradient: {}
+ },
{ code: 'a05024',
name: 'O3',
- maxNumber: 500,
src: require('@/assets/images/tl_O3.png'),
- gradient: {
- 0: '#12a112',
- 0.32: '#12a112',
- 0.33: '#feff01',
- 0.4: '#feff01',
- 0.41: '#fd8200',
- 0.6: '#fd8200',
- 0.61: '#fd0001',
- 0.8: '#fd0001',
- 0.9: '#95014b',
- 1: '#7e0226'
- } },
+ colorList: [{
+ maxNumber: 160,
+ color: '#12a112'
+ }, {
+ maxNumber: 200,
+ color: '#feff01'
+ }, {
+ maxNumber: 300,
+ color: '#fd8200'
+ }, {
+ maxNumber: 400,
+ color: '#fd0001'
+ }, {
+ maxNumber: 800,
+ color: '#95014b'
+ }, {
+ maxNumber: 1000,
+ color: '#7e0226'
+ }],
+ gradient: {}
+ },
{ code: 'a99054',
name: 'TVOC',
- maxNumber: 4,
src: require('@/assets/images/tl_TVOCNew.png'),
- gradient: {
- 0: '#12a112',
- 0.12: '#12a112',
- 0.25: '#feff01',
- 0.375: '#fd8200',
- 0.5: '#fd0001',
- 0.75: '#95014b',
- 1: '#7e0226'
- }}
+ colorList: [{
+ maxNumber: 0.5,
+ color: '#12a112'
+ }, {
+ maxNumber: 1,
+ color: '#feff01'
+ }, {
+ maxNumber: 1.5,
+ color: '#fd8200'
+ }, {
+ maxNumber: 2,
+ color: '#fd0001'
+ }, {
+ maxNumber: 3,
+ color: '#95014b'
+ }, {
+ maxNumber: 4,
+ color: '#7e0226'
+ }],
+ gradient: {}
+ }
],
heatMapData: [],
dataType: 'datetimerange',
@@ -293,6 +567,29 @@
}
},
methods: {
+ drawRectangle () {
+ AMap.plugin('AMap.MouseTool', () => {
+ let mouseTool = new AMap.MouseTool(this.map)
+ mouseTool.rectangle({
+ strokeColor: 'red',
+ strokeOpacity: 0.5,
+ strokeWeight: 6,
+ fillColor: 'blue',
+ fillOpacity: 0.5,
+ // strokeStyle��������� solid
+ strokeStyle: 'solid',
+ // strokeDasharray: [30,10],
+ })
+ mouseTool.on('draw', function (event) {
+ // event.obj ���������������������������������
+ let data = event.obj.getPath()
+ let allpoint = []
+ data.forEach(item => {
+ allpoint.push([item.R, item.Q])
+ })
+ })
+ })
+ },
download () {
const ref = this.$refs.content // ������������
html2canvas(ref, {
@@ -308,7 +605,6 @@
})
},
getDateFun (item) {
- console.log(item)
this.activeItem = item
if (this.orgId.length > 0) {
this.getData(item.name)
@@ -321,18 +617,13 @@
this.map.remove(this.heatmap)
this.heatmap = null
}
- console.log('this.heatmap', this.heatmap)
},
// ���������������
initMap () {
- let zoom = 10
- if (this.formInline.cityCode === '320900') {
- zoom = this.formInline.areName === 'dafengqu' ? 15 : 13
- }
var map = new AMap.Map('mapd', {
resizeEnable: true,
zoomEnable: false,
- zoom: zoom
+ zoom: this.formInline.cityCode === '320900' ? this.selectYcLocationInfor.zoom : 10
})
this.map = map
map.on('click', function (e) {
@@ -343,6 +634,7 @@
},
init1 () { // ������������
var that = this
+
if (that.polygon) {
that.map.remove(that.polygon)
that.map.remove(that.districtSearch)
@@ -354,46 +646,19 @@
extensions: 'all',
subdistrict: 0
}).search(that.formInline.cityCode, function (status, result) { // ���������������������������������������������������
- var outer = [
+ let 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 pathArray = [outer]
- 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)
+ let pathArray = [outer]
+ let holes = result.districtList[0].boundaries
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)
+ let locationInfor = _.find(that.ycPoints, { id: that.formInline.areName })
+ that.map.setCenter(locationInfor.centerPoint)
+ pathArray.push.apply(pathArray, locationInfor.path)
} else {
pathArray.push.apply(pathArray, holes)
that.map.setCity(that.formInline.city)
@@ -418,6 +683,7 @@
params: {
id: this.orgId[0],
startTime: newVal,
+ monitorId: this.formInline.areName,
type: this.selectSensor.code,
form: this.formInline.dayType
}
@@ -428,11 +694,8 @@
this.createHeatMap()
}
this.heatMapData = res.data
+
this.dataProcessing(this.heatMapData)
- this.heatmap.setDataSet({
- data: this.heatMapData,
- max: this.selectSensor.maxNumber
- })
} else {
this.map.remove(this.heatmap)
this.heatmap = null
@@ -442,118 +705,78 @@
console.log(err)
})
},
+ findMaxNumberForValue (value, colorList) {
+ let matchedMaxItem = null
+ for (let item of colorList) {
+ if (value <= item.maxNumber) {
+ matchedMaxItem = item
+ break // ���������������������
+ }
+ }
+ return matchedMaxItem
+ },
+ getGradientOption (matchedMaxItem) {
+ let gradient = {}
+ this.selectSensor.colorList.forEach(item => {
+ if (item.maxNumber <= matchedMaxItem.maxNumber) {
+ console.log('item', item)
+ let key = (item.maxNumber / matchedMaxItem.maxNumber).toFixed(1)
+ gradient[key] = item.color
+ }
+ }
+ )
+
+ let keysArray = Object.keys(gradient)
+ let valuesArray = Object.values(gradient)
+ console.log('keysArray', keysArray, valuesArray)
+ let obj = {}
+ keysArray.forEach((item, index) => {
+ console.log(item, index, parseInt(item))
+ if (Number(item) !== 1) {
+ obj[Number(item)] = valuesArray[index]
+ if (Number(item) + 0.1 < keysArray[index + 1]) {
+ obj[Number(item) + 0.1] = valuesArray[index + 1]
+ }
+ } else {
+ obj[Number(item)] = valuesArray[index]
+ }
+ })
+ obj[0] = '#12a112'
+ return obj
+ },
dataProcessing (heatMapData) {
// ���������������
- console.log('this.heatMapData', this.heatMapData)
const max = heatMapData.reduce((prev, current) => (prev.count > current.count ? prev : current)).count
-
- // so2
- if (this.selectSensor.code === 'a21026') {
- if (max > 150 && max <= 475) {
- this.selectSensor.maxNumber = 475
- this.heatmap.setOptions({
- gradient: {
- 0.1: '#12a112',
- 0.2: '#feff01',
- 0.3: '#feff01',
- 0.32: '#fd8200',
- 0.4: '#fd8200',
- 1: '#fd8200'
- }
- })
- }
- if (max > 475 && max <= 1000) {
- this.selectSensor.maxNumber = 1000
- this.heatmap.setOptions({
- gradient: {
- 0: '#12a112',
- 0.05: '#12a112',
- 0.15: '#feff01',
- 0.47: '#fd8200',
- 0.5: '#fd0001',
- 0.8: '#fd0001',
- 0.9: '#95014b',
- 1: '#7e0226'
- }
- })
- }
- } else if (this.selectSensor.code === 'a05024') {
- if (max > 150 && max <= 475) {}
- }
+ let matchedMaxItem = this.findMaxNumberForValue(max, this.selectSensor.colorList)
+ let gradient = this.getGradientOption(matchedMaxItem)
+ this.heatmap.setDataSet({
+ data: this.heatMapData,
+ max: matchedMaxItem.maxNumber
+ })
+ this.heatmap.setOptions({
+ gradient: gradient
+ })
},
// ���������
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)
+ let markerList = []
+ curData.forEach(item => {
+ // let marker = new AMap.Marker({
+ // position: new AMap.LngLat(item.lng, item.lat), // ������������������������������������������������������������[116.39, 39.9]
+ // title: item.name,
+ // })
+ let marker = new AMap.Text({
+ text: item.name, // ���������������������������
+ anchor: 'center', // ������������������������������
+ draggable: false, // ���������������
+ cursor: 'pointer', // ���������������������������������������
+ angle: 10, // ������������������������
+
+ position: [item.lng, item.lat], // ������������������������������������
})
- this.markerList.push(marker)
+ 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, index) => {
- console.log('indexitem', index, item.getExtData())
- contNumber += item.getExtData()
- })
- console.log('contNumber', contNumber)
- 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)
- console.log('context.marker----------------', context.marker)
- }
- })
- })
+ this.map.add(markerList)
},
getDayListData () {
this.$request({
@@ -580,13 +803,7 @@
.then(res => {
this.orgData = res.data.map(item => {
if (item.id === 73) {
- item.children = [{
- id: 'shiqu',
- name: '������'
- }, {
- id: 'dafengqu',
- name: '���������'
- }]
+ item.children = this.ycPoints
}
return item
})
@@ -597,14 +814,12 @@
},
createHeatMap () {
let that = this
- let radius = this.formInline.areName === 'shiqu' ? 100 : 100
- console.log('radius', radius)
+ // let radius = this.formInline.cityCode === '320900' ? this.selectYcLocationInfor.radius : 100
this.map.plugin(['AMap.Heatmap'], function () {
// ���������heatmap������
that.heatmap = new AMap.Heatmap(that.map, {
- radius: radius, // ������������
- opacity: [0.5, 1],
- gradient: that.selectSensor.gradient
+ radius: 100, // ���������
+ opacity: [0.5, 0.5]
})
})
},
@@ -632,21 +847,21 @@
}
},
regionData (id) {
- 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.selectYcLocationInfor = _.find(this.ycPoints, { id: id[1] })
this.formInline.city = cityData.cityName
this.formInline.cityCode = String(cityData.cityCode)
} else {
+ this.formInline.areName = ''
this.formInline.city = cityData.areaName
this.formInline.cityCode = String(cityData.areaCode)
}
},
selectHourData (data) {
- console.log('ccccc', this.formInline)
if (data) {
this.formInline.starTime = data[0]
this.formInline.endTime = data[1]
--
Gitblit v1.8.0