实现的功能:
渲染多条驾车路线(道路规划),并在路线渲染后的回调函数中实现添加拥堵路段;
使用的知识:
1.var bm = new BMap.Map(“allmap”);
2.new BMap.DrivingRoute(bm,{renderOptions:{map:bm,autoViewport:true}});
3.driving.search(起始点,终点,{途径点:[p3,p4]})
4.driving.setSearchCompleteCallback(function(){} )//绘制完成之后的回调
5.new BMap.Polyline([new Point…,new Point],{线的属性设置});
getPoint:function(lat,lng){
var self = this;
$.ajax({
url: ctx+"/service/rescue/queryMapLatAndLng",
success: function (res) {
if( res.data ){
var resData = res.data;
var routesAllArr = [];
for( j in resData ){
(function(i){
var driving = new BMap.DrivingRoute(bm, {renderOptions:{map: bm, autoViewport: false},onMarkersSet:function(res){
bm.removeOverlay(res[0].marker); //删除原起点
bm.removeOverlay(res[res.length-1].marker);//删除原终点
//起点
var newPoint = new BMap.Point(resData[i].lng,resData[i].lat);
bm.addOverlay(new BMap.Marker(newPoint,{icon:new BMap.Icon(ctx+"/images/marker-jiuyuan.gif",new BMap.Size(30,48),{imageSize: new BMap.Size(30,48)})}));
//添加文字标签label覆盖物
var optNum = {
position : newPoint,
offset : new BMap.Size(-55,-56)
};
var label = new BMap.Label(resData[i].rescue_station, optNum);
label.setStyle({
width:'100px',
color:'#fff',
textAlign:'center',
height : "24px",
lineHeight : "24px",
border:'none',
background:"rgba(201,122,20,.5)",
padding:"0",
borderRadius:"6px",
fontSize:"12px",
border:"1px rgb(201,122,20) solid"
});
bm.addOverlay(label);
}});
//画道路
driving.search(new BMap.Point(resData[i].lng,resData[i].lat),new BMap.Point(lng,lat));
//道路创建完之后的回调,可以直接获取百度返回路线的所有点位,且这些点位都是new(实例new Point)过之后的
driving.setSearchCompleteCallback(function() {
var routesAll = driving.getResults().getPlan(0);
//获取所有坐标点位的数组
var routesArr = routesAll.getRoute(0).getPath();
//获取线路段数(这里没有使用到)
var routesCount = routesAll.getNumRoutes(0);
var len = routesArr.length,
newTotalArr = [];
//添加拥堵点功能
//路线分割的次数[2,3]
var splitNum = Math.floor((Math.random()*2)+2);
function GetNewArr(){
//分割起始位置
var startIndex = Math.floor((Math.random()*(len-2)));
//分割的长度,每段的长度5%-15%
var min = len*0.05+1;
var max = len*0.15;
var barL = Math.floor((Math.random()*(max-min))+min);
return routesArr.slice(startIndex,barL+startIndex);
//Array.slice(起索引,终索引);不改变原数组
//Array.splice(起索引,长度);改变原数组
//Array.splite(起索引,终索引);改变原数组
}
for(var i = 0;i < splitNum;i++){
newTotalArr.push(GetNewArr());
}
//得到所有要添加的点位数组
routesAllArr.push(newTotalArr);
//最后创建事发点
var myJ = j;
if( myJ == resData.length-1 ){
DrawLine();
shifaFun();
}
});
})(j);
}
//添加拥堵点
function DrawLine(){
//随机颜色
var colors = ["#ad0000","yellow"];
$.each(routesAllArr,function (index,item) {
$.each(item,function (index, value) {
var colorIndex = Math.floor((Math.random()*colors.length));
//添加画线,value中的数组元素是通过getPath(0)获取的,都是new Point之后的,所以这里直接传参value就可以,不用在定义点
var polyline = new BMap.Polyline(value,{strokeColor:colors[colorIndex], strokeWeight:7, strokeOpacity:1});
bm.addOverlay(polyline);
})
})
}
//事发点
function shifaFun(){
var happyPoint = new BMap.Point(lng,lat);
bm.addOverlay(new BMap.Marker(happyPoint,{icon:new BMap.Icon(ctx+"/images/marker-shifa.gif",new BMap.Size(45,65))}));
var optNum2 = {
position : happyPoint,
offset : new BMap.Size(-78,-59)
};
var label2 = new BMap.Label(self.titleName, optNum2);
label2.setStyle({
width:'160px',
color:'#fff',
textAlign:'center',
height : "28px",
lineHeight : "28px",
border:'none',
background:"rgba(197,33,56,.5)",
padding:"0",
borderRadius:"6px",
fontSize:"14px",
textOverflow:"ellipsis",
overflow:"hidden",
border:"1px rgb(197,33,56) solid"
});
bm.addOverlay(label2);
bm.centerAndZoom(new BMap.Point(lng,lat),14);
}
}
}
});
}
实现小车实时行驶,且走过道路划线