MineMap动态路线规划方案(自定义途径点,可删除,可拖动)

使用场景:同百度,高德路线规划一样,该方案支持对途径点的动态拖动,增加,删除,路线动态变更
1.整合方案原理:
1.使用路径规划服务作为路线绘制基础
2.可拖动marker及Popup结合作为标记点使用
3.动态构建的路线,途径点
4.支持获取link级别数据,支持增加多种模式路线规划选择
2.使用方式
/**
* @Description:线指示器
* @Author: ShiWei
* @Date: 2021-08-19
*/
/**
*初始化地图编辑
*/
export const initEdit = () => {
if(!handleEdit){
handleEdit = new minemap.edit.init(_map, {
boxSelect: true,
touchEnabled: true,
displayControlsDefault: true,
showButtons: false
});
}
//开启画线模式
handleEdit.onBtnCtrlActive('line');
};
只需要执行该方法即完成编辑器的启动工作;
激活地图单击,双击事件
_map.on('click',AutoLine.clickPoints);
_map.on('dblclick',AutoLine.dbClickEnd)
/**
* @Description:地图路径规划单击选点
* @Author: ShiWei
* @Date: 2020-11-12
*/
export const clickPoints=(v)=>{
let tep=[];
let ibs=v.lngLat;
tep=[ibs.lng,ibs.lat];
wayPoints.push(tep);
let obs=[];
let tps=[]
if(wayPoints.length===1&&DbMarker.length<1){
obs.push({marker:"start",point:wayPoints[0],name:markerList[0],isDra:false,url:startBase64});
addMarker(obs)
}
}
/**
* @Description:双击结束选点
* @Author: ShiWei
* @Date: 2020-11-12
*/
export const dbClickEnd=()=>{
let tep=[];
let data={};
let set=[];
let str=''
//todo:清除双击时触发获取的最后一个相同点
wayPoints.splice(wayPoints.length-1,1);
currentPoint=[...wayPoints];
if(wayPoints.length===2){
currentPoint=[...wayPoints]
// currentPoint=wayPoints;
let obs=[];
data={
sPoint:currentPoint[0].toString(),
ePoint:currentPoint[1].toString(),
wayPoints:''
}
initHandleLine(data)
//只有2点只绘制终点
obs.push({marker:"end",point:wayPoints[1],name:markerList[6],isDra:false,url:endBase64})
addMarker(obs)
//标记了起点和终点
}else {
//TODO:途经点数据拼装 截取现存数组中最后一个和第一个,多个之间使用;隔离
currentPoint.splice(0,1)
currentPoint.splice(currentPoint.length-1,1);
tep=currentPoint;
set=[...tep];
set.map(k=>{
str+=k.toString()+';'
})
data={
sPoint:wayPoints[0].toString(),
ePoint:wayPoints[wayPoints.length-1].toString(),
wayPoints:str
}
initHandleLine(data)
//含经过点的时候绘制终点及经过点
let obs=[];
let end=[];
for(let i=0;i<tep.length;i++){
obs.push({
marker:"away",point:tep[i],name:markerList[i+1],isDra:true,url:wayBase64
})
}
addWayMarker(obs);
sroPoint=[...tep]
//只有2点只绘制终点
end.push({marker:"end",point:wayPoints[wayPoints.length-1],name:markerList[6],isDra:false,url:endBase64});
addMarker(end)
}
clearEdit(false);
_map.off('click', clickPoints);
_map.off('dblclick',dbClickEnd)
}





支持集合POI搜索定位服务


需要完整源码的私信