欢迎光临
一个有态度、有温度的分享型博客

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

示例的实现使用了两个文件,一个是百度地图的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; }

参考:

  1. 百度地图JavaScript AP
  2. 百度地图API示例

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址