quanyawei
2023-10-10 aedfd334e94d4f6dc02a7538b24f50ceed6dd01f
Merge branch 'feature_1.0'
1 files modified
127 ■■■■■ changed files
src/components/Wind/Map.vue 127 ●●●●● patch | view | raw | blame | history
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,使用时请提前引入