基于Cesium 风力图实现

import CanvasWindy from '@/cesiumsdk/cesiumWindy'
let globalExtent = []
 creatWindy() {
      axios.get('data.json').then(({ data }) => {
        const resizeCanvas = () => {
          windycanvas.width = window.innerWidth
          windycanvas.height = window.innerHeight
          if (windy) {
            windy._resize(windycanvas.width, windycanvas.height)
          }
        }

        const params = {
          viewer: viewer,
          canvasWidth: window.innerWidth,
          canvasHeight: window.innerHeight,
          speedRate: 5000,
          particlesNumber: 10000,
          maxAge: 120,
          frameRate: 10,
          color: '#ffffff',
          lineWidth: 1
        }

        handler.setInputAction(() => {
          this.getCesiumExtent()
          windy.extent = globalExtent
          windy.redraw()
        }, Cesium.ScreenSpaceEventType.WHEEL)

        let windycanvas = document.createElement('canvas')
        windycanvas.setAttribute('id', 'windycanvas')
        windycanvas.style.position = 'fixed'
        windycanvas.style.pointerEvents = 'none'
        windycanvas.style.zIndex = 10
        windycanvas.style.top = 0
        document.body.appendChild(windycanvas)
        resizeCanvas()
        window.onresize = resizeCanvas

        params.canvas = windycanvas
        windy = new CanvasWindy(data, params)
        //windy.removeLines()
      })
    },
    getCesiumExtent() {
      var canvaswidth = window.innerWidth,
        canvasheight = window.innerHeight - 50

      var left_top_pt = new Cesium.Cartesian2(0, 0)
      var left_bottom_pt = new Cesium.Cartesian2(0, canvasheight)
      var right_top_pt = new Cesium.Cartesian2(canvaswidth, 0)
      var right_bottom_pt = new Cesium.Cartesian2(canvaswidth, canvasheight)

      var pick1 = viewer.scene.globe.pick(viewer.camera.getPickRay(left_top_pt), viewer.scene)
      var pick2 = viewer.scene.globe.pick(viewer.camera.getPickRay(left_bottom_pt), viewer.scene)
      var pick3 = viewer.scene.globe.pick(viewer.camera.getPickRay(right_top_pt), viewer.scene)
      var pick4 = viewer.scene.globe.pick(viewer.camera.getPickRay(right_bottom_pt), viewer.scene)
      if (pick1 && pick2 && pick3 && pick4) {
        //将三维坐标转成地理坐标---只需计算左下右上的坐标即可
        var geoPt1 = viewer.scene.globe.ellipsoid.cartesianToCartographic(pick2)
        var geoPt2 = viewer.scene.globe.ellipsoid.cartesianToCartographic(pick3)
        //地理坐标转换为经纬度坐标
        var point1 = [(geoPt1.longitude / Math.PI) * 180, (geoPt1.latitude / Math.PI) * 180]
        var point2 = [(geoPt2.longitude / Math.PI) * 180, (geoPt2.latitude / Math.PI) * 180]
        // console.log(point1,point2);
        //此时说明extent需要分为东西半球
        if (point1[0] > point2[0]) {
          globalExtent = [point1[0], 180, point1[1], point2[1], -180, point2[0], point1[1], point2[1]]
        } else {
          globalExtent = [point1[0], point2[0], point1[1], point2[1]]
        }
      } else {
        globalExtent = []
      }
      return globalExtent
    },

体验地址：47.94.102.38:1463/dist/#/