|
|
@@ -0,0 +1,118 @@
|
|
|
+<script setup lang="ts">
|
|
|
+let bmap: any = null
|
|
|
+let lushu: any = null
|
|
|
+
|
|
|
+const data = [
|
|
|
+ {
|
|
|
+ licensePlate: '',
|
|
|
+ speed: 47,
|
|
|
+ sendData: 1718434061000,
|
|
|
+ lat: 36.483671256780845,
|
|
|
+ lon: 112.35835768559537
|
|
|
+ },
|
|
|
+ {
|
|
|
+ licensePlate: '',
|
|
|
+ speed: 47,
|
|
|
+ sendData: 1718434061000,
|
|
|
+ lat: 36.48392562378963,
|
|
|
+ lon: 112.35380873633531
|
|
|
+ },
|
|
|
+ {
|
|
|
+ licensePlate: '',
|
|
|
+ speed: 47,
|
|
|
+ sendData: 1718434061000,
|
|
|
+ lat: 36.484445885520906,
|
|
|
+ lon: 112.34942980034347
|
|
|
+ },
|
|
|
+ {
|
|
|
+ licensePlate: '',
|
|
|
+ speed: 47,
|
|
|
+ sendData: 1718434061000,
|
|
|
+ lat: 36.484613829160985,
|
|
|
+ lon: 112.34826673209832
|
|
|
+ },
|
|
|
+ {
|
|
|
+ licensePlate: '',
|
|
|
+ speed: 47,
|
|
|
+ sendData: 1718434061000,
|
|
|
+ lat: 36.48548191169621,
|
|
|
+ lon: 112.34776796383788
|
|
|
+ },
|
|
|
+ {
|
|
|
+ licensePlate: '',
|
|
|
+ speed: 47,
|
|
|
+ sendData: 1718434061000,
|
|
|
+ lat: 36.48727931765302,
|
|
|
+ lon: 112.34804304633398
|
|
|
+ }
|
|
|
+]
|
|
|
+
|
|
|
+const points: any = []
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ initMap()
|
|
|
+})
|
|
|
+
|
|
|
+const initMap = () => {
|
|
|
+ const center = new (window as any).BMap.Point(112.35835768559537, 36.483671256780845)
|
|
|
+ bmap = new (window as any).BMap.Map('map') // 创建Map实例
|
|
|
+ bmap.centerAndZoom(center, 14) // 初始化地图，设置中心点坐标和地图级别
|
|
|
+ bmap.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
|
|
|
+
|
|
|
+ // 初始化数据
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ points.push(new (window as any).BMap.Point(data[i].lon, data[i].lat))
|
|
|
+ }
|
|
|
+
|
|
|
+ createTrack()
|
|
|
+
|
|
|
+ bmap.addEventListener('click', function (e: any) {
|
|
|
+ console.log(e)
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+/* 开始动画 */
|
|
|
+const start = () => {
|
|
|
+ if (lushu) {
|
|
|
+ lushu.start()
|
|
|
+ lushu.showInfoWindow()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 暂停动画 */
|
|
|
+const pause = () => {
|
|
|
+ if (lushu) {
|
|
|
+ lushu.pause()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 创建轨迹动画 */
|
|
|
+const createTrack = () => {
|
|
|
+ // 实例化一个驾车导航用来生成路线
|
|
|
+ bmap.addOverlay(new (window as any).BMap.Polyline(points, { strokeColor: 'red' }))
|
|
|
+ bmap.setViewport(points)
|
|
|
+
|
|
|
+ lushu = new (window as any).BMapLib.LuShu(bmap, points, {
|
|
|
+ defaultContent: '默认内容',
|
|
|
+ autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
|
|
|
+ icon: new (window as any).BMap.Icon('/car.png', new (window as any).BMap.Size(52, 26), {
|
|
|
+ anchor: new (window as any).BMap.Size(27, 13)
|
|
|
+ }),
|
|
|
+ speed: 500,
|
|
|
+ enableRotation: true //是否设置marker随着道路的走向进行旋转
|
|
|
+ })
|
|
|
+ console.log(lushu)
|
|
|
+ // const start = new (window as any).BMap.Point(points[0].lng, points[0].lat)
|
|
|
+ // const end = new (window as any).BMap.Point(points[points.length - 1].lng, points[points.length - 1].lat)
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <el-card header="轨迹回放" shadow="never">
|
|
|
+ <el-button type="primary" @click="start">开始动画</el-button>
|
|
|
+ <el-button type="primary" @click="pause">暂停动画</el-button>
|
|
|
+ <div id="map" class="w-full h-300px mt-3"></div>
|
|
|
+ </el-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<style scoped lang="scss"></style>
|
XueNing
