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

要在Vue中使用高德地图的风场图层（WindLayer），你需要先安装高德地图的JavaScript API，然后在Vue组件中初始化地图，并添加风场图层。以下是一个简单的例子：

1. 安装高德地图JavaScript API：

npm install @amap/amap-jsapi-loader

2. 在Vue组件中使用：

<template>
  <div id="map" style="width: 500px; height: 400px;"></div>
</template>
 
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
 
export default {
  name: 'WindMap',
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '你的高德地图API密钥',
        version: '2.0',
        plugins: ['AMap.WindLayer'],
      }).then((AMap) => {
        const map = new AMap.Map('map', {
          zoom: 7,
          center: [116.397428, 39.90923], // 初始化地图中心点
        });
 
        const windLayer = new AMap.WindLayer({
          zIndex: 10,
        });
        windLayer.setMap(map);
      }).catch((e) => {
        console.log(e);
      });
    },
  },
};
</script>

确保替换你的高德地图API密钥为你的高德地图API Key。

这段代码在Vue组件的mounted钩子中初始化了高德地图，并创建了WindLayer图层，然后将图层添加到地图上。你可以根据需要调整WindLayer的配置选项。