前端代码分享：高德地图轨迹回放源码——物联网系统车辆管理大部分都需要 · 物联网平台-威尼斯人最新
leitianfu
·
2020年03月04日
·
最后由 回复于 2022年08月19日
·
579 次阅读
本帖已被设为精华帖！
轨迹回放 - 高德地图
——————————————好东西与你分享——————————————
这个轨迹回放很多地方都在使用；特别是车辆轨迹；
从业务上：
比如：农机管理，农机的车辆作业轨迹
比如：垃圾车辆管理；物流车辆管理
等等，很多地方，都在使用。
创建巡航器实现轨迹回放的好处就是回放速度随时控制随时变化，不好的就是浏览器必须支持 canvas（ie8 及以下不支持）
效果图如下：
源码地址：
https://github.com/waterdroppp/mapplayback
前端代码：
doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<title>examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link href="" rel="stylesheet">
<style type="text/css">
html,body {
height:100%;
overflow:hidden;
}
body {
margin-bottom:30px;
padding:0;
}
.all{
margin: 0 0 0 200px;
height:100%;
}
.control-list {
width: 200px;
height: 100%;
background-color: #eee;
position: absolute;
top:0;
left:0;
}
.control-list ul {}
.control-list ul li {
list-style:none;
padding:10px;
height:14px;
line-height:14px;
cursor:pointer;
}
.time {
width:100%;
height: 10%;
line-height:50px;
background-color: rgb(174,221,129);
}
.date {
margin-left:100px;
}
.info {
position:absolute;
top:35px;
left:350px;
font-size:12px;
}
#speed {
vertical-align:middle;
width:60px;
height:23px;
}
.container {
width:100%;
height:90%;
background:#ccc;
}
#mapcontainer {
height:100%;
}
#tip {
position: absolute;
top: 70px;
right:30px;
padding:0 5px;
border-radius:3px;
border: 1px solid #000;
background:rgba(0,160,220,0.4);
line-height:16px;
}
#tip input[type=text]{
border:none;
background:#fff;
}
</style>
<script src="lib/date/wdatepicker.js"></script>
</head>
<body>
<div class="all">
<div class="control-list">
<ul>
<li onclick="toggle()">功能控件</li>
<li id="play" onclick="track()">轨迹</li>
</ul>
</div>
<div class="time">
<div class="date">
从<input type="text" id="starttime" class="wdate" onfocus="wdatepicker({lang:'zh-cn',datefmt:'yyyy-mm-dd hh:mm:ss'})">
到<input type="text" id="endtime" class="wdate" onfocus="wdatepicker({lang:'zh-cn',datefmt:'yyyy-mm-dd hh:mm:ss'})">
<span class="info">请输入2016-12-20 06:00:00到2016-12-20 09:00:00</span>
<select name="select" id="speed">
<option value="10000">慢</option>
<option value="40000">一般</option>
<option value="500000">快</option>
</select>
<button type="button" id="start" value="开始" >开始运动</button>
<button type="button" id="pause" value="暂停" >暂停运动</button>
<button type="button" id="resume" value="继续" >继续运动</button>
<button type="button" id="stop" value="停止" >停止运动</button>
</div>
</div>
<div class="container">
<div id="mapcontainer"></div>
<div id="tip">
<input type="text" id="keyword" name="keyword" value="请输入关键字" onfocus="this.value=''">
</div>
</div>
</div>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=key值&&plugin=amap.scale,amap.overview,amap.toolbar"></script>
<script type="text/javascript" src="https://webapi.amap.com/demos/js/litetoolbar.js"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
<script src="lib/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var speed = document.getelementbyid('speed');
var start = document.getelementbyid('start');
var pause = document.getelementbyid('pause');
var resume = document.getelementbyid('resume');
var stop = document.getelementbyid('stop');
var st = document.getelementbyid('starttime');
var et = document.getelementbyid('endtime');
var pla = document.getelementbyid('play');
var json = {
"name":"张三",
"track": [
{
"lngx":"87.616842",
"laty":"43.82539 ",
"address":"乌鲁市",
"dtime": "2016-12-20 06:00"
},
{
"lngx":"91.171961",
"laty":"29.653482",
"address":"拉萨市",
"dtime":"2016-12-20 06:30"
},
{
"lngx": "104.066143",
"laty": "30.573095",
"address": "成都市",
"dtime": "2016-12-20 07:00"
},
{
"lngx": "113.264385",
"laty": "23.129112",
"address": "广州市",
"dtime": "2016-12-20 07:30"
},
{
"lngx": "121.473658",
"laty": "31.230378",
"address": "上海市",
"dtime": "2016-12-20 08:00"
},
{
"lngx": "112.938888",
"laty": "28.228272",
"address": "长沙市",
"dtime": "2016-12-20 08:30"
},
{
"lngx": "113.658075",
"laty": "34.745793",
"address": "郑州市",
"dtime": "2016-12-20 09:00"
}
]
};
var marker;
var linearr=[];
var lngx="";
var laty ="";
var tra =[];
var map =new amap.map('mapcontainer',{
resizeenable: true,
zoom:7,
center: [116.397428, 39.90923],
keyboardenable: false
});
var windowsarr =[];
var marker =[];
amap.plugin(['amap.autocomplete','amap.placesearch'],function(){
var autooptions = {
city: "北京",
input: "keyword"
};
//搜索提示
autocomplete= new amap.autocomplete(autooptions);
var placesearch = new amap.placesearch({
city: "北京",
map: map
});
amap.event.addlistener(autocomplete,"select",function(e){
placesearch.search(e.poi.name);
});
});
var tool = new amap.toolbar({
visible: false
});
var scale = new amap.scale({
visible:false
});
var overview = new amap.overview({
visible: false
});
map.addcontrol(tool);
map.addcontrol(scale);
map.addcontrol(overview);
var flag=true;
function toggle() {
if(flag){
tool.show();
scale.show();
overview.show();
flag=false;
}else {
tool.hide();
scale.hide();
overview.hide();
flag=true;
}
}
function track(){
//先清楚线路及地图覆盖物
linearr =[];
map.clearmap();
//console.log(st.value,et.value);
//console.log(typeof st.value);
for(var i=0;i<json.track.length;i){
var dt = json.track[i].dtime;
if(diff(dt,st.value)>=0&&diff(dt,et.value)<=0){
lngx = json.track[i].lngx;
laty = json.track[i].laty;
linearr.push([lngx,laty]);
tra.push(json.track[i]);
}
}
// console.log(linearr);
amapui.load(['ui/misc/pathsimplifier'], function(pathsimplifier) {
if (!pathsimplifier.supportcanvas) {
alert('当前环境不支持 canvas！');
return;
}
var defaultrenderoptions = {
pathnavigatorstyle: {
width:16,
height:16,
autorotate:true,
linejoin:'round',
content:'defaultpathnavigtor',
fillstyle:'#087ec4',
strokestyle:'#116394',
linewidth:1,
pathlinepassedstyle: {
linewidth:2,
strokestyle:'rgba(0, 160, 220, 0.8)',
borderwidth:1,
borderstyle:'#eee',
dirarrowstyle:false
}
}
};
var pathsimplifierins = new pathsimplifier({
zindex: 100,
map: map,
getpath: function(pathdata, pathindex) {
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: defaultrenderoptions
});
window.pathsimplifierins = pathsimplifierins;
pathsimplifierins.setdata([{
name: '轨迹',
path: linearr
}]);
var navg = pathsimplifierins.createpathnavigator(0,{
loop: true,
speed: parseint(speed.value),
pathnavigatorstyle: {
width:24,
height:24,
content: pathsimplifier.render.canvas.getimagecontent('image/plane.png'),
strokestyle:null,
fillstyle:null
}
});
start.onclick = function (){
navg.start();
}
pause.onclick = function (){
navg.pause();
//console.log(navg.getspeed(),navg.getmoveddistance())
//console.log(navg.getposition());
alert('当前为止走过的距离'parseint(navg.getmoveddistance()/1000)'km,回放速度为:'parseint(navg.getspeed())'km/h');
}
resume.onclick = function (){
navg.resume();
}
stop.onclick = function (){
navg.stop();
// map.clearmap();
}
console.log(navg.getnavistatus());
speed.onchange=function(){
var spe = speed.value;
navg.setspeed(spe);
};
var startpot = linearr[0];
var endpot = linearr[linearr.length-1];
var stmarker = new amap.marker({
map: map,
position: [startpot[0], startpot[1]], //基点位置
icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
zindex: 10
});
var endmarker = new amap.marker({
map: map,
position: [endpot[0], endpot[1]], //基点位置
icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
zindex: 10
});
});
}
function stringtotime(string){
var s = string.split('',2);
var d = (s[0]?s[0]:'').split('-',3);
var t = (s[1]?s[1]:'').split(':',3);
//转化为时间
return (new date(parseint(d[0],10)||null,(parseint(d[1],10)-1)||1,parseint(d[2],10)||null,parseint(t[0],10)||null,parseint(t[1],10)||null,parseint(t[2],10)||null)).gettime();
}
function diff(date1,date2){
if( typeof date1 === 'string'){
date1 = stringtotime(date1);
}else {
date1 = date1.gettime();
}
if(typeof date2 ==='string'){
date2 = stringtotime(date2);
}else {
date2 = date2.gettime();
}
//返回差值，单位秒
return (date1-date2)/1000;
}
</script>
</body>
</html>
