高德地图轨迹回放、路径规划以及计算面积(超详细!!)

主要涉及到高德地图的路径规划、区域规划以及轨迹回放功能。

一、基础设置:地图

//创建地图
    var map = new AMap.Map('map',{
        zoom:17,//视角级别
        //中心点坐标
        // pitch:45,
        layers: [//使用多个图层
            new AMap.TileLayer.Satellite(),
            new AMap.TileLayer.RoadNet()
        ],
        viewMode:'3D',//使用3D视图
        resizeEnable: true
  });
//设置地图属性
  //地图类型
  map.plugin(["AMap.MapType"],function(){
    //地图类型切换
    var type= new AMap.MapType({
    
    });
    map.addControl(type);
  });
  //鹰眼
  map.plugin(["AMap.OverView"],function(){
      view = new AMap.OverView();
      map.addControl(view);
  }); 
  //标记点
  map.plugin(["AMap.MouseTool"],function(){ 
      var mousetool = new AMap.MouseTool(map); 
      mousetool.marker(); //使用鼠标工具,在地图上画标记点 
      
  });
  //计算面积
  map.plugin(["AMap.MouseTool"],function(){ 
      var mousetool = new AMap.MouseTool(map); 
      mousetool.measureArea()
      // mousetool.polyline() //这个是画线段的
      
      
  });
  // 简易缩放模式 默认为false
  map.plugin(['AMap.ToolBar',], function(){      
        map.addControl(new AMap.ToolBar({
            liteStyle: true 
        }));
        
    })

二、路径规划

根据后端接口传来的数据,根据经纬度对路径进行连线,我这里使用的是本地json数据

 // 路径规划*****************
    var path_1 = [];
    // 请求本地json
    axios.get('drone.json').then((res)=>{
      console.log('res',res)
      console.log('原来的path:',path_1)
      console.log(res.data.result.points[0].wgs)
      var i
      for(i = 0;i<res.data.result.points.length;i++){
        
        path_1.push([res.data.result.points[i].wgs.lon,res.data.result.points[i].wgs.lat])
        console.log(path_1)
      }

      var polyline = new AMap.Polyline({
        path:path_1,
        isOutline: false,
        
        borderWeight: 1,
        strokeColor: "red", 
        strokeOpacity: 1,
        strokeWeight: 1,
        strokeStyle: "solid",
        zIndex: 50,
    })   
      map.add(polyline)
      map.setCenter([res.data.result.points[0].wgs.lon,res.data.result.points[0].wgs.lat])  //设置中心点坐标
      map.setFitView([ polyline ])
    })
  

三、区域规划

同路径规划,依然是调用本地的json文件

// 绘制区域
      var path_2 = []
        // axios请求
      axios.get('drone.json').then((res)=>{
          console.log('ews',res)
          console.log('length',res.data.result.borders.length)
          for(i = 0;i<res.data.result.borders.length;i++){

            
            console.log(res.data.result.borders[i].wgs1)
            path_2.push([res.data.result.borders[i].wgs1.lon,res.data.result.borders[i].wgs1.lat])
            path_2.push([res.data.result.borders[i].wgs2.lon,res.data.result.borders[i].wgs2.lat])
            console.log(path_2)
          }

          var polygon = new AMap.Polygon({
            path: path_2,
            fillOpacity: 0,
            zIndex: 51,
      })
          map.add(polygon)
          map.setFitView([ polygon ])
      })

四、轨迹回放

重点来了!直接上代码!

html部分:

 <el-button type="primary" icon="el-icon-s-promotion" size="small" id="startDronePath" plain>轨迹回放</el-button>

css部分:

//其他样式自己调整 这里主要是设置小车的大小
      .amap-icon img{
        width: 15px !important;
        height: 7.5px !important;
      }

js部分:

//lineArr是要移动的轨迹 marker就是小车
 	  var lineArr = []
      var marker = []
      // 为移动点marker以及路径lineArr赋值 
      axios.get('drone.json').then((res)=>{
        var i
        for(i = 0;i<res.data.result.points.length;i++){
          lineArr.push([res.data.result.points[i].wgs.lon,res.data.result.points[i].wgs.lat])
        } 
      })
      marker = lineArr
      // 配置marker信息
      marker = new AMap.Marker({
        map: map,
        icon: "https://webapi.amap.com/images/car.png",
        offset: new AMap.Pixel(0,-3),//位置偏移设置 根据图片大小调整
        autoRotation: true,
        angle:-90,
      });
      // 动态轨迹
      var passedPolyline = new AMap.Polyline({
        isOutline: false,
        map: map,
        borderWeight: 1,
        strokeColor: "blue", //路径颜色
        strokeOpacity: 1,
        strokeWeight: 1,
        strokeStyle: "solid",
        zIndex: 55,
        
      });
      //marker.on方法
      marker.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath);
      });
      // 移动
      document.getElementById('startDronePath').onclick = function(){
        marker.moveAlong(lineArr, 20);//在这里可以设置移动速度
      }


五、效果图

在这里插入图片描述蓝色线为轨迹回放的线条,红色线条是路径规划线条,绿色为区域规划。点击按钮小车将按照蓝色轨迹移动。

相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页