1. 在GIS中有个轨迹回放,一般是针对车辆或者人员进行一系列时间点对应的坐标进行移动。
百度地图提供了两种方法,一个是这篇文章要说的沿线移动,一个是后面一篇文章要说的路书。
严格来说,沿线移动应该不算是轨迹回放,路书才是。
2. 沿线运动的原理很简单,将坐标点作为数组进行画线,然后再添加 Marker,并将 Marker 根据
数组中点的位置进行移动。从技术来说,是以前知识的结合。
百度地图提供了 marker.setPosition(point) 来进行marker的移动,这样就不需要自己写代码,
循环对 marker 进行删除和添加操作了。
3. 代码
这里有两个例子,一个是单点沿线运动。
官网的代码中,定义了两个DrivingRoute, 其中 driving2 是用来显示起点、终点和路线的,个人觉得这里完全可以
把 renderOptions 用在 driving 上,完全没有必要再定义一个对象。
1 function singleTrace(){ 2 3 map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); 4 5 var myP1 = new BMap.Point(116.380967,39.913285); 6 var myP2 = new BMap.Point(116.424374,39.914668); 7 8 var myIcon = new BMap.Icon("../img/start.png",new BMap.Size(55,70),{ 9 offset: new BMap.Size(0,25), 10 imageOffset: new BMap.Size(0,0) 11 }); 12 13 console.log(myIcon); 14 15 // var driving2 = new BMap.DrivingRoute(map,{ 16 // renderOptions:{ 17 // map:map, 18 // autoViewport:true 19 // }}); 20 // driving2.search(myP1,myP2); 21 22 window.run = function () { 23 var driving = new BMap.DrivingRoute(map,{ 24 renderOptions:{ 25 map:map, 26 autoViewport:true 27 }}); 28 driving.search(myP1,myP2); 29 driving.setSearchCompleteCallback(function () { 30 var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); 31 var paths = pts.length; 32 33 var carMk = new BMap.Marker(pts[0],{icon:myIcon}); 34 map.addOverlay(carMk); 35 i = 0; 36 function resetMkPoint(i) { 37 carMk.setPosition(pts[i]); 38 if(i< paths){ 39 setTimeout(function () { 40 i++; 41 resetMkPoint(i); 42 },100); 43 } 44 } 45 setTimeout(function () { 46 resetMkPoint(5); 47 },100) 48 }); 49 } 50 setTimeout(function () { 51 run(); 52 },1500); 53 }
多点沿线运动,稍微复杂一些,分别从两个点计算到终点的路径,并进行绘制,同时显示两个移动对象。
1 function multiTrace() { 2 3 map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); 4 5 var bounds = null; 6 var linePoints = null; 7 var spoi1 = new BMap.Point(116.380967, 39.9135285);// 8 var spoi2 = new BMap.Point(116.380967, 39.953285);// 9 var epoi = new BMap.Point(116.424374, 39.914668);// 10 11 var myIcon = new BMap.Icon("../img/start.png", new BMap.Size(55, 70), { 12 offset: new BMap.Size(0, 25), 13 imageOffset: new BMap.Size(0, 0) 14 }); 15 16 function initLine() { 17 bounds = new Array(); 18 linePoints = new Array(); 19 map.clearOverlays(); 20 var driving3 = new BMap.DrivingRoute(map, {onSearchComplete: drawLine}); 21 driving3.search(spoi1, epoi); 22 var driving4 = new BMap.DrivingRoute(map, {onSearchComplete: drawLine}); 23 driving4.search(spoi2, epoi); 24 } 25 26 function run() { 27 for (var m = 0; m < linePoints.length; m++) { 28 var pts = linePoints[m]; 29 var len = pts.length; 30 var carMk = new BMap.Marker(pts[0], {icon: myIcon}); 31 map.addOverlay(carMk); 32 resetMkPoint(1, len, pts, carMk); 33 } 34 35 function resetMkPoint(i, len, pts, carMk) { 36 carMk.setPosition(pts[i]); 37 if (i < len) { 38 setTimeout(function () { 39 i++; 40 resetMkPoint(i, len, pts, carMk); 41 }, 100); 42 } 43 } 44 } 45 46 function drawLine(results) { 47 var opacity = 0.45; 48 var planObj = results.getPlan(0); 49 var b = new Array(); 50 var addMarkerFun = function (point, imgType, index, title) { 51 var url; 52 var width; 53 var height; 54 var myIcon; 55 56 //imgType:: 1的场合,为起点和终点的图;2的场合为车的图形 57 if (imgType == 1) { 58 url = "../img/start1.png"; 59 width = 42; 60 height = 34; 61 myIcon = new BMap.Icon(url, new BMap.Size(width, height), { 62 offset: new BMap.Size(14, 32), 63 imageOffset: new BMap.Size(0, 0 - index * height) 64 }); 65 } else { 66 url = "../img/start1.png"; 67 width = 22; 68 height = 25; 69 var d = 25; 70 var cha = 0; 71 var jia = 0; 72 if (index == 2) { 73 d = 21; 74 cha = 5; 75 jia = 1; 76 } 77 myIcon = new BMap.Icon(url, new BMap.Size(width, d), { 78 offset: new BMap.Size(10, (11 + jia)), 79 imageOffset: new BMap.Size(0, 0 - index * height - cha) 80 }); 81 } 82 83 var marker = new BMap.Marker(point, {Icon: myIcon}); 84 if (title != null && title != "") { 85 marker.setTitle(title); 86 } 87 // 88 if (imgType == 1) { 89 marker.setTop(true); 90 } 91 map.addOverlay(marker); 92 } 93 var addPoints = function (points) { 94 for (var i = 0; i < points.length; i++) { 95 bounds.push(points[i]); 96 b.push(points[i]); 97 } 98 } 99 100 for (var i = 0; i < planObj.getNumRoutes(); i++) { 101 var route = planObj.getRoute(0); 102 if (route.getDistance(false) <= 0) { 103 continue; 104 } 105 addPoints(route.getPath()); 106 107 if (route.getRouteType() == BMAP_ROUTE_TYPE_DRIVING) { 108 map.addOverlay(new BMap.Polyline(route.getPath(), { 109 strokeColor: "#0030ff", 110 strokeOpacity: opacity, 111 strokeWeight: 6, 112 enableMassClear: true 113 })); 114 } else { 115 map.addOverlay(new BMap.Polyline(route.getPath(), { 116 strokeColor: "#30a208", 117 strokeOpacity: 0.75, 118 strokeWeight: 4, 119 enableMassClear: true 120 })); 121 } 122 } 123 map.setViewport(bounds); 124 125 addMarkerFun(results.getEnd().point, 1, 1); 126 127 addMarkerFun(results.getStart().point, 1, 0); 128 129 linePoints[linePoints.length] = b; 130 } 131 132 initLine(); 133 setTimeout(function () { 134 run(); 135 }, 1500); 136 137 }
5. 页面显示
6. 代码参考
https://github.com/WhatGIS/bdMap