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();}