[VUE] 在Vue3中使用Amap, 实现track review

NewYorkBird
630 阅读2分钟

目录

  1. 前端map页面
  2. 封装的api请求
  3. 后端控制器

待解决问题

  1. 无法拖动进度条
  2. 不能设置速度, 移动速度也有点异常
  3. 不能在点上显示信息, 比如显示当前时间等

1.1 前端vue页面 (v2.0版本)

  • v2版本接口文档
https://lbs.amap.com/demo/javascript-api-v2/example/marker/replaying-historical-running-data

v1.4.15版本接口文档
https://lbs.amap.com/demo/javascript-api/example/marker/replaying-historical-running-data

<template>
    <div class="map-container">
      <div id="map" style="height: 400px; width: 50%; margin-left: 200px;"></div>
      <div class="input-card" style="margin-left: 200px;margin-top: 15px;">
        <h4>轨迹回放控制</h4>
        <div>
          <el-button @click="startAnimation">开始动画</el-button>
          <el-button @click="pauseAnimation">暂停动画</el-button>
        </div>
        <div>
          <el-button @click="resumeAnimation">继续动画</el-button>
          <el-button @click="stopAnimation">停止动画</el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import AMapLoader from '@amap/amap-jsapi-loader'
  import { getMapData } from '/@/api/controllerUrls'
  
  let marker = null // Declare marker variable
  const map = ref(null)
  let polyline = null
  let passedPolyline = null
  const lineArr = [] // Initialize lineArr
  
  const fetchData = async () => {
    // const simulatedData = [
    //   [116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]
    // ]
    const listArr = [];
    getMapData().then(res => {
        lineArr.splice(0, listArr.length, ...res.data)
        initMap()
    })
    // lineArr.splice(0, lineArr.length, ...simulatedData)
  }
  
  const initMap = async () => {
    AMapLoader.load({
      key: '----',
      version: '2.0',
      // ... (other configurations)
    }).then((AMap) => {
      AMap.plugin('AMap.MoveAnimation', function () {})
  
      map.value = new AMap.Map('map', {
        viewMode: '3D',
        zoom: 15,
        resizeEnable: true,
        mapStyle: 'amap://styles/normal',
        center: [116.478935, 39.997761],
        showMarker: true
      })
  
      marker = new AMap.Marker({
        position: [116.478935, 39.997761],
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png',
        draggable: true
      })
      map.value.add(marker)
  
      polyline = new AMap.Polyline({
            map: map.value,
            path: lineArr,
            showDir:true,
            strokeColor: "#28F",  //线颜色
            // strokeOpacity: 1,     //线透明度
            strokeWeight: 6,      //线宽
            strokeStyle: "solid"  //线样式
      })
  
      passedPolyline = new AMap.Polyline({
        map: map.value,
        strokeColor: '#AF5',  //线颜色
        strokeWeight: 6 //线宽
      })
  
      marker.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath)
      })
  
      map.value.setFitView()
    }).catch((e) => {
      console.error(e)
    })
  }
  
  const startAnimation = () => {
    if (marker) {
      marker.moveAlong(lineArr, {
        duration: 500,
        autoRotation: true,
      })
    }
  }
  
  const pauseAnimation = () => {
    if (marker) {
      marker.pauseMove()
    }
  }
  
  const resumeAnimation = () => {
    if (marker) {
      marker.resumeMove()
    }
  }
  
  const stopAnimation = () => {
    if (marker) {
      marker.stopMove()
    }
  }
  
  onMounted(() => {
    fetchData()
  })
  </script>
  
  <style>
  .map-container {
    margin: 10px 0;
  }
  
  #map {
    height: 400px;
    width: 100%;
  }
  </style>

1.2 前端map页面 (v1.4.15版本)

