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

发布时间：2017-07-13 15:19:34.107作者：IT网络文摘

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

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

查找腾讯地图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): 返回两坐标点间的距离。

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

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

具体实现步骤：

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

注意：

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

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

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

photoshop培训,电脑培训,电脑维修培训,移动软件开发培训,网站设计培训,网站建设培训

利用computeDistanceBetween方法计算两坐标点中间位置的经纬度
创建Marker实例，并设置其Icon和旋转角度

实现代码

正如上面描述的实现原理，下面即是实现为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); }//画markerfunction 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;
  switch(true){
    case heading < -90:
      rotation = 270 + heading;
      break;
    case heading >= -90 && heading < 0 :
      rotation = -(heading - 90);
      break;
    case heading >= 0 && heading <= 90 || heading > 90:
      rotation = heading - 90;
      break;
  }
  return rotation}//为polyline添加方向markerfunction 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 rotation, arrowLatLng, marker;
        let spherical = qq.maps.geometry.spherical;
        let distance = spherical.computeDistanceBetween(pixelStart, pixelEnd); //计算两经纬度坐标件的距离

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

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

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

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

分类: 其他

http://www.cnblogs.com/wonyun/p/7152017.html

分类导航

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

实现原理

实现代码

网友评论

更多精彩分享