<template>
  <div id="map"></div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import { WindLayer } from 'amap-wind'

// 初始化地图
let maps: AMap.map
onMounted(() => {
  init()
  addWind()
})


const init = () => {
  maps = new AMap.Map('map', {
    resizeEnable: true, //是否监控地图容器尺寸变化
    zoom: 2, //初始化地图层级
    center: [3.397428, 30.90923], //初始化地图中心点
    mapStyle: "amap://styles/dark"
  })
}

const addWind = async () => {
  const data = await fetch('/data.json').then((res) => res.json())
  
  if (maps) {
    const windLayer = new WindLayer(data, {
      windOptions: {
        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)"
        ],
        velocityScale: 1 / 50,
        frameRate: 40,
        maxAge: 60,
        // opacity: 0.9,
        paths: 2500
      },
      zIndex: 20
    })
    windLayer.appendTo(maps)
  }
}
</script>
<style>
#map {
  width: 100%;
  height: 100%;
}

</style>