vue[高德地图行车路径规划以及路线记录绘制操作]

最近的一个项目中需要根据需求将地图上画出一条高速公路，然后将这条高速公路的行车轨迹绘制成一条带有颜色路线以便后续插入内容。
看遍了不少高德地图的api内容以及搜索了不少的网上资源，发现可以通过路径规划来记录车辆的行车点位集合，然后通过点位集合复原成一条自定义的路线。因此这里对该内容做下日常的整理记录。

绘制行车路线在高德地图中有不少的方式：
如：驾车路线规划、步行路线规划、骑行路线规划、公交路线规划
而我的目的就是为了能够获得路线的轨迹点位集合以便于后续画路线的时候能够通过点位集合渲染出来。因此这里我选择的是驾车路线。不同的路线规划也可以达到同样的效果，只是复杂程度不同而已，而我这里是 画高速公路 因此选择驾车路线规划最好。

vue组件代码示例：目的获取高速公路点位集合

步骤1：渲染地图,并且把点标记创建好以及地图点击事件标记上
步骤2：点击地图产生起点和终点并且生成路线（AMap.DragRoute）这个插件

代码：

<template><div class="index-map" id="index-map"></div>
</template>
<script>
export default {data() {return {map: {}, //保存地图对象leftStart: "",leftStartMark: {}, // 起点的点标记leftEnd: "",leftEndMark: {}, // 终点的点标记typeBtnLeft: false, // 起点终点的点击切换leftPath: [], // 路线绘制起点-终点集合leftResultPath: [] // 点位路径集合};},methods: {// 创建地图createMap() {let that = this;this.$nextTick(() => {//地图加载that.map = new AMap.Map("index-map", {zooms: [8, 20],zoom: 8,center: [118.764562, 32.061525]});// 创建点标记AMapUI.loadUI(["overlay/SimpleMarker"], function(SimpleMarker) {that.leftStartMark = new SimpleMarker({//设置节点属性iconLabel: {//普通文本innerHTML: "起",style: {color: "#fff",fontSize: "100%",marginTop: "1px"}},iconStyle: "red"});// 创建左边结束点that.leftEndMark = new SimpleMarker({//设置节点属性iconLabel: {//普通文本innerHTML: "终",style: {color: "#fff",fontSize: "100%",marginTop: "1px"}},iconStyle: "red"});});//获取鼠标点击的经纬度信息that.map.on("click", function(e) {// 线路点（起点-终点）if (that.typeBtnLeft == false) {// 先点击起点if (that.leftStartMark) {that.leftStart = e.lnglat.getLng() + "," + e.lnglat.getLat();that.leftStartMark.setMap(that.map);that.leftStartMark.setPosition([e.lnglat.getLng(),e.lnglat.getLat()]);}// 然后决定终点that.typeBtnLeft = true;} else if (that.typeBtnLeft == true) {// 设置好终点if (that.leftEndMark) {that.leftEnd = e.lnglat.getLng() + "," + e.lnglat.getLat();that.leftEndMark.setMap(that.map);that.leftEndMark.setPosition([e.lnglat.getLng(),e.lnglat.getLat()]);}// 终止点击that.typeBtnLeft = null;// 绘制路线that.createLeftLine();} else {console.log("点击完毕");}});});},// 绘制路径-左createLeftLine() {let that = this;if (that.leftStartMark && that.leftEndMark) {that.leftStartMark.setMap(null);that.leftEndMark.setMap(null);}//绘制左边初始路径，起点-终点that.leftPath = [];that.leftPath.push(that.leftStart.split(","));that.leftPath.push(that.leftEnd.split(","));// 使用DragRoute插件-构造拖拽导航类that.map.plugin("AMap.DragRoute", function() {that.leftRoute = new AMap.DragRoute(that.map,that.leftPath,AMap.DrivingPolicy.LEAST_TIME,{showTraffic: false,polyOptions: {strokeColor: "#409EFF"}});//查询导航路径并开启拖拽导航that.leftRoute.search();// 监听完成情况that.leftRoute.on("complete", function(result) {// 移动起始点后自动改变当前经纬度that.leftStart =result.data.start.location.lng +"," +result.data.start.location.lat;that.leftEnd =result.data.end.location.lng + "," + result.data.end.location.lat;// 保存点路径集合that.leftResultPath = that.leftRoute.getRoute();console.log('leftResultPath',that.leftResultPath);});});}},mounted() {this.createMap();}
};
</script>
<style lang="scss" scoped>
.index-map {height: 100vh;width: 100vw;
}
</style>

步骤三：将拿到的点位集合在地图上绘制出来（Loca.LineLayer可视化插件）

代码：

   // 根据点位集合绘制自定义路线createLine() {let that = this;// 构建可视化线图层that.layer = new Loca.LineLayer({map: that.map});// 转换格式：{direction:'',lnglat:[[xx][xx]]}let mLine = [];// 这里放置点位集合的内容赋值给mleftRoute即可let mleftRoute = JSON.parse(sessionStorage.getItem('xxxx'));let leftLine = { lnglat: mleftRoute };mLine.push(leftLine);// 生成线数据that.layer.setData(mLine, {lnglat: "lnglat"});// 设置线的颜色that.layer.setOptions({style: {color: function(v) {return "#40ef2a";},borderWidth: 8}});// 渲染that.layer.render();}

vue[高德地图行车路径规划以及路线记录绘制操作]相关推荐

高德地图驾车路径规划API，获取两地点之间的驾车里程和时间
高德地图驾车路径规划API,获取两地点之间的驾车里程和时间 import pandas as pd import requests import jsondef get_dis_tm(origin, ...
高德地图货车路径规划JS API以及WEB API在VUE中使用方法
做一个路径规划系统,使用到了高德地图的API以及VUE,而路径规划方面在高德地图中,货车的接口使用次数是极为有限的,研究了一段时间,所以使用的时候要谨慎一点次数. 本文记录一下高德地图的JS API和 ...
高德地图API路径规划结果清除
关于高德地图API之路径规划结果的清除(js API) 偶然用到高德地图API做路径规划,在做的过程中发现连续进行不同的路径规划产生的结果是叠加的.如何清除上一次的路径规划呢?开发手册上有一个 cle ...
百度地图行车路径规划自定义起点终点路径
已知N个坐标点,用这个点在百度地图上绘制一条行车路线问题:百度地图为我们提供了 DrivingRoute API,但是提供的api中并没有提供更改路径.起点.终点.经点的样式,如果想让界面看起来舒服 ...
3、VBA网抓高德地图货车路径规划距离（借助刘永富老师插件解析JSON格式数据）
Sub 高德货车()Dim x As MSXML2.XMLHTTP60Set x = New MSXML2.ServerXMLHTTP60With x.Open "GET", &q ...
vue+高德地图绘制路径
一.vue+高德地图开发最近开发项目地图用的比较频繁,比如高德地图.百度地图或者echars地图,而且大都是用来做路径展示,所以今天说说高德地图的使用(非全面的高德地图使用) 使用的是vue cli ...
百度地图no result available_【整理之路二】百度地图的路径规划和调用本机地图导航...
推荐看完之后注意一下最后的东西一.细说百度地图的路径规划路径规划主要有这么几种 1.公交路径规划 1.1 市内公交规划(暂时不在这里说) 1.2 跨市/省公交规划 // 导入头文件 #import ...
【整理之路二】百度地图的路径规划和调用本机地图导航
一.细说百度地图的路径规划路径规划主要有这么几种 1.公交路径规划 1.1 市内公交规划(暂时不在这里说) 1.2 跨市/省公交规划 // 导入头文件#import <BaiduMapAPI_ ...
利用vue+高德地图API 实现用户的运动轨迹
利用vue+高德地图API 实现用户的运动轨迹高德地图网址:https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare 任务一:实现地图显示先完成准备工 ...

vue[高德地图行车路径规划以及路线记录绘制操作]

vue组件代码示例：目的获取高速公路点位集合

vue[高德地图行车路径规划以及路线记录绘制操作]相关推荐

最新文章

热门文章