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

目录

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

1.前端map页面

<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);
    }
}