<template>
    <div class="map-container">
        <div id="map" style="height: 400px; width: 50%; margin-left: 200px;"></div>
        <div class="input-card" style="margin-left: 200px;margin-top: 15px;">
            <h4>轨迹回放控制</h4>
            <div>
                <el-button @click="startAnimation">开始动画</el-button>
                <el-button @click="pauseAnimation">暂停动画</el-button>
            </div>
            <div>
                <el-button @click="resumeAnimation">继续动画</el-button>
                <el-button @click="stopAnimation">停止动画</el-button>
            </div>
        </div>
    </div>
</template>

<!-- 这里并没有使用 lang='ts' -->
<script setup>
    import { ref, onMounted } from 'vue'
    import AMapLoader from '@amap/amap-jsapi-loader'
    import { getMapData } from '/@/api/controllerUrls'

    const map = ref(null)
    let marker = null
    let polyline = null
    let passedPolyline = null
    const lineArr = [] // Initialize lineArr

    getMapData().then(res => {
        if (res && res.code === 1 && res.data) {
            lineArr.splice(0, lineArr.length, ...res.data) // Replace lineArr content with fetched data
            initMap()
        }
    })

    const initMap = async () => {

        AMapLoader.load({
                key: '--',
                version: '1.4.15', //注意版本
                plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView',
                    'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor',
                    'AMap.MarkerClusterer', 'AMap.MoveAnimation'
                ],
            }).then((AMap) => {

                AMap.plugin('AMap.MoveAnimation', function () {});

                map.value = new AMap.Map('map', {
                    viewMode: '3D',
                    zoom: 15,
                    resizeEnable: true,
                    mapStyle: 'amap://styles/normal',
                    center: [116.478935, 39.997761],
                    showMarker: true
                })

                // Initialize marker
                marker = new AMap.Marker({
                    position: [116.478935, 39.997761],
                    icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png',
                    draggable: true
                })
                map.value.add(marker)

                // Draw polyline
                polyline = new AMap.Polyline({
                    map: map.value,
                    path: lineArr,
                    showDir: true,
                    strokeColor: '#28F',
                    strokeWeight: 6
                })

                passedPolyline = new AMap.Polyline({
                    map: map.value,
                    strokeColor: '#AF5',
                    strokeWeight: 6
                })

                marker.on('moving', function (e) {
                    passedPolyline.setPath(e.passedPath)
                })

                map.value.setFitView()
            })
            .catch((e) => {
                console.log(e)
            })
    }

    // 开始动画
    const startAnimation = () => {
        if (marker) {
            marker.moveAlong(lineArr, 200)
        }
    }

    // 暂停动画
    const pauseAnimation = () => {
        if (marker) {
            marker.pauseMove()
        }
    }

    //   继续动画
    const resumeAnimation = () => {
        if (marker) {
            marker.resumeMove()
        }
    }

    // 停止动画
    const stopAnimation = () => {
        if (marker) {
            marker.stopMove()
        }
    }

    onMounted(() => {
        window._AMapSecurityConfig = {
            securityJsCode: '--'
        }
        // initMap()
    })

</script>

<style>
    .map-container {
        margin: 10px 0;
    }

    #map {
        height: 400px;
        width: 100%;
    }

</style>

2.封装api请求 web\src\api\controllerUrls.ts

// 获取地图数据
export function getMapData() {
return createAxios({
    url: '/admin/dashboard/getMapData',
    method: 'get',
})
}

3.后端控制器


    public function getMapData()
    {
        $list = [
            [116.478935, 39.997761],
            [116.478939, 39.997825],
            [116.478912, 39.998549],
            [116.478912, 39.998549],
            [116.478998, 39.998555],
            [116.478998, 39.998555],
            [116.479282, 39.99856],
            [116.479658, 39.998528],
            [116.480151, 39.998453],
            [116.480784, 39.998302],
            [116.480784, 39.998302],
            [116.481149, 39.998184],
            [116.481573, 39.997997],
            [116.481863, 39.997846],
            [116.482072, 39.997718],
            [116.482362, 39.997718],
            [116.483633, 39.998935],
            [116.48367, 39.998968],
            [116.484648, 39.999861]
        ];
        $this->success('', $list);
    }
}
avatar
文章
阅读
粉丝