fix:风场粒子修改

quanyawei

2023-10-09 3baa66227be11c149fef6bdec5a1401ed2d3d79d

fix:风场粒子修改

 src/components/Wind/Map.vue

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

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

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

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

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

      windAllDate: []

    }

  },

  computed: {

@@ -479,6 +480,9 @@
    }

  },

  mounted() {

    this.$nextTick(() => {

      this.getParamsData()

    })

    this.currentHour()

    this.$Bus.$on(

      'alarmTableVisible',

@@ -500,7 +504,7 @@
    // 初始化风场数据

    // this.windData()

    // this.change(0)

    this.getParamsData()



    this.windDir()

    this.newDate()

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

@@ -1562,6 +1566,7 @@
    // 请求更新风场数据

    getParamsData() {

      clearInterval(this.timer)

      this.change(this.changeColor)

      this.timer = setInterval(() => {

        this.currentHour()

        this.times--

@@ -1590,13 +1595,24 @@
          // this.windDir()

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

          // }

          setTimeout(() => {

            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的经纬度')

@@ -1607,8 +1623,12 @@
        maxZoom: 18,

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

        zoom: 14,

        zoomControl: false, // 缩放组件

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

        zoomControl: true, // 缩放组件

        trackResize: true,

        worldCopyJump: true,

        dragging: true,

        inertia: true,

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

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

      })

      // 定义图层样式

@@ -1618,11 +1638,26 @@
      // 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)

      const that = this

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



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

        const res = that.findLayer('wmsid')

        that.map.removeLayer(res)

        that.openWindCanves()

      })

      // this.map.on('viewreset', function() {

      //   console.log('--->viewreset 重绘内容时触发')

      // })

      window.map = map

    },

    // 更改不同的值区间

    change(index) {

      if (this.windState === 1) {

        this.initData()

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

        this.windDir()

      }

      this.changeColor = index

      var pr = ''

      switch (index) {

@@ -1658,11 +1693,6 @@
      this.sensorKey = pr

      // 请求设备坐标

      // this.toggleWindState()

      if (this.windState === 1) {

        this.initData()

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

        this.windDir()

      }

    },

    // 请求风场图接口

    initData() {

@@ -1683,11 +1713,11 @@
          }

        })

      }

      this.windData()

      this.deviceMaker()

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

      // $.ajaxSettings.async = false

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

      this.windData()

      // }

    },

    // 风场图数据

@@ -1702,6 +1732,8 @@
        }

      })

        .then((res) => {

          this.windAllDate = res.data[0]

          this.openWindCanves()

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

          // console.log(res)

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

@@ -1717,38 +1749,6 @@
          // 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])

        })

@@ -1756,6 +1756,41 @@
          console.log(err)

        })

    },

    openWindCanves() {

      var velocityLayer = L.velocityLayer({

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

        id: 'wmsid',

        displayOptions: {

          // 显示信息配置

          // velocityType: 'Global Wind',

          velocityType: 'GBR Wind',

          displayPosition: 'bottomleft',

          displayEmptyString: 'No wind data'

        },

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

        // 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) // 添加到图上

    },

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

    alertData(n1, n2) {

      // 这里使用axios，使用时请提前引入