openlayers风场

通过ol-wind插件实现

一、创建图层并添加至地图

import { WindLayer } from 'ol-wind'; 
import gfs from '/public/gfs.json' //风场json数据
const addWindLayer = () => {   
    let windLayer = new WindLayer(gfs, {     
    //foceRender: false, //添加该字段后移动端出现bug     
    windOptions: {       
        globalAlpha: 0.9,  // 粒子透明度       
        maxAge: 10,  // 存活最大帧数       
        velocityScale: 1/100,  // 粒子速度       
        frameRate: 20,  // 每50贞绘制一次       
        paths: 5000,  // 粒子数量       
        colorScale: () => {        
            return "#00b3ef"       
        },       
        width: 3,     
        }, 
        zIndex: 3   
    })   
    map.addLayer(windLayer) 
}

二、windOptions参数说明

三、实现效果

项目地址：github.com/DLFouge/vue…

欢迎指正与star