博客

最近的一个项目中需要根据需求将地图上画出一条高速公路，然后将这条高速公路的行车轨迹绘制成一条带有颜色路线以便后续插入内容。

看遍了不少高德地图的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();
    }