vue3 geoscene 轨迹回放

<template>
  <div class="trackMap-container">
    <div id="mapDiv">
      <div class="box">
        <button @click="start">开始</button>
        <button @click="pause">暂停</button>
<!--        <button @click="goOn">继续</button>-->
        <button @click="back">返回</button>
      </div>
    </div>
  </div>
</template>
<script setup>
import {reactive, ref} from "vue";
import {onMounted} from "vue";
import Map from "@geoscene/core/Map.js";
import MapView from "@geoscene/core/views/MapView.js";
import GraphicsLayer from "@geoscene/core/layers/GraphicsLayer.js";
import Graphic from "@geoscene/core/Graphic.js";
import boat from '@/assets/nxt/fish/boat.jpg'

const props = defineProps({
  LocationList: {
    type: Array
  }
});
let viewMap
let map
let graphicsLayer
let moveLayer
let startingPoint = reactive({})
let trackPlayBackOption = reactive({
  interval: null, // 轨迹运动定时器
  count: 0, // 计数器
  path: props.LocationList, // 路径
  speed: 1, // 速度
})



function initMap() {
  map = new Map({
    basemap: "tianditu-vector",
  });
  viewMap = new MapView({
    map: map,
    center: props.LocationList[0], // 经度，纬度
    zoom: 8, // 缩放级别
    container: "mapDiv",
  });
  viewMap.ui.components = [];
  graphicsLayer = new GraphicsLayer();
  map.add(graphicsLayer);

  viewMap.when(
      () => {
        // 地图加载完成
        setTimeout(() => {
          viewMap.goTo({
            // 视角切换动画
            center: props.LocationList[0], //终点坐标
            heading: 360, // 面向正南
            z: 10000,
            tilt: 40, //视图角度cos
            zoom: 13, //放大等级
          })
        }, 1000)
      },
      function (error) {
        console.error(error)
        alert('加载失败,稍后重新加载')
        window.reload()
      }
  )
  let polyline = {
    type: 'polyline', // autocasts as new Polyline()
    paths: props.LocationList,
  }
  let lineSymbol = {
    type: 'simple-line', // autocasts as SimpleLineSymbol()
    color: [226, 119, 40],
    width: 2,
  }
  let polylineGraphic = new Graphic({
    geometry: polyline,
    symbol: lineSymbol,
  })
  viewMap.graphics.add(polylineGraphic)

  let modelCar = initModelCar()
  moveLayer = new GraphicsLayer({
    id: 'moveLayer',
  })
  map.add(moveLayer)
  moveLayer.add(
      new Graphic({
        geometry: startingPoint,
        symbol: modelCar,
      })
  )


}



function start() {
  clearInterval(trackPlayBackOption.interval)
  trackPlayBackOption.interval = null

  let data = trackPlayBackOption.path
  trackPlayBackOption.interval = setInterval(() => {
    trackPlayBackOption.count++
    if (trackPlayBackOption.count < data.length) {
      moveLayer.removeAll()
      moveLayer.add(
          new Graphic({
            geometry: {
              type: 'point',
              longitude: data[trackPlayBackOption.count][0],
              latitude: data[trackPlayBackOption.count][1],
            },
            symbol: {
              type: 'picture-marker',
              url: boat,
              width: 36, //模型宽度ssss
              height: 36, //模型高度
            },
          })
      )
    } else {
      clearInterval(trackPlayBackOption.interval)
      trackPlayBackOption.interval = null
    }
    viewMap.goTo({
      center: data[trackPlayBackOption.count]
    })
    viewMap.zoom = 8
  }, trackPlayBackOption.speed * 1000)

}

function pause() {
  clearInterval(trackPlayBackOption.interval)
  trackPlayBackOption.interval = null
}

function goOn() {
  clearInterval(trackPlayBackOption.interval)
  trackPlayBackOption.interval = null
}

function back() {
  clearInterval(trackPlayBackOption.interval)
  trackPlayBackOption.interval = null
  moveLayer.removeAll()
  trackPlayBackOption.count = 0
  let data = trackPlayBackOption.path
  moveLayer.add(
      new Graphic({
        geometry: {
          type: 'point',
          longitude: data[trackPlayBackOption.count][0],
          latitude: data[trackPlayBackOption.count][1],
        },
        symbol: {
          type: 'picture-marker',
          url: boat,
          width: 36, //模型宽度ssss
          height: 36, //模型高度
        },
      })
  )
}

// 初始化车辆
function initModelCar() {
  // 设置起点
  startingPoint = {
    type: 'point',
    longitude: props.LocationList[0][0],
    latitude: props.LocationList[0][1],
  }
  let modelNewCar = {
    type: 'picture-marker',
    url: boat,
    width: 36, //模型宽度ssss
    height: 36, //模型高度
  }
  return modelNewCar
}

// 创建车辆
function setModelCar(x1, y1, x2, y2) {
  let modelNewCar = {
    type: 'picture-marker',
    url: boat,
    width: 36, //模型宽度ssss
    height: 36, //模型高度
  }
  return modelNewCar
}

onMounted(() => {
  initMap()
});

</script>


<style scoped lang="scss">
.trackMap-container {
  width: 100%;

  #mapDiv {
    width: 100%;
    height: 70vh;
    position: relative;

    .box {
      position: absolute;
      top: 10px;
      right: 20px;
    }
  }

}

:deep(.geoscene-view-surface--touch-none::after) {
  outline: none !important;
}
</style>