画台风图参考

描述

界面是右侧切换台风、气压、毫巴、涌、浪等气象，

vue文件

<!-- 风 -->
<template>
  <div class="map-wind">
    <div class="typhoonDiv">
      台风等级
      <div class="bottom">
        <ul>
          <li v-for="(item,key) in typhoonLegendLeft" :key="key">
            <div :class="item.number" class="common"></div>
            {
  { item.name }}
          </li>
        </ul>
        <ul>
          <li v-for="(item,key) in typhoonLegendRight" :key="key">
            <div :class="item.number" class="common"></div>
            {
  { item.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from "vuex";
  import {typhoonData, typhoonLegendLeft, typhoonLegendRight} from "@/views/overlays/layers/wind-layer";
  import { reverse } from "lodash"

  export default {
    name: "Wind",
    computed: {
      ...mapState({
        overallMap: state => state.map.overallMap,
        moveStatus: state => state.map.moveStatus,
        systemDate: state => state.common.systemDate,
      }),
      computedTyphoonPath(){
         const {arrLeafLetPath} = typhoonData()
         return arrLeafLetPath
      },
      computedBeforePoint(){
        const {arrLeafLetPointBefore} = typhoonData()
        return arrLeafLetPointBefore
      },
      computedAfterPoint(){
        const {arrLeafLetPointAfter} = typhoonData()
        return arrLeafLetPointAfter
      },
      computedBeforeBeforePoint() {
        const {arrLeafLetPointBeforeBefore} = typhoonData()
        return arrLeafLetPointBeforeBefore
      }
    },
    watch: {
      systemDate: {
        handler() {
          if (this.windFigureLayer.length !== 0) {
            for (let key in this.windFigureLayer) {
              this.windFigureLayer[key].remove()
            }
          }
          this.windShow()
          this.polygon7.remove()
          this.polygon10.remove()
          this.polygon12.remove()
          this.typhoonMarker.remove()

          for (let key in this.markers) {
            this.markers[key].remove()
          }
          for (let key in this.markerss) {
            this.markerss[key].remove()
          }
          for (let key in this.markersss) {
            this.markersss[key].remove()
          }
          this.showTyphoon()
        }
      }
    },
    data() {
      return {
        typhoonList:[],
        latLngLayer: null,
        windFigure: [],
        windFigureLayer: [],
        polygon7: null,
        polygon10: null,
        polygon12: null,
        typhoonMarker: null,
        typhoonMark: null,
        typhoonAllLocation: [],

        markers: [],
        markerss: [],
        markersss: [],
        typhoonLegendLeft,
        typhoonLegendRight
      }
    },
    mounted() {
      this.overallMap.flyTo([22, 126], 6.5)
      this.$store.commit('setMapBounds', this.overallMap.getBounds())
      this.windShow()
      // this.showZoomWindMaker()
      this.showLatLonLayer()
      this.showTyphoonLayer()
      this.showTyphoon()

      this.drawPython()
    },
    methods: {
      drawPython(){
        for (let key in this.computedTyphoonPath){
          this.computedTyphoonPath[key].addTo(this.overallMap)
        }
        for (let i= 0 ; i < this.computedBeforePoint.length -1;i+=3){
          this.computedBeforePoint[i].addTo(this.overallMap)
        }
        for (let key in this.computedAfterPoint){
          this.computedAfterPoint[key].addTo(this.overallMap)
        }
        for (let k = 0; k < this.computedBeforeBeforePoint.length - 1; k += 6) {
          this.computedBeforeBeforePoint[k].addTo(this.overallMap)
        }
        this.$once('hook:beforeDestroy', () => {
          for (let key in this.computedTyphoonPath){
            this.computedTyphoonPath[key].remove()
          }
          for (let i= 0 ; i < this.computedBeforePoint.length -1;i+=3){
            this.computedBeforePoint[i].remove()
          }
          for (let key in this.computedAfterPoint){
            this.computedAfterPoint[key].remove()
          }
          for (let k = 0; k < this.computedBeforeBeforePoint.length - 1; k += 6) {
            this.computedBeforeBeforePoint[k].remove()
          }
        })
      },
      choosePower(currentDirection, key, val, min, max) {
        let L = this.L
        this.windFigureLayer.push(
          L.marker(currentDirection[key][val].coordinates.reverse(), {
            icon: L.icon({
              iconUrl: `wind/m_${min}_${max}.png`,
              iconSize: [10, 30],
              // iconAnchor: [12, 41],
              // popupAnchor: [1, -34],
              // shadowSize: [41, 41]
            }),
            rotationAngle: currentDirection[key][val].angle
          }).addTo(this.overallMap)
        )

        this.$once('hook:beforeDestroy', () => {
          for (let key in this.windFigureLayer) {
            this.windFigureLayer[key].remove()
          }
        })
      },
      windShow() {

        let date = Number(this.systemDate)
        try {
          let windJson = require(`../../../../public/data/Wind/${date}/wind`)
          let currentDirection = windJson.currentDirection
          for (let key in currentDirection[0]) {
            for (let val in currentDirection[key]) {
              if (currentDirection[key][val].power > 0 && currentDirection[key][val].power <= 1) {
                this.choosePower(currentDirection, key, val, 0, 1)
              }else if (currentDirection[key][val].power > 1 && currentDirection[key][val].power <= 2) {
                this.choosePower(currentDirection, key, val, 1, 2)
              }else if (currentDirection[key][val].power > 2 && currentDirection[key][val].power <= 4) {
                this.choosePower(currentDirection, key, val, 2, 4)
              }else if (currentDirection[key][val].power > 4 && currentDirection[key][val].power < 6) {
                this.choosePower(currentDirection, key, val, 4, 6)
              }else if (currentDirection[key][val].power > 6 && currentDirection[key][val].power < 8) {
                this.choosePower(currentDirection, key, val, 6, 8)
              }else if (currentDirection[key][val].power > 8 && currentDirection[key][val].power < 10) {
                this.choosePower(currentDirection, key, val, 8, 10)
              }else if (cur