百度地图(19)-沿线移动

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. 页面显示

百度地图(19)-沿线移动

 

百度地图(19)-沿线移动

 

6. 代码参考

https://github.com/WhatGIS/bdMap

 

百度地图(19)-沿线移动

上一篇:安卓 TextToSpeech: speak failed: not bound to TTS engine


下一篇:升级Android Studio到4.1后的配置问解决