<template>
  <div class="map-container">
    <div id="map" class="container"></div>
  </div>
</template>

<script>
  import axios from 'axios'
  import * as mapv from 'mapv'
  export default {
    name: 'Map',
    components: {},
    data() {
      return {}
    },
    created() {},
    mounted() {
      this.$nextTick(() => {
        const map = this.$baseMap()
        axios
          .get(
            'https://cdn.jsdelivr.net/npm/mapv@2.0.12/examples/data/od-xierqi.txt'
          )
          .then((rs) => {
            let data = []
            let timeData = []

            rs = rs.data.split('\n')
            let maxLength = 0
            for (let i = 0; i < rs.length; i++) {
              let item = rs[i].split(',')
              let coordinates = []
              if (item.length > maxLength) {
                maxLength = item.length
              }
              for (let j = 0; j < item.length; j += 2) {
                let x = (Number(item[j]) / 20037508.34) * 180
                let y = (Number(item[j + 1]) / 20037508.34) * 180
                y =
                  (180 / Math.PI) *
                  (2 * Math.atan(Math.exp((y * Math.PI) / 180)) - Math.PI / 2)
                if (x == 0 || y == NaN) {
                  continue
                }
                coordinates.push([x, y])
                timeData.push({
                  geometry: {
                    type: 'Point',
                    coordinates: [x, y],
                  },
                  count: 1,
                  time: j,
                })
              }
              data.push({
                geometry: {
                  type: 'LineString',
                  coordinates: coordinates,
                },
              })
            }

            let dataSet = new mapv.DataSet(data)

            let options = {
              strokeStyle: 'rgba(53,57,255,0.5)',
              // globalCompositeOperation: 'lighter',
              shadowColor: 'rgba(53,57,255,0.2)',
              shadowBlur: 3,
              lineWidth: 3.0,
              draw: 'simple',
            }

            let mapvLayer = new mapv.MaptalksLayer(
              'mapv1',
              dataSet,
              options
            ).addTo(map)

            let dataSet2 = new mapv.DataSet(timeData)

            let options2 = {
              fillStyle: 'rgba(255, 250, 250, 0.2)',
              globalCompositeOperation: 'lighter',
              size: 1.5,
              animation: {
                stepsRange: {
                  start: 0,
                  end: 100,
                },
                trails: 3,
                duration: 5,
              },
              draw: 'simple',
            }

            let mapvLayer2 = new mapv.MaptalksLayer(
              'mapv2',
              dataSet2,
              options2
            ).addTo(map)
          })
      })
    },
    methods: {},
  }
</script>
<style lang="scss" scoped>
  .map-container {
    .container {
      width: 100%;
      height: calc(100vh - 214px);
    }
  }
</style>