fix:风场粒子修改

quanyawei

2023-10-12 b81605dce7e305b2483b9f8618f08c0965832fef

fix:风场粒子修改

 src/components/Wind/Map.vue

@@ -463,7 +463,8 @@
      chooseTime: false,

      dateInfo: '', // 选择的日期

      timeInfo: '', // 选择的时间

      nyr: '' // 选择的年月日

      nyr: '', // 选择的年月日

      windJsonData: []

    }

  },

  computed: {

@@ -476,6 +477,13 @@
    },

    regionCode(newCode, oldCode) {

      this.timerKey = newCode // 用于监听code变化重新渲染子组件

    },

    windJsonData(newCode, oldCode) {

      this.$nextTick(() => {

        console.log('111')



        this.canvasWind(newCode)

      })

    }

  },

  mounted() {

@@ -497,11 +505,8 @@
    const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // 百度经纬度转高德经纬度

    this.jingduNew = newLL[1]

    this.weiduNew = newLL[0]

    // 初始化风场数据

    // this.windData()

    // this.change(0)

    this.getParamsData()

    this.windDir()

    this.getParamsData(false)

    // this.windDir()

    this.newDate()

    // this.alertData(this.PageSize, this.currentPage)

  },

@@ -618,23 +623,19 @@
              this.chooseTime = true // 选择时间点

              if ((i + 1) / 24 < 1) {

                this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'

                console.log(111, this.nyr)

              } else if ((i + 1) / 24 < 2 && (i + 1) / 24 >= 1) {

                this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'

                console.log(222, this.nyr)

              } else if ((i + 1) / 24 < 3 && (i + 1) / 24 >= 2) {

                this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'

                console.log(333, this.nyr)

              } else {

                this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'

                console.log(444, this.nyr)

              }

              break

            }

          }

        }

        that.times = 1

        that.getParamsData()

        that.getParamsData(true)

      }

      // timeUl绑定点击事件

      timeUl.onclick = (e) => {

@@ -655,16 +656,12 @@
              this.chooseTime = true // 选择时间点

              if (i / 24 < 1) {

                this.nyr = this.newData(-2, 'nyr') + ' ' + times + ':00'

                console.log(111, this.nyr)

              } else if (i / 24 < 2 && i / 24 >= 1) {

                this.nyr = this.newData(-1, 'nyr') + ' ' + times + ':00'

                console.log(222, this.nyr)

              } else if (i / 24 < 3 && i / 24 >= 2) {

                this.nyr = this.newData(0, 'nyr') + ' ' + times + ':00'

                console.log(333, this.nyr)

              } else {

                this.nyr = this.newData(1, 'nyr') + ' ' + times + ':00'

                console.log(444, this.nyr)

              }

              break

            }

