Vue+OpenLayer為地圖添加風(fēng)場效果

更新時間：2022年04月24日 14:39:49 作者：秦浩鋮

這篇文章主要為大家展示了一個demo，即利用Vue和OpenLayer在地圖上面添加風(fēng)場效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下

一個簡單的小demo，就是在一個openlayers地圖上面添加風(fēng)場效果。

話不多說，直接進(jìn)入正題。

首先我們需要安裝一個插件。

插件地址

npm install ol-windy --save

然后我們需要一個數(shù)據(jù)來繪制風(fēng)場，我在文件最后上傳一下文件。

接下來很簡單，就是下面的代碼。

<template>
  <div class="home">
    <div id="map" ref="map"></div>
  </div>
</template>

<script>
  import 'ol/ol.css';
  import Draw from 'ol/interaction/Draw';
  import Map from 'ol/Map';
  import Overlay from 'ol/Overlay';
  import View from 'ol/View';
  import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
  import { LineString, Polygon } from 'ol/geom';
  import { OSM, Vector as VectorSource } from 'ol/source';
  import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
  import { getArea, getLength } from 'ol/sphere';
  import { unByKey } from 'ol/Observable';
  import { WindLayer } from 'ol-wind'
  import gfs from './gfs.json'

  var map = null

  export default {
    name: "Home",
    data() {
      return {
      }
    },
    mounted() {
      this.initMap()
    },
    methods: {
      // 初始化地圖
      initMap() {
        map = new Map({
          layers: [
            new TileLayer({
              source: new OSM(),
            }),
          ],
          target: 'map',
          view: new View({
            center: [120, 35],
            zoom: 5,
            maxZoom: 18,
            projection: 'EPSG:4326',
          }),
        });

        this.addWindyLayer()
      },

      // 添加風(fēng)流粒子
      addWindyLayer() {
        const windLayer = new WindLayer(gfs, {
          foceRender: false,
          windOptions: {
            globalAlpha: 0.9,  // 粒子透明度
            maxAge: 10,  // 存活最大幀數(shù)
            velocityScale: 1/100,  // 粒子速度
            frameRate: 20,  // 每50貞繪制一次
            paths: 5000,  // 粒子數(shù)量
            colorScale: () => {
              return "#00b3ef"
            },
            width: 3,
          }
        })
        map.addLayer(windLayer)
      },
    },
  };

</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
    background-color: aliceblue;
    position: relative;
  }

  #map {
    height: 100%;
    width: 100%;
  }
</style>

其中 gfs 文件就是風(fēng)場數(shù)據(jù)。

gfs文件下載【點(diǎn)這里】

然后看效果~