关于vue.js:腾讯地图api根据路线画自定义箭头

我查了很多的材料，并没有具体的论断，我依照 api 给的办法，我自定义做出的成果
vue+element+ 腾讯地图 API，（仅供参考）
效果图如下：

1、首先看是否跟我应用的办法申明 Map 统一的办法，腾讯地图的 JavaScript API GL 的 api（如有不同，能够看逻辑，逻辑是一样的，然而须要本人去专研下代码）
https://lbs.qq.com/webApi/jav…
2、如果看到这里，那我先讲下逻辑，我之前思考过计划：
（1）地图自带的线段带的箭头指向（跟理论需要不符），而且，箭头不能大于具体宽度，这样咱们没方法扩大，果然放弃了（心愿腾讯地图 api，这里能够改善下）

这时示例地址：
https://lbs.qq.com/webDemoCen…
这是 api 地址：
https://lbs.qq.com/webApi/jav…

（2）自定义 DOM 覆盖物（DOMOverlay）这是百度搜寻最多的计划，然而我看过，能够做到，申明 img 构造（img 就是箭头的图片），依照 img 旋转不同的角度所失去的，然而会呈现一种 bug，就是不会随着地图缩放而进行变动，这就很恼火了，所以我就没思考（测试必定给我提 bug）
（3）这种目前我应用的一种，依据两点的坐标，判断角度、拿到箭头的三角坐标给画两条线，联合成箭头形态，（说白点：就是跟画线一样，画进去的箭头）
（4）依据画多边形，进行绘制，然而原理都是一样的，先找到箭头的三角坐标，之后进行解决，须要看具体的需要，（如果是箭头是笼罩有色彩的，那就先拿到坐标，进行多边形绘制，成果也能实现）。重点：拿到箭头的三个角的坐标！！！
（5）其余的计划，大同小异，都是依据需要，联合坐标，进行绘制。

1、申明 map 以及 polylineLayer（后面是地图，前面是画线），点位的申明，我就不做粘贴的，会一点都应该会撒点

<div class="echarts_heating" id="map"></div> //html

var map = new TMap.Map(document.getElementById("map"), {
    zoom: 11, // 设置地图缩放级别
    center: center, // 设置地图中心点坐标
    mapStyleId: "style1", // 个性化款式默认 style
    disableDefaultUI: true,
    showControl: false,
    baseMap: {
      type: "vector",
      features: ["base", "building3d", "point"], // 暗藏矢量文字可依据需要去配置
      
    },
    // mapStyleId: "style1", // 设置款式 ID，本例中的 key 绑定的 style1 为经典地图款式
    //（若应用未绑定的款式或有效 ID，则会提醒谬误，并用地图默认款式显示）});

画线 polylineLayer 的申明以及线段的格调

  
var polylineLayer = new TMap.MultiPolyline({
    map, // 绘制到指标地图
    // 折线款式定义
    styles: {
      style_blue: new TMap.PolylineStyle({
        color: "#F15E59", // 线填充色
        width: 3, // 折线宽度
        lineCap: "round", // 线端头形式
      }),
      style_dash: new TMap.PolylineStyle({
        color: "#F15E59", // 线填充色
        width: 3, // 折线宽度
        lineCap: "butt", // 线端头形式
        dashArray: [6, 5], // 虚线展现形式
      }),
    },
    geometries: [],});

在 vue 的 methods 中

 //arr 是点位坐标，[终点, 起点] index，indexli，是为了不同的 id 所循环进去的，不便不同的命名，可勾销
computeHeading(arr, index, indexli) {
  // 依据 computeDistance 去查问两点之前的间隔
  let computeDistance = TMap.geometry.computeDistance(arr);
  // 查问两点之前的间隔，如果间隔过短，不进行任何解决
  if (computeDistance > 1500) {let computeHeading = TMap.geometry.computeHeading(arr[0], arr[1]);
    // 依据 computeHeading，获取以后点位的的角度

    let du; // 这个变量只是为了不让箭头的顶端和 icon 重叠而申明的反向的角度
    if (computeHeading > 0) {
      du = computeHeading - 180;
      // 因为地图的坐标系中只有【180，-180】所以进行逆时针转换
    } else {du = computeHeading + 180;}
    // path0 就是依据 computeDestination，反向拿到的新的箭头顶点的坐标
    // 其中 200，是 icon 与顶点的间隔，可调整
    let path0 = TMap.geometry.computeDestination(arr[1], du, 200);
    // top1，top2，是画箭头的角度获取，// 因为地图的坐标系中只有【180，-180】所以进行逆时针转换
    // 我这边获得是偏移 40 度，140，220，可调整
    let top1 = this.computeRotaion(computeHeading + 140);
    let top2 = this.computeRotaion(computeHeading + 220);
    // path1，path2 是依据箭头的坐标，预计画的线段长度、以及角度，去获取箭头两边的点位坐标
    let path1 = TMap.geometry.computeDestination(path0, top1, 1200);
    let path2 = TMap.geometry.computeDestination(path0, top2, 1200);
    // console.log("path1", path1);
    // 依据取得到箭头的三点右边，进行绘制，这边也能够绘制覆盖性多边形 index，indexli，可批改，可勾销，只有是不同的 id 即可
    this.polylineLayer.add({
      styleId: "style_blue",
      id: "pl1_" + index + "_" + indexli,
      paths: [path0, path1],
    });
    this.polylineLayer.add({
      styleId: "style_blue",
      id: "pl2_" + index + "_" + indexli,
      paths: [path0, path2],
    });
    // 依据不同长度，做不同的计划，依据长度在 10000 米以上的，我这边做两头的箭头，原理同上 //
    if (computeDistance > 10000) {
      // 先拿到两头的点位坐标
      let pathzhong = TMap.geometry.computeDestination(arr[1],
        du,
        computeDistance / 2
      );
      // path3，path4，是两头箭头两边点位坐标，let path3 = TMap.geometry.computeDestination(pathzhong, top1, 1200);
      let path4 = TMap.geometry.computeDestination(pathzhong, top2, 1200);
      // 在依据三点坐标，进行画线，作出箭头 index，indexli，可批改，可勾销，只有是不同的 id 即可
      this.polylineLayer.add({
        styleId: "style_blue",
        id: "pl3_" + index + "_" + indexli,
        paths: [pathzhong, path3],
      });
      this.polylineLayer.add({
        styleId: "style_blue",
        id: "pl4_" + index + "_" + indexli,
        paths: [pathzhong, path4],
      });
    }
  }
},
// 因为地图坐标的范畴【180，-180】所以进行转化
computeRotaion(heading) {
  let rotation;
  if (heading > 180) {rotation = heading - 360;} else {rotation = heading;}
  return rotation;
}

正文中有残缺的解释，须要急躁去看，也能够依据本身的状况去批改。我这里没有进行封装，然而能够失常的应用，如果你须要多组件调用，，须要本人去封装搞下，我就不在这把我需要封装的拿进去了，毕竟需要不同

心愿多提意见，有更好的倡议，能够留言，虚心学习！

低微的小刘！

关于vue.js:腾讯地图api根据路线画自定义箭头

我遇到的状况：

1、应用腾讯地图画出门路，并在地图上示意方向（也就是箭头指向）

思路

上面我就具体讲下第三种

总结：