VUE3+TS+element UI +高德地图实现轨迹回放带进度条

您所在的位置：网站首页 › 地图记录轨迹路线怎么写 › VUE3+TS+element UI +高德地图实现轨迹回放带进度条

VUE3+TS+element UI +高德地图实现轨迹回放带进度条

2023-12-01 04:06| 来源: 网络整理| 查看: 265

记录一下，由于项目需要做车辆的历史轨迹回放，查了很多资料，在高德地图里有这几种解决方案。

所用技术：vue3 + TS +element UI plus +高德地图

这是相关的Demo借鉴

高德地图的轨迹回放demo

轨迹巡航器控制

高德地图Amap UI

下面是效果图：

1，这是高德地图提供的轨迹回放demo

2，这是使用的高德地图AMap UI的巡航器

讲一下实现方法

1，轨迹回放的有两种写法，第一个是初始化加载的时候就把监听事件放进去

const initMap = () => { AMapLoader.load({ key: "key", // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: ["AMap.moveAnimation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等 AMapUI: { // 是否加载 AMapUI，缺省不加载 version: "1.1", // AMapUI 版本 plugins: [], // 需要加载的 AMapUI ui插件 }, }) .then((AMap) => { const map = new AMap.Map("container", { //设置地图容器id viewMode: "3D", //是否为3D地图模式 zoom: 13, //初始化地图级别 center: current_position.value, //初始化地图中心点位置 mapStyle: "amap://styles/fresh", }) // 添加插件 AMap.plugin( [ "AMap.ToolBar", "AMap.Scale", "AMap.HawkEye", "AMap.Geolocation", "AMap.MapType", "AMap.MouseTool", "AMap.Polyline", ], function () { //异步同时加载多个插件 // 添加地图插件 // map.addControl(new AMap.ToolBar()) // 工具条控件;范围选择控件 map.addControl(new AMap.Scale()) // 显示当前地图中心的比例尺 // map.addControl(new AMap.HawkEye()) // 显示缩略图 // map.addControl(new AMap.Geolocation()) // 定位当前位置 // map.addControl(new AMap.MapType()) // 实现默认图层与卫星图,实时交通图层之间切换 // 以下是鼠标工具插件 const mouseTool = new AMap.MouseTool(map) // mouseTool.rule();// 用户手动绘制折线图,测量距离 // mouseTool.measureArea() // 测量面积 } ) // 实例化点标记 const marker = new AMap.Marker({ icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", position: current_position.value, // 这里我们通过上面的点击获取经纬度坐标,实时添加标记 // 通过设置 offset 来添加偏移量 offset: new AMap.Pixel(-26, -54), }) //这里监听标注点的点击事件，触发实现动画效果 marker.on("click", function () { animationMove() }) marker.setMap(map) // 历史轨迹动画 function animationMove() { AMap.plugin("AMap.MoveAnimation", function () { var marker, lineArr = [ [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], ] var map = new AMap.Map("container", { resizeEnable: true, center: [116.397428, 39.90923], zoom: 17, }) marker = new AMap.Marker({ map: map, position: [116.478935, 39.997761], icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png", offset: new AMap.Pixel(-13, -26), }) // 绘制轨迹 var polyline = new AMap.Polyline({ map: map, path: lineArr, showDir: true, strokeColor: "#28F", //线颜色 // strokeOpacity: 1, //线透明度 strokeWeight: 6, //线宽 // strokeStyle: "solid" //线样式 }) var passedPolyline = new AMap.Polyline({ map: map, strokeColor: "#AF5", //线颜色 strokeWeight: 6, //线宽 }) marker.on("moving", function (e: any) { passedPolyline.setPath(e.passedPath) map.setCenter(e.target.getPosition(), true) }) map.setFitView() marker.moveAlong(lineArr, { // 每一段的时长 duration: 500, //可根据实际采集时间间隔设置 // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置 autoRotation: true, }) }) } }) .catch((e) => { console.log(e) }) } initMap()

2，轨迹回放的第二种写法，比较灵活一点

3，使用AMap UI的轨迹巡航器来实现，配合进度条，这样写会有个BUG就是点击开始的时候，直接拖动进度条会报错

const listPath = async () => { //获取历史轨迹点 list_Position.value = [] //请求接口获取轨迹点数据 const res: any = await getHistoryLocus(listSearch) //轨迹起点坐标 start_position.value = changePosition( res.result[0].gLatitude, res.result[0].gLongitude ) as any lineList.value = res.result res.result.forEach((item: any) => { list_Position.push(changePosition(item.gLatitude, item.gLongitude)) }) console.log(list_Position, `打印list_Positionlist_Position`) // -----------------轨迹巡航器-------------------------------------- //@ts-ignore 单行忽略解决TS语法提示 AMap UI 不存在 AMapUI.load( ["ui/misc/PathSimplifier", "lib/$", "ui/overlay/SimpleMarker"], function (PathSimplifier: any, $: any, SimpleMarker: any) { if (!PathSimplifier.supportCanvas) { alert("当前环境不支持 Canvas！") return } // $.SimpleMarker let pathSimplifierIns: any = new PathSimplifier({ zIndex: 100, SimpleMarker: SimpleMarker, //autoSetFitView:false, map: map, //所属的地图实例 getPath: function (pathData: any, pathIndex: any) { return pathData.path }, getHoverTitle: function ( pathData: any, pathIndex: any, pointIndex: any ) { if (pointIndex >= 0) { //point return ( pathData.name + "，点：" + pointIndex + "/" + pathData.path.length ) } return pathData.name + "，定位点数量" + pathData.path.length }, renderOptions: { pathLineStyle: { dirArrowStyle: true, }, getPathStyle: function (pathItem: any, zoom: any) { let lineWidth = Math.round(4 * Math.pow(1.1, zoom - 3)) return { pathLineStyle: { strokeStyle: "#28F", lineWidth: 6, }, pathLineSelectedStyle: { lineWidth: 6, }, pathNavigatorStyle: { fillStyle: "#AF5", }, } }, }, }) //设置数据 pathSimplifierIns.setData([ { name: "路线1", path: list_Position, }, ]) // 巡航器的样式 let pathNavigatorStyles = [ { width: 16, height: 32, //使用图片 content: PathSimplifier.Render.Canvas.getImageContent( "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png", pathSimplifierIns.renderLater() ), }, ] //对第一条线路（即索引 0）创建一个巡航器 var navg1 = pathSimplifierIns.createPathNavigator(0, { loop: false, //循环播放 speed: times.value, //巡航速度，单位千米/小时 pathNavigatorStyle: pathNavigatorStyles[0], }) navgtr.value = navg1 navg1.on("move", function () { let idx = navgtr.value.getCursor().idx //走到了第几个点 let tail = navgtr.value.getCursor().tail //至下一个节点的比例位置 let totalIdx = idx + tail // 进度条实时展示tail !isOnSlider.value && (currentIndex.value = totalIdx) //地图中心跟随变化 map.setCenter(list_Position[idx]) // 已经播放时间 // 如果到头了，回到初始状态 console.log( navgtr.value.isCursorAtPathEnd(), `打印navgtr.value.isCursorAtPathEnd()` ) if (navgtr.value.isCursorAtPathEnd()) { currentIndex.value = list_Position.length } }) pathSimplifier.value = pathSimplifierIns } ) gmap.value = map console.log(res, `打印getHistoryLocusresres`) } // 开始按钮 const startBtn = () => { navgtr.value.start() } // 暂停按钮 const stopBtn = () => { navgtr.value.pause() } // 快进 const changeSpeed = () => { times.value = times.value + 200 navgtr.value.setSpeed(times.value) console.log(times.value, `打印times.valuetimes.value`) } // 慢放 const slowSpeed = () => { if (times.value > 400) { times.value = times.value - 200 } navgtr.value.setSpeed(times.value) console.log(times.value, `打印times.valuetimes.value`) } //继续 const puseSpeed = () => { navgtr.value.resume() } const stopMove = () => { console.log(`打印sahdjlahdasb;`) navgtr.value.pause() } //进度条带动巡航器变化 const changeSliderValue = () => { navgtr.value.pause() navgtr.value.moveToPoint(currentIndex.value, 0) pathSimplifier.value.renderLater() gmap.value.setCenter(list_Position[currentIndex.value]) } // 滑块的提示信息 const handlDelta = (e: any) => { e = e.toFixed(0) let nowtime: any = "" let dayMile: any = 0 let totalMile: any = 0 let str = "" if (lineList.value) { lineList.value.forEach((item: any, index: any) => { nowtime = item.gReportTime.split("T")[0] + " " + item.gReportTime.split("T")[1].split("+")[0] dayMile = item.sDayMileage.toFixed(2) totalMile = Number(totalMile) + Number(dayMile) if (index == e) { str = nowtime + " 今日：" + dayMile + " km 累计：" + totalMile.toFixed(2) + " km" } }) } return str }

这是dom的结构

慢放开始暂停继续快进 Config Role Task

【本文地址】

VUE3+TS+element UI +高德地图实现轨迹回放带进度条

VUE3+TS+element UI +高德地图实现轨迹回放带进度条

今日新闻

推荐新闻