Merge branch 'feature_1.0'

quanyawei

2023-10-12 dc3dfdd4b6d9634f49a2ef4e501dc0f9885f6fbe

Merge branch 'feature_1.0'

 src/components/Wind/Map.vue

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

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

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

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

      windALLData: []

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

    }

  },

  computed: {

@@ -499,13 +498,11 @@
    this.jingduNew = newLL[1]

    this.weiduNew = newLL[0]

    // 初始化风场数据

    // this.initData()

    // this.windData()

    // this.change(0)

    this.windData()

    this.getParamsData()

    // this.deviceMaker()

    this.windDir()

    this.newDate()



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

  },

  beforeDestroy() {

@@ -722,6 +719,12 @@
    },

    // 当前小时默认值

    currentHour() {

      // const aData = new Date()

      // const month = aData.getMonth() < 9 ? '0' + (aData.getMonth() + 1) : aData.getMonth() + 1

      // const date = aData.getDate() <= 9 ? '0' + aData.getDate() : aData.getDate()

      // const hour = aData.getHours() <= 9 ? '0' + aData.getHours() - 1 : aData.getHours() - 1

      // const currentDate = aData.getFullYear() + '-' + month + '-' + date + ' ' + hour + ':00'

      // this.dateFormat = currentDate.toString()

      const aData = new Date()

      const month =

        aData.getMonth() < 9

@@ -754,6 +757,183 @@
    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

@@ -765,12 +945,67 @@
      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) {

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

        // this.map.removeLayer(res)

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (

            !layer._container &&

            ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==

              'leaflet-layer'

          ) {

            layer.remove()

          }

        })

      }

      const that = this

      this.$request({

@@ -792,13 +1027,14 @@
    },

    // 标记设备点

    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()



      this.stateControlStation()

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

      this.keys = []

      var markerList = []

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

        if (keyData[i].a34002) {

          this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))

@@ -819,6 +1055,12 @@
          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

@@ -1099,27 +1341,30 @@
          iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),

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

          iconSize: [60, 60],

          iconAnchor: [30, 48],

          className: 'my-device'

        })

        // 添加标记到地图

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

        L.marker([lat, lng], {

          icon: blueIcon

        })

        markerList.push(a)

        const bg = `<div style='height:20px;cursor: pointer;'>${this.keys[i]}</div>`

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

        }).addTo(group)

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

        var myIcon = L.divIcon({

          html: bg,

          html: this.keys[i],

          className: 'my-div-icon',

          iconSize: [50, 20],

          iconAnchor: [26, 30]

          iconSize: [60, 60],

          iconAnchor: [40, 40]

        })

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

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

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

        var _this = this

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

          console.log('e', e)

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

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

@@ -1131,7 +1376,7 @@
              }

            })

            .then((res) => {

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

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

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

                this.bindPopup(datafalse).openPopup()

                return

@@ -1156,20 +1401,18 @@
              var data = JSON.stringify(res.data)

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

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

              this.bindPopup(data).togglePopup()

              this.bindPopup(data).openPopup()

            })

            .catch((err) => {

              console.log(err)

            })

        })

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

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

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

          this.noneData = false

          this.bindPopup().togglePopup()

          this.bindPopup().closePopup()

        })

        markerList.push(b)

      }

      L.layerGroup(markerList).addTo(this.map)

    },

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

    // moveInAndOut() {

