高德地图使用笔记-历史轨迹回放,动态改变速度
程序员文章站
2022-07-11 15:37:17
...
高德地图使用笔记-历史轨迹回放,动态改变速度
需求介绍
应客户要求,显示车辆GPS历史轨迹,并且要带入相应速度,显示当时速度以及相应进度,所以综合考量后界定用高德地图(因为穷,所以没有使用轨迹纠偏,GPS数据是5分钟一个点位,所以历史轨迹非常感人)
资源引入
1.引入高德资源文件
高德官方api地址
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
<script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.GraspRoad"></script>
开始绘制地图
使用到的api地址
高德地图轨迹展示
高德地图轨迹展示列子
1.发送请求拿到相应的所需数据
request({
url: 'xxxxxxxxxxxxxxxxxxx',
method: 'POST',
data: { carNo: this.state.carNo, endTime: moment(this.state.endValue).format('YYYY-MM-DD HH:mm:ss'), startTime: moment(this.state.startValue).format("YYYY-MM-DD HH:mm:ss") }//个人所需查询条件
}).then(data => {
if (data.rc == 0) {
console.log(data)
let steep = []//速度
let path = []//经纬度
data.ret.list.forEach((item) => {
steep.push(item.speed == 0 ? 50 : item.speed)//因为GPS数据有问题所以自己调整了一下
path.push([item.lng, item.lat])//lng:精度,lat:维度
})
//后台没有给我转换数据格式,所以只能自己装换,因为不知道有多少数据,所以用了一个2s的定时器
setTimeout(() => {
this.setState({
steep: steep,//设置全局速度
path: path//设置全局经纬度
}, () => {
this.load()//开始绘制
})
}, 2000)
} else {
message.warning('查询错误,请重新查询')
}
})
2.初始化地图轨迹
当我们拿到所需要数据的时候
path:经纬度二维数组数据
steep:速度数组数据
load = () => {
AMapUI.load(['ui/misc/PathSimplifier'], function (PathSimplifier) {
//先判断是否支持
if (!PathSimplifier.supportCanvas) {
alert('当前环境不支持 Canvas！');
return;
}
//启动地图初始化
this.initPage(PathSimplifier);//PathSimplifier 这个对象很重要,
}.bind(this));
}
initPage = (PathSimplifier) => {
//普通的初始化
let map = new AMap.Map("containerTwo", {
resizeEnable: true,
mapStyle: 'amap://styles/a8fdec119d6af8ed151ae83c97eff4d6', //设置地图的显示样式
zoom: 15,//现实大小
center: [116.478935, 39.997761]//中心位置
});
//创建组件实例
var pathSimplifierIns = new PathSimplifier({
zIndex: 100,
map: map, //所属的地图实例
getPath: function (pathData, pathIndex) {
//返回轨迹数据中的节点坐标信息，[AMap.LngLat, AMap.LngLat...] 或者 [[lng|number,lat|number],...]
return pathData.path;
},
getHoverTitle: function (pathData, pathIndex, pointIndex) {
//返回鼠标悬停时显示的信息
if (pointIndex >= 0) {
//鼠标悬停在某个轨迹节点上
return pathData.name + '，点:' + pointIndex + '/' + pathData.path.length;
}
//鼠标悬停在节点之间的连线上
return pathData.name + '，点数量' + pathData.path.length;
},
renderOptions: {
//轨迹线的样式
pathLineStyle: {
strokeStyle: 'red',
lineWidth: 6,
dirArrowStyle: true
}
},
//绘制路线节点
renderOptions: {
renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
}
});
//设置数据
pathSimplifierIns.setData([{
name: '路线0',
path: this.state.path
}]);
//创建一个巡航器 novg0需要提前设置为全局变量
navg0 = pathSimplifierIns.createPathNavigator(0, //关联第1条轨迹
{
loop: false, //循环播放
speed: 5,//形式速度
pathNavigatorStyle: {
width: 24,//图中小车宽度
height: 48,//图中小车高度
//使用图片
content: PathSimplifier.Render.Canvas.getImageContent('./img/xc1.png'),//图片的引入路径是打包后的路径,也就是index.html的图片引入路径
strokeStyle: null,
fillStyle: null,
//经过路径的样式
pathLinePassedStyle: {
lineWidth: 6,
strokeStyle: 'black',
dirArrowStyle: {
stepSpace: 15,
strokeStyle: 'red'
}
}
},
});
//创建一个点
navg0.marker = new AMap.Marker({
offset: new AMap.Pixel(12, -10),
content: `<div class=${style.markerInfo}>当前速度 : 100Km/h</div>`,//设置当前点信息窗口显示内容
map: map
});
navg0.on('move', function (e) {
navg0.marker.setPosition(navg0.getPosition());
});
}
3.开始播放历史轨迹
这个时候页面已经有了一个地图和一条巡航轨迹,现在可以播放了
var steep = this.state.steep
navg0.start();//开始播放
timer= setInterval(() => {//定时器需要提前声明
//当移动到最后一个点位时清除定时器
//navg0.getCursor() 获取小车移动到具体点位的信息
if (navg0.getCursor().idx == steep.length - 1) {
clearInterval(timer)
}
//navg0.setSpeed() 设置小车移动速度,*10是我的数据不正常
//将获取的位置index=navg0.getCursor().idx 取出速度steep数组的对应当前速度
navg0.setSpeed(steep[navg0.getCursor().idx] * 10)
//改变播放进度条
this.setState({
inputValue:Math.round((navg0.getCursor().idx)/steep.length*100)
})
//设置小车信息窗口内容
//navg0.marker.setContent()
navg0.marker.setContent(`<div class=${style.markerInfo}>当前速度 : ${steep[navg0.getCursor().idx]}Km/h</div>`)
}, 500)
到此为止,就做完了,因为穷没有使用轨迹纠偏所以可以使用这个方法,谢谢观看