From b81605dce7e305b2483b9f8618f08c0965832fef Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 12 Oct 2023 17:10:52 +0800
Subject: [PATCH] fix:风场粒子修改

---
 src/components/Wind/Map.vue |  683 ++++++++++++++++----------------------------------------
 1 files changed, 203 insertions(+), 480 deletions(-)

diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index 1f75648..61678cc 100644
--- a/src/components/Wind/Map.vue
+++ b/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
     }

--
Gitblit v1.8.0