@@ -1220,48 +1463,104 @@
        })

    },

    // 切换风场风向状态

    // 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)

    //   }

    // },

    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)

      }

    },

    // 请求风向标

    windDir() {

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

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

      // const that = this

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (

            !layer._container &&

            ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==

              'leaflet-layer'

          ) {

            layer.remove()

          }

        })

      }

      // 执行生成设备点方法

      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() {

    //   this.getParamsData()

    //   setTimeout(() => {

    //     $.getJSON(

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

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

    //       (data) => {

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

    //       }

    //     )

    //   }, 1000)

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

    //     this.initData()

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

    //     this.windDir()

    //   }

    // },

    getRegionApiRequest() {

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

      // this.ws.close()

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

      // 请求更新风场数据

      this.getParamsData()

      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() {

      console.log('getParamsData', this.windState)

      clearInterval(this.timer)

      this.timer = setInterval(() => {

        this.currentHour()

@@ -1281,6 +1580,16 @@
            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)

            this.times = 300

@@ -1288,29 +1597,12 @@
        }

      }, 1000)

    },



    // 初始化地图

    // initMap() {

    //   var map = new AMap.Map('container', {

    //     resizeEnable: true,

    //     rotateEnable: true,

    //     pitchEnable: true,

    //     zoom: 14,

    //     pitch: 80,

    //     expandZoomRange: true,

    //     zooms: [3, 20],

    //     center: [120.9781494, 31.4265156]

    //   })

    //   this.map = map

    //   this.map.on('click', () => {

    //     if (this.infoWindow !== null) {

    //       this.infoWindow.close()

    //     }

    //   })

    // },

    // 初始化地图容器

    initMap() {

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

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

      //   console.log(this.weidu)

      //   console.log(this.jingdu)

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

        minZoom: 2,

        maxZoom: 18,

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

@@ -1323,39 +1615,14 @@
      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上需要挂载

      window.map = map

      const that = this

      this.map.invalidateSize(true)

      this.map.on('movestart', function(ev) {

        that.map.stop()

        console.log('move')

        const res = that.findLayer('wmsid')

        if (that.map.hasLayer(res)) {

          const res = that.findLayer('wmsid')

          that.map.removeLayer(res)

        }

      })

      this.map.on('moveend', function(ev) {

        that.openLayer()

      })

    },

    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

    },

    // 更改不同的值区间

    change(index) {

      console.log('change', this.windState)

      this.changeColor = index

      var pr = ''

      switch (index) {

@@ -1391,13 +1658,37 @@
      this.sensorKey = pr

      // 请求设备坐标

      // this.toggleWindState()

      this.deviceMaker()

      this.openLayer()

      if (this.windState === 1) {

        this.initData()

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

        this.windDir()

      }

    },

    // 请求风场图接口

    initData() {

      this.windData()

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

      // const that = this

      // 请求更新风场数据

      //   console.log(this.monitorPointId)

      // 遍历所有图层

      if (this.map) {

        this.map.eachLayer(function(layer) {

          // 卸载之前的风场图层

          if (

            !layer._container &&

            ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==

              'leaflet-layer'

          ) {

            layer.remove()

          }

        })

      }

      this.deviceMaker()

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

      // $.ajaxSettings.async = false

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

      this.windData()

      // }

    },

    // 风场图数据

    windData() {

@@ -1411,53 +1702,59 @@
        }

      })

        .then((res) => {

          this.windALLData = []

          this.windALLData = res.data[0]

          this.openLayer()

          // 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])

        })

        .catch((err) => {

          console.log(err)

        })

    },

    openLayer() {

      const res = this.findLayer('wmsid')

      if (this.map.hasLayer(res)) {

        const res = this.findLayer('wmsid')

        this.map.removeLayer(res)

      }

      var velocityLayer = L.velocityLayer({

        id: 'wmsid',

        localMode: true,

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

        displayOptions: {

          // 显示信息配置

          // velocityType: 'Global Wind',

          velocityType: 'GBR Wind',

          displayPosition: 'bottomleft',

          displayEmptyString: 'No wind data'

        },

        data: this.windALLData, // 数据  格式可参照

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

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

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

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

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

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

      }, { collapsed: false, hideSingleBase: true })

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

    },

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

    alertData(n1, n2) {

@@ -1751,10 +2048,10 @@
.my-div-icon {

  font-size: 14px;

  text-align: center;

  padding-top: 13px;

  padding-left: 20px;

  padding-top: 6px;

  font-family: '微软雅黑';

  z-index: 10003;

  cursor: pointer !important;

  /* -webkit-transform-origin-x: 0; */

  /* -webkit-transform: scale(0.90); */

}

@@ -1765,8 +2062,6 @@
  padding-top: 11px;

  font-family: '微软雅黑';

  z-index: 10003;

  pointer-events: none !important;

  cursor: pointer !important;

  /* -webkit-transform-origin-x: 0; */

  /* -webkit-transform: scale(0.90); */

}

@@ -1775,8 +2070,6 @@
}

.my-device {

  z-index: 999;

  pointer-events: none !important;

  cursor: pointer !important;

}

.windDir-icon {

  z-index: 10001;

@@ -1837,5 +2130,4 @@
  margin-left: -45px;

  margin-top: -40px;

}



</style>