openlayers 6+版本绘制风场粒子效果

杂话：虽然还是解决了问题了，写文章写博客还是不要做复读机了，给我恶心坏了。
前言：需求不高，就是要做一个风场的粒子效果。大概长这样，线宽、颜色、快慢、数量等 都可以通过配置修改

• 需知

首先数据是要准确的。长这样。通常这种数据叫做gfs 。我会在本文底部提供一份测试数据。

header 里面就是一系列的描述信息，

接着 安装ol-wind 包。

npm install ol-wind --save OR
cnpm install ol-wind --save

npm包的示例如下


上图取自https://blog.csdn.net/u010065726/article/details/106338194/ 作者：熠熠仔

实际源码还多了两个可配置属性， 这个不谈，有兴趣可以自己去查看源码。

使用

使用方式其实没什么好说的， 生成WindLayer 图层，接着把图层添加到map实例上即可。
以下为 示例代码

// 地图初始化
    mapInit: function () {
      const map = new Map({
        layers: [
          new TileLayer({
            source: new OSM(),
          }),
        ],
        target: "map",
        view: new View({
          center: [0, 0],
          zoom: 2,
        }),
      });

      //   洋流 配置
      const windLayer = new WindLayer(ncdata, {
        forceRender: false,
        windOptions: {
          // colorScale: scale,
          velocityScale: 1 / 15,
          paths: 5000,
          maxAge: 80,
          // eslint-disable-next-line no-unused-vars
          colorScale: () => {
            // console.log(m);
            return "#ff473c";
          },
          lineWidth: 2,
          // colorScale: scale,
          generateParticleOption: false,
        },
        // map: map,
        // projection: 'EPSG:4326'
      });

      console.log(map, windLayer);

      map.addLayer(windLayer);
      this.map = map;

    },

包的相关引入

import { OSM } from "ol/source";
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import { WindLayer } from "ol-wind";
import ncdata from "./gfs.json";

附件 测试json文件

链接: https://pan.baidu.com/s/13WZ8M7SXM1jrKBQj_cEeVw 提取码: u9y2 复制这段内容后打开百度网盘手机App，操作更方便哦