iClientOpenlayers实现风场类封装

一、封装类代码

/***
 * 风场通用工具
 * author：zdh
 * @type {WindyUtil}
 */
import { WindLayer } from 'ol-wind'
import VectorSource from 'ol/source/Vector'
let windLayerSource = new VectorSource({
  wrapX: false
})
let WindyUtil = (function () {
  function WindyUtil (map) {
    this.map = map
    this.windLayer = null
    this.allgrid = null
    this.windData = null
  }
  WindyUtil.prototype.addWindyLayer = function(windData) {
    this.windData = windData
    this.windLayer = new WindLayer(windData, {
      forceRender: false,
      windOptions: {
        colorScale: [
          'rgb(36,104, 180)',
          'rgb(60,157, 194)',
          'rgb(128,205,193 )',
          'rgb(151,218,168 )',
          'rgb(198,231,181)',
          'rgb(238,247,217)',
          'rgb(255,238,159)',
          'rgb(252,217,125)',
          'rgb(255,182,100)',
          'rgb(252,150,75)',
          'rgb(250,112,52)',
          'rgb(245,64,32)',
          'rgb(237,45,28)',
          'rgb(220,24,32)',
          'rgb(180,0,35)'
        ],
        // colorScale: scale,
        velocityScale: 1 / 90,
        paths: 3000,
        // eslint-disable-next-line no-unused-vars
        // colorScale: () => {
        //   // console.log(m);
        //   return '#4d4dff';
        // },
        width: 1,
        // colorScale: scale,
        generateParticleOption: false
      },
      // map: map,
      // projection: 'EPSG:4326'
    })
    this.windLayer.getSource = function (){
      return  windLayerSource
    }
    this.map.addLayer(this.windLayer)
    this.analysisWindyData(windData)
  }
  WindyUtil.prototype.clearWindyLayer = function() {
    this.map.removeLayer(this.windLayer)
  }
  WindyUtil.prototype.analysisWindyData = function(windydata) {
    this.allgrid = []
    var p = 0
    var east, north
    if (windydata[0].header.parameterNumberName == "eastward_wind") {
      east = windydata[0]
      north = windydata[1]
    } else {
      east = windydata[1]
      north = windydata[0]
    }
    for (var j = 0; j < north.header.ny; j++) {
      var row = []
      for (var i = 0; i < north.header.nx; i++, p++) {
        row[i] = [east.data[p], north.data[p]]
      }
      this.allgrid[j] = row
    }
  }
  WindyUtil.prototype.getWindyDetail = function(coord) {
    var lng = coord[0]
    var lat = coord[1]
    // 与格网序列的数据转换
    if (lng >= 0) {
      lng = Math.floor(lng)
    } else {
      lng = 360 + Math.floor(lng)
    }
    lat = 90 - Math.floor(lat)
    // 获取对应的格网序列
    var xlength = lng
    var ylength = lat
    var xdata, ydata
    xdata = parseFloat(this.allgrid[Math.abs(ylength)][Math.abs(xlength)][0])
    ydata = parseFloat(this.allgrid[Math.abs(ylength)][Math.abs(xlength)][1])
    if (typeof xdata != "number" || typeof ydata != "number") {
      console.error("暂无该区域风向数据！")
      return
    }
    var v = Math.sqrt(Math.pow(xdata, 2) + Math.pow(ydata, 2))
    var angle = this.getWindyAngle(xdata, ydata)
    var result = {
      "direction": this.getWindyDirection(angle),
      "level": this.getWindyLevel(v),
      "speed": v.toFixed(2)
    }
    return result
  }
  WindyUtil.prototype.getWindyDirection = function(angle) {
    if ((angle >= 0 && angle <= 22.5) || (angle <= 360 && angle > 337.5)) {
      return "北风"
    }
    if (angle <= 337.5 && angle > 292.5) {
      return "西北风"
    }
    if (angle <= 292.5 && angle > 247.5) {
      return "西风"
    }
    if (angle <= 247.5 && angle > 202.5) {
      return "西南风"
    }
    if (angle <= 202.5 && angle > 157.5) {
      return "南风"
    }
    if (angle <= 157.5 && angle > 112.5) {
      return "东南风"
    }
    if (angle <= 112.5 && angle > 67.5) {
      return "东风"
    }
    if (angle <= 67.5 && angle > 22.5) {
      return "东北风"
    }
  }
  WindyUtil.prototype.getWindyAngle = function(u, v) {
    var fx = 0
    if (u > 0 & v > 0) {
      fx = 270 - Math.atan(v / u) * 180 / Math.PI
    } else if (u < 0 & v > 0) {
      fx = 90 - Math.atan(v / u) * 180 / Math.PI
    } else if (u < 0 & v < 0) {
      fx = 90 - Math.atan(v / u) * 180 / Math.PI
    } else if (u > 0 & v < 0) {
      fx = 270 - Math.atan(v / u) * 180 / Math.PI
    } else if (u == 0 & v > 0) {
      fx = 180
    } else if (u == 0 & v < 0) {
      fx = 0
    } else if (u > 0 & v == 0) {
      fx = 270
    } else if (u < 0 & v == 0) {
      fx = 90
    } else if (u == 0 & v == 0) {
      fx = 999.9
    }
    return fx
  }
  WindyUtil.prototype.getWindyLevel = function(v) {
    if (v < 0.3) {
      return 0
    }
    if (v >= 0.3 && v < 1.6) {
      return 1
    }
    if (v >= 1.6 && v < 3.4) {
      return 2
    }
    if (v >= 3.4 && v < 5.5) {
      return 3
    }
    if (v >= 5.5 && v < 8.0) {
      return 4
    }
    if (v >= 8.0 && v < 10.8) {
      return 5
    }
    if (v >= 10.8 && v < 13.9) {
      return 6
    }
    if (v >= 13.9 && v < 17.2) {
      return 7
    }
    if (v >= 17.2 && v < 20.8) {
      return 8
    }
    if (v >= 20.8 && v < 24.5) {
      return 9
    }
    if (v >= 24.5 && v < 28.5) {
      return 10
    }
    if (v >= 28.5 && v < 32.7) {
      return 11
    }
    if (v >= 32.7 && v < 37.0) {
      return 12
    }
    if (v >= 37.0 && v < 41.5) {
      return 13
    }
    if (v >= 41.5 && v < 46.2) {
      return 14
    }
    if (v >= 46.2 && v < 51.0) {
      return 15
    }
    if (v >= 51.0 && v < 56.1) {
      return 16
    }
    if (v >= 56.1 && v < 61.2) {
      return 17
    }
    if (v >= 61.2) {
      return 18
    }
  }
  return WindyUtil
}())
export {WindyUtil}

二、vue中引入调用

import {WindyUtil} from "./gisUtils/WindyUtil.js";

let windyUtil = new WindyUtil(this.smap)
windyUtil.addWindyLayer(windData)

var details = windyUtil.getWindyDetail(coordinate);
console.log(details);
alert(' 风向:' + details.direction + '\n 风级:' + details.level + '\n 风速:' + details.speed)

三、展示效果

 如果对您有帮忙，非常感谢您支持一下创造者的付出！

 感谢支持技术分享， 请扫码点赞支持：

技术合作交流qq:2401315930

 技术合作交流qq:2401315930