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搜索定位服务
在这里插入图片描述
在这里插入图片描述
需要完整源码的私信