fix: 盐城热力图

quanyawei

2024-03-27 a5e288eead42db17f8715bc21326465648bc1c04

fix: 盐城热力图

 src/views/hotMap/components/selectHour.vue

@@ -89,7 +89,7 @@
      let starTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
      this.value1 = [
        `${starTime} 00`,
        dayjs().format('YYYY-MM-DD HH')
        dayjs().subtract(1, 'hour').format('YYYY-MM-DD HH')
      ]
    }
  },

 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 = ''