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

// 初始化地图
let maps: map
onMounted(() => {
  maps = map.initGlobals('map')
  addCurrent()

})


const addCurrent = async () => {
  const data = await fetch('/current.json').then((res) => res.json())
  if (maps.map) {
    const windLayer = new WindLayer('current', 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: () => {
          return 1;
        },
        frameRate: 80,
        maxAge: 100,
        globalAlpha: 0.95,
        paths: () => {
          return maps.map ? 3000 * Math.pow(1, maps.map.getZoom()) : 0
        }
      }
    })
    maps.map.addLayer(windLayer)
  }
}
  
</script>
<style>
#map {
  width: 100%;
  height: 100%;
}

</style>