腾讯地图JS API实现带方向箭头的线路Polyline

最近产品提出一个需求，在我们使用的腾讯地图上为线路polyline添加线路方向。例如下图所示：

查找腾讯地图JS API提供的API，没有找到对应的支持，询问负责腾讯地图的人也得到了同样的答案，即地图JS API不支持线路画方向。于是否就利用地图的Marker类配合旋转来实现这个功能。

实现原理

因为是利用Marker来实现Polyline带方向箭头功能，所以要根据线路不同局部的具体走向来旋转Marker的Icon，从而实现该功能。

另外，我们需要知道:

Marker的旋转方向是跟时针方向保持一致的，角度为正表示顺时针旋转，负表示逆时针旋转。

腾讯地图的JS API虽然没有提供画箭头的支持，但是可喜的是，腾讯地图提供了一个类qq.maps.geometry.spherical,它提供了一些方法用于计算面积、角度和距离，具体可以参考这里。

其中，对于我们实现方向箭头有用的是以下两个api：

• computeHeading(from:LatLng, to:LatLng): 返回从一个坐标到另一个坐标的航向。航向是指从一个坐标指向另一个坐标的向量与正北方向的夹角，范围为[-180,180)。

• computeDistanceBetween(from:LatLng, to:LatLng, radius?:Number): 返回两坐标点间的距离。

结合上面所描述的，具体的实现原理图如下图展示：

具体实现步骤：

• 利用computeHeading方法计算航向，然后由其计算Marker旋转的角度。

注意：

由航向计算Marker旋转角度，需要根据具体的Marker的Icon图形来具体分析，不能一概而论。比如本人项目使用的Marker icon图为水平方向的箭头，如下图：

那么，根据该icon图可以计算对应的marker旋转角度，具体计算规则如下图所示。其它方向的Icon可以推算出对应的计算规则。

• 利用computeDistanceBetween方法计算两坐标点中间位置的经纬度

• 创建Marker实例，并设置其Icon和用marker实例的setRotation方法来旋转角度

注意：

有官方声明marker实例的setRotation方法的旋转角度范围为0~360，所以根据计算的旋转角度必须为这一范围，否则可能会出现图形走样的情况。

实现代码

正如上面描述的实现原理，下面即是实现为Polyline实例添加方向箭头Marker的实现代码：

function setIcon(marker){
 var size = new qq.maps.Size(9, 8); //marker icon图片大小为18px * 16px, 等比例缩放
 var anchor = new qq.maps.Point(5, 4); //经纬度点在图标中的位置点
 var image = require('imgs/arrow.png');
 var icon = new qq.maps.MarkerImage(image, size, undefined, anchor, size);
 marker.setIcon(icon);
}
//画marker
function addMarkers(lat, lng, opts){
 var position = new qq.maps.LatLng(lat, lng);
 var defaultOps = {
     map: mapInstance, //mapInstance为对应的qq map实例
     position,
     zIndex: 8,
     visible: true,
     draggable: false
  }
  var options = Object.assign({}, defaultOpts, opts || {});
  var marker = new qq.maps.Marker(options);
  setIcon(marker);
  return marker
}
//计算线路方向箭头旋转的方向,heading为两个经纬度点之间的航向(两点之间与正北方向的夹角)，其范围为[-180, 180)
function computeRotaion(heading){
 let rotation;
  if(heading < 0) {
    rotation = 270 + heading;
  }else {
    rotation = heading - 90;
  }
  return rotation
}
//为polyline添加方向marker
function addArrowMarkers(polyline){
      var defaultOps = {
        cursor: 'normal',
        zIndex: polyline.getZIndex() + 1,
        clickable: false,
        draggable: false
      };

      var linePoint = polyline.getPath();//线的经纬度坐标
      var arrowCount= linePoint.length;
      for(let i = 1; i < arrowCount; i+=2){//不是每两个点之间都画箭头，而是每隔一个间隔画一个箭头
        let pixelStart = linePoint.getAt(i-1);
        let pixelEnd = linePoint.getAt(i);
        let heading, rotation, arrowLatLng, marker;
        let spherical = qq.maps.geometry.spherical;
        let distance = spherical.computeDistanceBetween(pixelStart, pixelEnd); //计算两经纬度坐标件的距离

        if(distance <= 15) {//距离太近小于15m的两经纬度坐标点间不画方向
          continue;
        }

        heading = spherical.computeHeading(pixelStart, pixelEnd);//两经纬度坐标点之间的航向
        //计算两经纬度坐标点中间位置的经纬度
        arrowLatLng = spherical.computeOffsetOrigin(pixelEnd, distance/2, heading);

        marker = addMarker(arrowLatLng.lat, arrowLatLng.lng, defaultOps);
        rotation = computeRotaion(heading); //由两坐标点之间的航向计算marker要旋转的角度
        marker.setRotation(rotation);
      }
    }

至此，带方向的polyline线路就带有方向箭头了，可以很清晰的看出线路的走向了。