@@ -679,7 +676,7 @@
          // console.log('下边点击进来了', greenInfo, 'index')

        }

        that.times = 1

        that.getParamsData()

        that.getParamsData(true)

      }

      // 鼠标移入移出事件

      for (let i = 0; i < lis.length; i++) {

@@ -757,183 +754,6 @@
    mouseLeave() {

      this.map.scrollWheelZoom.enable()

    },

    // initWebpack() {

    //   // 拼写参数

    //   var param = this.accountId + '&' + this.orgId + '&' + this.regionCode

    //   // 拼写URL

    //   var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param

    //   socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')

    //   this.ws = new WebSocket(socketUrl)

    //   this.ws.onopen = this.onopen

    //   this.ws.onmessage = this.onmessage

    //   this.ws.onclose = this.onclose

    //   this.ws.onerror = this.onerror

    // },

    // reconnect() { // 重新连接

    //   var that = this

    //   if (that.lockReconnect) {

    //     return

    //   }

    //   that.lockReconnect = true

    //   // 没连接上会一直重连，设置延迟避免请求过多

    //   that.timeoutnum && clearTimeout(that.timeoutnum)

    //   that.timeoutnum = setTimeout(function() {

    //     // 新连接

    //     that.initWebpack()

    //     that.lockReconnect = false

    //   }, 5000)

    // },

    // reset() { // 重置心跳

    //   var that = this

    //   // 清除时间

    //   clearTimeout(that.timeoutObj)

    //   clearTimeout(that.serverTimeoutObj)

    //   // 重启心跳

    //   that.start()

    // },

    // start() { // 开启心跳

    //   // console.log('开启心跳')

    //   var self = this

    //   self.timeoutObj && clearTimeout(self.timeoutObj)

    //   self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)

    //   self.timeoutObj = setTimeout(function() {

    //     // 这里发送一个心跳，后端收到后，返回一个心跳消息，

    //     if (self.ws.readyState === 1) { // 如果连接正常

    //       self.ws.send('heartCheck')

    //     } else { // 否则重连

    //       self.reconnect()

    //     }

    //     self.serverTimeoutObj = setTimeout(function() {

    //       // 超时关闭

    //       self.ws.close()

    //     }, self.timeout)

    //   }, self.timeout)

    // },

    // onopen() {

    //   // console.log('连接开启')

    //   // 开启心跳

    //   this.start()

    // },

    // onmessage(msg) {

    //   var that = this

    //   if (JSON.parse(msg.data).名称) {

    //     that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')

    //   } else {

    //     that.wsData1 = msg.data

    //     if (that.windState === 2) {

    //       for (let i = 0; i < that.keyData.length; i++) {

    //         // 更新风向标

    //         // 遍历出(通过mac匹配)要更新的风向标

    //         if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {

    //           var blueIcon1 = L.icon({ // 设置图标样式

    //             iconUrl: require('@/assets/images/icoWind03.png'),

    //             iconSize: [30, 30],

    //             iconAnchor: [15, 25],

    //             className: 'iconWind'

    //           })

    //           // L.marker用来在地图中放置注记

    //           that.marker = L.marker([that.lats[i], that.lngs[i]], {

    //             icon: blueIcon1,

    //             rotationAngle: Number(JSON.parse(that.wsData1).风向)

    //           })

    //           if (i === 0) {

    //             that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })

    //             that.map.addLayer(that.marker)

    //           } else {

    //             that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })

    //             for (let j = 0; j < that.markerObject.length; j++) {

    //               if (that.coordinates[0] === that.markerObject[j].mac1) {

    //                 that.map.removeLayer(that.markerObject[j].marker)

    //                 that.map.addLayer(that.marker)

    //               } else if (that.coordinates[i] === that.markerObject[j].mac1) {

    //                 that.map.removeLayer(that.markerObject[j].marker)

    //                 that.map.addLayer(that.marker)

    //               }

    //             }

    //           }

    //         }

    //       }

    //     }

    //   }

    //   // 收到服务器信息，心跳重置

    //   this.reset()

    // },

    // onclose(e) {

    //   // console.log('连接关闭')

    //   // console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)

    //   // 重连

    //   this.reconnect()

    // },

    // onerror(e) {

    //   console.log('出现错误')

    //   // 重连

    //   this.reconnect()

    // },

    // ws方法

    // wsStart() {

    //   var that = this

    //   // 拼写参数

    //   var param = this.accountId + '&' + this.orgId + '&' + this.regionCode

    //   // 拼写URL

    //   var socketUrl = 'http://monitor-api2.7drlb.com/web/WebSocket/' + param

    //   // 替换http为WS

    //   //   console.log(socketUrl)

    //   socketUrl = socketUrl.replace('https', 'ws').replace('http', 'ws')

    //   this.ws = new WebSocket(socketUrl)

    //   // if (this.ws) {

    //   //   this.ws.close()

    //   //   console.log('ws心跳关闭')

    //   // }

    //   // this.ws = new WebSocket(socketUrl)

    //   // console.log('ws心跳开启')



    //   this.ws.onopen = function() {

    //     // console.log('websocket开启成功')

    //   }

    // 获得消息事件

    //   this.ws.onmessage = function(msg) {

    //     if (JSON.parse(msg.data).名称) {

    //       that.wsData2 = msg.data.replace(/,/g, `<br>`).replace(/{|}|"/g, '')

    //       //   console.log(that.wsData2)

    //     } else {

    //       that.wsData1 = msg.data

    //       //   console.log(that.wsData1)

    //       if (that.windState === 2) {

    //         for (let i = 0; i < that.keyData.length; i++) {

    //           // 更新风向标

    //           // 遍历出(通过mac匹配)要更新的风向标

    //           if (that.coordinates[i] === JSON.parse(that.wsData1).mac) {

    //             var blueIcon1 = L.icon({

    //               iconUrl: require('@/assets/images/icoWind03.png'),

    //               iconSize: [30, 30],

    //               iconAnchor: [15, 25],

    //               className: 'iconWind'

    //             })

    //             that.marker = L.marker([that.lats[i], that.lngs[i]], {

    //               icon: blueIcon1,

    //               rotationAngle: Number(JSON.parse(that.wsData1).风向)

    //             })

    //             if (i === 0) {

    //               that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })

    //               that.map.addLayer(that.marker)

    //             } else {

    //               that.markerObject.push({ mac1: that.coordinates[i], marker: that.marker })

    //               for (let j = 0; j < that.markerObject.length; j++) {

    //                 if (that.coordinates[0] === that.markerObject[j].mac1) {

    //                   that.map.removeLayer(that.markerObject[j].marker)

    //                   that.map.addLayer(that.marker)

    //                 } else if (that.coordinates[i] === that.markerObject[j].mac1) {

    //                   that.map.removeLayer(that.markerObject[j].marker)

    //                   that.map.addLayer(that.marker)

    //                 }

    //               }

    //             }

    //           }

    //         }

    //       }

    //     }

    //   }

    // },

    // 百度经纬度转高德经纬度

    bd09togcj02(bd_lon, bd_lat) {

      var x_pi = (3.14159265358979324 * 3000.0) / 180.0

@@ -945,56 +765,8 @@
      var gg_lat = z * Math.sin(theta)

      return [gg_lat, gg_lng]

    },

    // /**

    //  * GCJ02 转换为 WGS84

    //  * @param lng

    //  * @param lat

    //  * @returns {*[]}

    //  */

    // gcj02towgs84(lng, lat) {

    //   if (this.out_of_china(lng, lat)) {

    //     return [lat,lng]

    //   } else {

    //     var dlat = this.transformlat(lng - 105.0, lat - 35.0);

    //     var dlng = this.transformlng(lng - 105.0, lat - 35.0);

    //     var radlat = lat / 180.0 * PI;

    //     var magic = Math.sin(radlat);

    //     magic = 1 - ee * magic * magic;

    //     var sqrtmagic = Math.sqrt(magic);

    //     dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);

    //     dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);

    //     var mglat = lat + dlat;

    //     var mglng = lng + dlng;

    //     return [ lat * 2 - mglat,lng * 2 - mglng]

    //   }

    // },

    //

    // transformlat(lng, lat) {

    //   var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));

    //   ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;

    //   ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;

    //   ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;

    //   return ret

    // },

    // transformlng(lng, lat) {

    //   var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));

    //   ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;

    //   ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;

    //   ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;

    //   return ret

    // },

    // /**

    //  * 判断是否在国内，不在国内则不做偏移

    //  * @param lng

    //  * @param lat

    //  * @returns {boolean}

    //  */

    // out_of_china(lng, lat) {

    //   return (lng < 72.004 || lng > 137.8347) || ((lat < 0.8293 || lat > 55.8271) || false);

    // },

    // 请求设备坐标,当前的

    deviceMaker() {

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

@@ -1007,7 +779,6 @@
          }

        })

      }

      const that = this

      this.$request({

        url: '/historyFiveMinutely/queryDeviceAndData',

        method: 'get',

@@ -1021,19 +792,17 @@
      }).then((data) => {

        // console.log('五分钟设备数据')

        console.log(data, 'tata')

        that.loading = false

        this.markDeviceSite(data)

      })

    },

    // 标记设备点

    markDeviceSite(data) {

      // data.data.devices.latitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[0]

      // data.data.devices.longitude = gcj02towgs84(data.data.devices.longitude, data.data.devices.latitude)[1]

      var keyData = data.data.devices

      this.keyData = data.data.devices

      // 遍历国控站位置

      this.stateControlStation()

      var group = L.layerGroup().addTo(this.map)

      // this.stateControlStation()

      var groupIcon = L.layerGroup().addTo(this.map)

      var groupText = L.layerGroup().addTo(this.map)

      this.keys = []

      for (let i = 0; i < keyData.length; i++) {

        if (keyData[i].a34002) {

@@ -1055,12 +824,6 @@
          this.keys.push(JSON.parse('null'))

          // }

        }

        // console.log(this.keys)

        // const newL = this.bd09togcj02(keyData[i].longitude, keyData[i].latitude)

        // var lat = newL[0]

        // this.lats[i] = newL[0]

        // var lng = newL[1]

        // this.lngs[i] = newL[1]

        var lat = keyData[i].latitude

        this.lats[i] = keyData[i].latitude

        var lng = keyData[i].longitude

@@ -1344,10 +1107,12 @@
          iconAnchor: [30, 48],

          className: 'my-device'

        })



        // 添加标记到地图

        L.marker([lat, lng], {

        const iconMarker = L.marker([lat, lng], {

          icon: blueIcon

        }).addTo(group)

        })

        groupIcon.addLayer(iconMarker)

        // console.log(JSON.parse(this.keys[i]))

        var myIcon = L.divIcon({

          html: this.keys[i],

@@ -1355,129 +1120,64 @@
          iconSize: [60, 60],

          iconAnchor: [40, 40]

        })

        var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)



        const TexteMarker = L.marker([lat, lng], { icon: myIcon })

        groupText.addLayer(TexteMarker)

        const _this = this

        // 给标记添加鼠标移入事件，mouseover事件会冒泡

        var _this = this

        marker.on('mouseover', function(e) {

        TexteMarker.on('click', function(e) {

          const MarkerTarget = e.target

          _this.getMarkerInfor(keyData[i], MarkerTarget)

          this.noneData = false

          // $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac, chooseTime: this.chooseTime, time: this.nyr }, (res) => {

          //   var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')

          //   // console.log(data)

          //   this.bindPopup(data).openPopup()

          // })

          _this

            .$request({

              url: '/historyFiveMinutely/queryPopDataByMac',

              method: 'get',

              params: {

                mac: keyData[i].mac,

                chooseTime: _this.chooseTime,

                time: _this.nyr

              }

            })

            .then((res) => {

              if (res.message == '操作目标不存在') {

                var datafalse = '暂无五分钟数据'

                this.bindPopup(datafalse).openPopup()

                return

              }

              for (const key in res.data) {

                var tempDecimal = res.data[key]

                  .replace(/[^\d.]/g, '')

                  .split('.')[1]

                if (key !== '名称' && key !== '时间') {

                  if (Number(tempDecimal) === 0) {

                    res.data[key] =

                      parseInt(res.data[key]) + res.data[key].split(' ')[1]

                  } else {

                    res.data[key] =

                      Number(res.data[key].split(' ')[0]).toFixed(2) +

                      res.data[key].split(' ')[1]

                  }

                  // var num = res.data[key].split(' ')[0]

                  // res.data[key] = (num - 0).toFixed(3)

                }

              }

              var data = JSON.stringify(res.data)

                .replace(/,/g, `<br>`)

                .replace(/{|}|"/g, '')

              this.bindPopup(data).openPopup()

            })

            .catch((err) => {

              console.log(err)

            })

        })

        // 给标记点添加鼠标移出事件

        marker.on('mouseout', function(e) {

          this.noneData = false

          this.bindPopup().closePopup()

        })

        // TexteMarker.on('mouseout', function(e) {

        //   this.noneData = false

        //   this.bindPopup().closePopup()

        // })

      }

    },

    // 给标记点添加移入移出事件

    // moveInAndOut() {

    //

    // },

    // 国控站经纬度

    stateControlStation() {

      // this.$axios.get('monitorPoint/queryStateControlStation', {

    getMarkerInfor(data, marker) {

      this.$request({

        url: '/govMonitorPoint/queryStateControlStation',

        url: '/historyFiveMinutely/queryPopDataByMac',

        method: 'get',

        params: {

          regionCode: 130900,

          sensorCode: 'a34002'

          mac: data.mac,

          chooseTime: this.chooseTime,

          time: this.nyr

        }

      })

        .then((res) => {

          // console.log('国控站信息')

          // console.log(res)

          var gkData = res.data

          var group = L.layerGroup().addTo(this.map)

          for (let i = 0; i < gkData.length; i++) {

            var glat = gkData[i].latitude

            var glng = gkData[i].longitude

            var gIcon = L.icon({

              iconUrl: require('@/assets/icon/gk.png'),

              // iconUrl:require('@/assets/images/tl_PM10.png'),

              iconSize: [55, 55],

              iconAnchor: [13, 21],

              className: 'my-device'

            })

            // 添加标记到地图

            L.marker([glat, glng], {

              icon: gIcon

            }).addTo(group)

            var myIcon = L.divIcon({

              html: gkData[i].data,

              className: 'my-div-icon-g',

              iconSize: 30

            })

            L.marker([glat, glng], {

              icon: myIcon

            }).addTo(group)

          if (res.message === '操作目标不存在') {

            var datafalse = '暂无五分钟数据'

            this.bindPopup(datafalse).openPopup()

            return

          }

          for (const key in res.data) {

            var tempDecimal = res.data[key]

              .replace(/[^\d.]/g, '')

              .split('.')[1]

            if (key !== '名称' && key !== '时间') {

              if (Number(tempDecimal) === 0) {

                res.data[key] =

                      parseInt(res.data[key]) + res.data[key].split(' ')[1]

              } else {

                res.data[key] =

                      Number(res.data[key].split(' ')[0]).toFixed(2) +

                      res.data[key].split(' ')[1]

              }

            }

          }

          var data = JSON.stringify(res.data)

            .replace(/,/g, `<br>`)

            .replace(/{|}|"/g, '')

          console.log(data)

          marker.bindPopup(data).openPopup()

        })

        .catch((err) => {

          console.log(err)

        })

    },

    // 切换风场风向状态

    toggleWindState() {

      if (this.ws) {

        this.ws.close()

      }

      if (this.windState === 2) {

        this.windState = 1

        this.windStateText = '风场图'

        this.initData()

        // console.log(this.windState)

      } else if (this.windState === 1) {

        this.windState = 2

        this.windStateText = '风向标'

        this.windDir()

        // console.log(this.windState)

      }

      return data

    },

    // 请求风向标

    windDir() {

@@ -1499,68 +1199,27 @@
      }

      // 执行生成设备点方法

      this.deviceMaker()

      // 执行ws方法

      // this.wsStart()

      // this.initWebpack()

      // console.log('这是ws需要的三个参数')

      // console.log(this.accountId, this.orgId, this.regionCode)

      // this.timer2 = setInterval(() => {

      //   if (this.ws) {

      //     this.ws.close()

      //     console.log('ws心跳关闭')

      //   }

      //   // 执行ws方法

      //   this.wsStart()

      //   console.log('ws心跳开启')

      // }, 60000)

    },

    // 获得父组件改变regionCode子组件请求api功能

    getRegionApiRequest() {

      // console.log(this.$store.state.regionCode)

      // this.ws.close()

      // console.log('ws关闭')

      // 请求更新风场数据

      this.getParamsData()

      this.getParamsData(true)

      setTimeout(() => {

        $.getJSON(

          'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea',

          { monitorPointId: this.$store.state.monitorPointId },

          (data) => {

            // 遍历所有图层

            //   console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')

            //   console.log(data)

            // this.map.eachLayer(function(layer) {

            // // 卸载之前的风场图层

            //   if (!layer._container && ('' + $(layer._container).attr('class')).replace(/\s/g, '') !== 'leaflet-layer') {

            //     layer.remove()

            //   }

            // })

            this.map.setView([data[2], data[1]], 12)

            //   console.log('跳转成功')

          }

        )

      }, 1000)

      // if (this.windState === 1) {

      //   console.log('getRegionApiRequest')

      //   this.initData()

      // console.log('请求风场图')

      // } else if (this.windState === 2) {

      // this.windDir()

      // console.log('请求风向标')

      // }

      // 请求设备坐标

      // this.deviceMaker()

      // this.getParamsData()

    },

    // 子组件地图的跳转中心点方法

    jumpMap(LngLat) {

      // console.log('我是子组件方法')

      // console.log(this.jumpData)

      // console.log(LngLat)

      this.map.setView(LngLat, 18)

    },

    // 请求更新风场数据

    getParamsData() {

    getParamsData(isFirst = true) {

      clearInterval(this.timer)

      this.timer = setInterval(() => {

        this.currentHour()

@@ -1580,33 +1239,41 @@
            this.chooseTimeInfo = false

            // console.log('else')

          }

          // console.log(this.chooseTimeInfo, 'this.chooseTimeInfo ')

          // clearInterval(this.timer)

          // if (this.windState === 1) {

          // this.ws.close()

          // this.initData()

          // console.log('请求风场图')

          // } else if (this.windState === 2) {

          // this.windDir()

          // console.log('请求风向标')

          // }

          setTimeout(() => {

            this.change(this.changeColor)

            console.log('change', isFirst)

            if (isFirst) {

              this.windData()

              this.deviceMaker()

            } else {

              this.change(this.changeColor)

            }

            this.times = 300

          }, 100)

        }

      }, 1000)

    },

    findLayer(layerName) { // 根据图层名称查找图层

      if (!this.map) {

        return null

      }

      const gisMap_layers = this.map._layers

      let layer = null

      for (const i in gisMap_layers) {

        if (gisMap_layers[i].options.id === layerName) {

          layer = gisMap_layers[i]

        }

      }

      return layer

    },

    // 初始化地图容器

    initMap() {

      //   console.log('这是index传到map的经纬度')

      //   console.log(this.weidu)

      //   console.log(this.jingdu)

      var map = L.map('mapContent', {

        inertia: false,

        minZoom: 2,

        maxZoom: 18,

        center: [this.weiduNew, this.jingduNew],

        zoom: 14,

        renderer: L.canvas(),

        zoomControl: false, // 缩放组件

        attributionControl: false, // 去掉右下角logol

        crs: L.CRS.EPSG3857 // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84

@@ -1615,10 +1282,18 @@
      L.tileLayer(

        'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'

      ).addTo(map)

      // L.tileLayer(

      //   'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'

      // ).addTo(map)

      this.map = map // data上需要挂载

      // const that = this

      // this.map.on('mousedown', function(ev) {

      //   const res = that.findLayer('wmsid')

      //   if (res) {

      //     that.map.removeLayer(res)

      //   }

      // })

      // this.map.on('mouseup', function(ev) {

      //   console.log('1111111')

      //   that.canvasWind(this.windJsonData)

      // })

      window.map = map

    },

    // 更改不同的值区间

@@ -1659,18 +1334,14 @@
      // 请求设备坐标

      // this.toggleWindState()

      if (this.windState === 1) {

        this.initData()

        this.deviceMaker()

        this.windData()

      } else if (this.windState === 2) {

        this.windDir()

      }

    },

    // 请求风场图接口

    initData() {

      // console.log('加载风场')

      // const that = this

      // 请求更新风场数据

      //   console.log(this.monitorPointId)

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

@@ -1684,11 +1355,7 @@
        })

      }

      this.deviceMaker()

      //   console.log('请求风场之前')

      // $.ajaxSettings.async = false

      // for (let i = 0; i < this.monitorPointIds.length; i++) {

      this.windData()

      // }

    },

    // 风场图数据

    windData() {

@@ -1702,59 +1369,54 @@
        }

      })

        .then((res) => {

          // console.log('新风场数据')

          // console.log(res)

          // if (res.data[0][0].data.length === 0) {

          //   this.noneData = true

          // }

          // 生成风场实例

          // var data2 = res.data[0]

          // data2[1].header.parameterNumberName = 'northward_wind'

          // data2[0].header.parameterUnit = 'm.s-1'

          // data2[1].header.parameterUnit = 'm.s-1'

          // data2[0].header.dx = 0.00234842479

          // data2[1].header.dx = 0.00234842479

          // data2[0].header.dy = 0.0018464922

          // data2[1].header.dy = 0.0018464922

          // console.log(data2, 'data2')

          var velocityLayer = L.velocityLayer({

            displayValues: false, // 是否显示当前鼠标移动位置，风场信息

            displayOptions: {

              // 显示信息配置

              // velocityType: 'Global Wind',

              velocityType: 'GBR Wind',

              displayPosition: 'bottomleft',

              displayEmptyString: 'No wind data'

            },

            data: res.data[0], // 数据  格式可参照

            // data: data2,

            // 以下为控制参数，后面为默认值

            minVelocity: 0, // 粒子最小速度（ m/s ）

            maxVelocity: 8, // 粒子最大速度（ m/s ）

            velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )

            particleAge: 90, // 粒子在再生之前绘制的最大帧数

            lineWidth: 1.5, // 绘制粒子的线宽

            particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）

            frameRate: 15, // 每秒所需的帧数

            colorScale: [

              '#A2D839',

              '#7EB530',

              '#6E9F26',

              '#4E7522',

              '#345B1B',

              '#186303',

              '#175103',

              '#053F03'

            ]

            // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']

          })

          velocityLayer.addTo(this.map) // 添加到图上

          // console.log('风场数据')

          // console.log(res.data[0])

          this.windJsonData = res.data[0]

          return this.windJsonData

        })

        .catch((err) => {

          console.log(err)

        })

    },

    canvasWind(data) {

      const res = this.findLayer('wmsid')

      if (res) {

        this.map.removeLayer(res)

      }

      var velocityLayer = L.velocityLayer({

        displayValues: false, // 是否显示当前鼠标移动位置，风场信息

        id: 'wmsid',

        displayOptions: {

          // 显示信息配置

          // velocityType: 'Global Wind',

          velocityType: 'GBR Wind',

          displayPosition: 'bottomleft',

          displayEmptyString: 'No wind data'

        },

        data: data, // 数据  格式可参照

        // data: data2,

        // 以下为控制参数，后面为默认值

        minVelocity: 0, // 粒子最小速度（ m/s ）

        maxVelocity: 8, // 粒子最大速度（ m/s ）

        velocityScale: 0.1, // 风速的比例 ( 粒子的小尾巴长度 )

        particleAge: 90, // 粒子在再生之前绘制的最大帧数

        lineWidth: 1.5, // 绘制粒子的线宽

        particleMultiplier: 1 / 300, // 粒子计数标量（ 粒子密度 ）

        frameRate: 15, // 每秒所需的帧数

        colorScale: [

          '#A2D839',

          '#7EB530',

          '#6E9F26',

          '#4E7522',

          '#345B1B',

          '#186303',

          '#175103',

          '#053F03'

        ]

        // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']

      })

      velocityLayer.addTo(this.map) // 添加到图上

      setTimeout(() => {

        this.loading = false

      }, 1000)

    },

    // 将页码，及每页显示的条数以参数传递提交给后台

    alertData(n1, n2) {

@@ -1831,6 +1493,67 @@
      }

      this.showOrHidden = !this.showOrHidden

    },

    // 国控站经纬度

    stateControlStation() {

      // this.$axios.get('monitorPoint/queryStateControlStation', {

      this.$request({

        url: '/govMonitorPoint/queryStateControlStation',

        method: 'get',

        params: {

          regionCode: 130900,

          sensorCode: 'a34002'

        }

      })

        .then((res) => {

          // console.log('国控站信息')

          // console.log(res)

          var gkData = res.data

          var group = L.layerGroup().addTo(this.map)

          for (let i = 0; i < gkData.length; i++) {

            var glat = gkData[i].latitude

            var glng = gkData[i].longitude

            var gIcon = L.icon({

              iconUrl: require('@/assets/icon/gk.png'),

              // iconUrl:require('@/assets/images/tl_PM10.png'),

              iconSize: [55, 55],

              iconAnchor: [13, 21],

              className: 'my-device'

            })

            // 添加标记到地图

            L.marker([glat, glng], {

              icon: gIcon

            }).addTo(group)

            var myIcon = L.divIcon({

              html: gkData[i].data,

              className: 'my-div-icon-g',

              iconSize: 30

            })

            L.marker([glat, glng], {

              icon: myIcon

            }).addTo(group)

          }

        })

        .catch((err) => {

          console.log(err)

        })

    },

    // 切换风场风向状态

    toggleWindState() {

      if (this.ws) {

        this.ws.close()

      }

      if (this.windState === 2) {

        this.windState = 1

        this.windStateText = '风场图'

        this.initData()

        // console.log(this.windState)

      } else if (this.windState === 1) {

        this.windState = 2

        this.windStateText = '风向标'

        this.windDir()

        // console.log(this.windState)

      }

    },

    closeAlarmTableVisible() {

      this.$store.state.alarmTableVisible = false

    }