vue + 高德地图 + wind-layer实现风场

vue + 高德地图 + wind-layer实现风场

效果图：

第一步：引入 wind-layer插件

或者
npm install ol-wind
npm install amap-wind

html:

<template>
	<div id="Map" ref="map"></div>
</template>

js

下面展示一些 代码。

// An highlighted block
// 初始化地图
    initMap() {
      let vm = this;
      vm.map = null;
      vm.map = new AMap.Map('Map', {
        viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
        zoom: 5, //初始化地图层级
        zooms:[5,7],
        center: [108.945951, 34.465262], //初始化地图中心点
        layers: [
          // 卫星
          new AMap.TileLayer.Satellite(),
          // 路网
          new AMap.TileLayer.RoadNet()
        ],
      });
      
    },
    // 风场
    windLayerInfo() {
    //gfs数据：链接https://a.amap.com/jsapi_demos/static/resource/heatmapData.js
      this.windLayer = new AMapWind.WindLayer(gfs, {
        windOptions: {
          globalAlpha: 0.9, // 粒子透明度
          velocityScale: 1 / 50,//粒子速度
          paths: 800,//粒子数量
          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)"
          ],//粒子颜色
          lineWidth: 2,
          generateParticleOption: false
        },
        zIndex: 20,
      });
      this.windLayer.appendTo(this.map);
    },