高德地图轨迹回放、路径规划以及计算面积（超详细！！）

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

一、基础设置：地图

//创建地图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() //这个是画线段的});// 简易缩放模式 默认为falsemap.plugin(['AMap.ToolBar',], function(){      map.addControl(new AMap.ToolBar({liteStyle: true }));})

二、路径规划

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

 // 路径规划*****************var path_1 = [];// 请求本地jsonaxios.get('drone.json').then((res)=>{console.log('res',res)console.log('原来的path:',path_1)console.log(res.data.result.points[0].wgs)var ifor(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 ifor(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);//在这里可以设置移动速度}

五、效果图

蓝色线为轨迹回放的线条，红色线条是路径规划线条，绿色为区域规划。点击按钮小车将按照蓝色轨迹移动。

高德地图轨迹回放、路径规划以及计算面积（超详细！！）相关推荐

高德地图轨迹回放功能
一.介绍在项目过程中,需要对自己设备产品输出的定位信息进行验证.通过路跑测试获取到了一组经纬度数据.这时需要验证这组数据是否是实际路跑测试的轨迹,就用到了高德地图的轨迹回放功能.下面将 ...
Android实现高德地图轨迹回放
Android实现高德地图轨迹回放写在前面准备官方文档解读创建应用: 地图api引入: 权限添加效果展示过程实现地图初始化定位显示标记点点平滑移动添加呼吸点写在结尾写在前面 ...
android高德地图轨迹偏纠,GitHub - YangHaoyi/DrawTraceDemo: 高德地图轨迹回放带定位纠偏加彩虹渐变线...
DrawTraceDemo 高德地图轨迹回放带定位纠偏加彩虹渐变线由于高德自身持续定位存在偏移状况,故摒弃了高德自身的定位点,改用自定义marker点作为定位点加注轨迹纠偏函数,根据时间判定此次移 ...
高德地图WebAPI : 驾车路径规划
参考API 一个demo 获取路径规划返回结果中的两点间最短驾车距离 import java.io.BufferedReader; import java.io.BufferedReader; imp ...
python调用高德地图api获取路径规划，然后规划好点显示在地图上（农机路径转移）
我的博客好像跳度比较大,不少内容都涉及,但我是做ros组合导航的,其他的或者是项目设计,或者是因为兴趣,或者是随笔记下来. 无聊写来玩下的小demo,本来试图在硕士期间研究下这个课题即农机从仓库到田间 ...
高德地图-轨迹回放（二）
利用高德地图作轨迹回放的另一种方法是利用官方api覆盖物中的AMap.Polyline来做,官方给出的例子中也是此原理实现的. 实现地图轨迹的主要函数如下 function track(){map.c ...
高德地图轨迹回放、点的弹跳效果、浏览器环境监测、设置地图的主题样式、GPS坐标转为高德坐标、地图加载提示、地图DOM事件、修改图层等API接口
1.轨迹回放 https://lbs.amap.com/api/javascript-api/example/marker/replaying-historical-running-data 2.点的 ...
基于高德地图的APP路径规划开发
一.初始化一个APP项目参见我的上一篇文章:https://blog.csdn.net/QiwzDeBLOG/article/details/84701746 前期准备: 我的项目名称:AmapTe ...
高德地图轨迹回放_高德地图上线了一个新功能….
文.路人甲TM 德地图这两天刚上线了一个叫做「家人地图」的功能,所谓家人地图顾名思义,就是你可以通过高德地图组建一个家人圈,在这个圈子里面你可以看到你的家人在什么位置,当你的家人到达什么位置的时候自动 ...

高德地图轨迹回放、路径规划以及计算面积（超详细！！）

一、基础设置：地图

二、路径规划

三、区域规划

四、轨迹回放

五、效果图

高德地图轨迹回放、路径规划以及计算面积（超详细！！）相关推荐

最新文章

热门文章