 

当前位置：Ddmit  后端  正文

百度地图实现标注沿弧线轨迹移动

2019-02-11 分类：后端阅读(2727) 评论(0) 赞(0)

示例的实现使用了两个文件，一个是百度地图的api，一个是百度的弧线类开源库CurveLine.js。

从百度的弧线类库-BMapLib.CurveLine类参考可以发现，文件只提供了一个实现弧线的实例化类BMapLib.CurveLine(Array, opts)，但是CurveLine.js文件的代码中是有根据两个点，获取两个点所形成的弧线上的所有点的数组方法的function getCurveByTwoPoints(obj1, obj2)，直接把它拷贝过来。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <title>百度地图弧线轨迹图</title>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的api密钥"></script>
  <script type="text/javascript" src="CurveLine.js"></script>
  <script type="text/javascript" src="CurveLinePatch.js"></script>
  <style type="text/css">
    html,body{
      width:100%;
      height:100%;
      margin:0;
      overflow:hidden;
      font-family:"微软雅黑";
    }
  </style>
</head>
<body>
  <div style="width:100%;height:100%;border:1px solid gray" id="container"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图初始化，定义变量
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(118.454, 32.955), 6);
map.enableScrollWheelZoom();
var curve;//一条弧线
var trainIcon = new BMap.Icon("icon30-train-left.png", new BMap.Size(30,30));//火车图标
var trainMark;  // 火车标注
var vectorBOArrow;//箭头图标
var moveInterval;//定时移动
var clearFlag = false;
var count = 0;//当前箭头运动的位置点
var totalPoint;//弧线上所有点的数量
var pointArray;//两个点确定的弧线上的所有点的数组

var startPointX = 116.432045;
var startPointY = 39.910683;
var endPointX = 120.129721;
var endPointY = 30.314429;

var pointA = new BMap.Point(startPointX,startPointY);  // 创建点坐标A
var pointB = new BMap.Point(endPointX,endPointY);  // 创建点坐标B

var trainPointArray =[];
trainPointArray.push(pointA);
trainPointArray.push(pointB);

function getRandomTwoPoints(){
  var twoArray = [];
  twoArray.push(pointA);
  twoArray.push(pointB);

  return twoArray; 
}

/*为指定数组中的点更改图标为小火车*/
function batchAddTrainIcon(arr){
    if(arr!=null && arr.length>0){
       arr.forEach(function(value, index){
          var trainMark = new BMap.Marker(value,{icon:trainIcon});
          map.addOverlay(trainMark);// 将标注添加到地图中
          //监听标注点击事件
          trainMark.addEventListener("click", function(e){ 
            console.log(e.target.getPosition().lng);
            console.log(e.target.getPosition().lat);
            if(clearFlag){
              clearFlag = false;
              drawCurveLine(getRandomTwoPoints());
              initLineMap();
            }else{
              clearFlag = true;
              clearInterval(moveInterval);   
              map.removeOverlay(curve);    
              map.removeOverlay(vectorBOArrow);
            }
          });
       });
    }
}

/*根据两个点画弧线*/
function drawCurveLine(twoPoints){
  curve = new BMapLib.CurveLine(twoPoints, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5}); //创建弧线对象
  map.addOverlay(curve); //添加到地图中
}

/*初始化弧线轨迹图*/
function initLineMap(){
  totalPoint = getCurveByTwoPoints(pointA,pointB).length;
  pointArray = getCurveByTwoPoints(pointA,pointB);
  count = 0;
  vectorBOArrow = new BMap.Marker(pointArray[count], {
      // 初始化方向向上的开放式箭头
      icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, {
      scale: 1,
      strokeWeight: 1,
      rotation: 180,
      fillColor: 'gold',
      fillOpacity: 0.8
      })
  }); // 创建箭头标注
  map.addOverlay(vectorBOArrow);// 将箭头标注添加到地图中
  moveInterval = setInterval(goWay,500); 
}

/*让箭头移动*/
function goWay(){
   map.removeOverlay(vectorBOArrow);
   count = count+1;
     if(count < totalPoint){
      vectorBOArrow = new BMap.Marker(pointArray[count], {
        // 初始化方向向上的开放式箭头
        icon: new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, {
        scale: 1,
        strokeWeight: 1,
        rotation: 180,
        fillColor: 'gold',
        fillOpacity: 0.8
        })
      }); // 创建标注
     map.addOverlay(vectorBOArrow);// 将标注添加到地图中
   }

   if(count >=totalPoint){
       count =0;
   }
}

batchAddTrainIcon(trainPointArray);
drawCurveLine(getRandomTwoPoints());
initLineMap();

</script>

CurveLinePatch.js文件


/*根据两个点，获取这两个点所形成的弧线上的所有点的数组*/

function getCurveByTwoPoints(obj1, obj2) {
    if (!obj1 || !obj2 || !(obj1 instanceof BMap.Point) || !(obj2 instanceof BMap.Point)) {
      return null;
    }

    var B1 = function(x) {
      return 1 - 2 * x + x * x;
    };
    var B2 = function(x) {
      return 2 * x - 2 * x * x;
    };
    var B3 = function(x) {
      return x * x;
    };

    curveCoordinates = [];

    var count=30; // 曲线是由一些小的线段组成的，这个表示这个曲线所有到的折线的个数
    var isFuture=false;
    var t, h, h2, lat3, lng3, j, t2;
    var LnArray = [];
    var i = 0;
    var inc = 0;

    if (typeof(obj2) == "undefined") {
      if (typeof(curveCoordinates) != "undefined") {
        curveCoordinates = [];
      }
      return;
    }

    var lat1 = parseFloat(obj1.lat);
    var lat2 = parseFloat(obj2.lat);
    var lng1 = parseFloat(obj1.lng);
    var lng2 = parseFloat(obj2.lng);

    // 计算曲线角度的方法
    if (lng2 > lng1) {
      if (parseFloat(lng2-lng1) > 180) {
        if (lng1 < 0) {
          lng1 = parseFloat(180 + 180 + lng1);
        }
      }
    }

    if (lng1 > lng2) {
      if (parseFloat(lng1-lng2) > 180) {
        if (lng2 < 0) {
          lng2 = parseFloat(180 + 180 + lng2);
        }
      }
    }
    j = 0;
    t2 = 0;
    if (lat2 == lat1) {
      t = 0;
      h = lng1 - lng2;
    } else if (lng2 == lng1) {
      t = Math.PI / 2;
      h = lat1 - lat2;
    } else {
      t = Math.atan((lat2 - lat1) / (lng2 - lng1));
      h = (lat2 - lat1) / Math.sin(t);
    }
    if (t2 == 0) {
      t2 = (t + (Math.PI / 5));
    }
    h2 = h / 2;
    lng3 = h2 * Math.cos(t2) + lng1;
    lat3 = h2 * Math.sin(t2) + lat1;

    for (i = 0; i < count + 1; i++) {
      curveCoordinates.push(new BMap.Point(
        (lng1 * B1(inc) + lng3 * B2(inc)) + lng2 * B3(inc),
        (lat1 * B1(inc) + lat3 * B2(inc) + lat2 * B3(inc))
      ));
      inc = inc + (1 / count);
    }
    return curveCoordinates;
}

参考：

赞(0)

未经允许不得转载：Ddmit » 百度地图实现标注沿弧线轨迹移动

分享到

相关推荐

评论抢沙发