百度地图自定义折线覆盖物，控制旋转方向

最新推荐文章于 2024-09-04 16:11:46 发布

heroboyluck

最新推荐文章于 2024-09-04 16:11:46 发布

阅读量1.9k

点赞数 4

分类专栏：相关问题解决方案文章标签：百度地图自定义折线覆盖物覆盖物指向角度三角形角度计算

本文链接：https://blog.csdn.net/heroboyluck/article/details/107074609

版权

相关问题解决方案专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用百度地图，路线规划是，自定义路线绘制+方向标识。

主要说明：

调用百度地图web服务API路线规划（为了拿到路线规划的途径点）
使用Polyline进行路线绘制。
Icon 进行自定义图标；控制图标中心偏移量{anchor:<Size>}。

Marker进行覆盖物叠加：

new BMap.Marker(<Point>,{
	icon:<Icon>,
	rotation:<Number>
});

计算角度

主要的问题在于如何计算，根据起至终点坐标（经度、纬度）值差，构建三角形，计算邻边角角度。

初始图标的指向是西向东
在这里插入图片描述

经纬度：南纬->北纬递增；西经->东经递增

在这里插入图片描述

角度计算

	// 确定方向，用于旋转图标角度
	let angle = function (start,end) {
		// 通过 a、b 确定角度所处的象限
	    let a = start.lng - end.lng,
	        b = start.lat - end.lat;
	    // 
	    let a_c = Math.abs(a),
	        b_c = Math.abs(b);
	    // 获取得三角形的斜边 Math.hypot();
	    let c = Math.hypot(a_c,b_c);
	    // 计算弧度
	    let radina = Math.acos(a_c/c);
	    // 计算角度
	    let angleVal = Math.floor(radina*180/Math.PI);
	    // 处理最终需要旋转的角度
	    if(a > 0){
	        // 第二、三象限
	        if(b>0){
	            // 三
	            angleVal = 90 + 90 - angleVal;
	        }else {
	            angleVal = -180 + angleVal;
	        }
	    }else{
	        // 一、四象限
	            if(b>0){
	            // 四
	            angleVal = angleVal;
	        }else{
	            // 一
	            angleVal = - angleVal;
	        }
	    }
	    return angleVal;
	};

自定义图标、添加覆盖物

// 挑选坐标点作为导向指标
let icon = new BMap.Icon(contextPath+"/img/guide.png",new BMap.Size(30,30),{
    anchor:new BMap.Size(15,15)
});
// 添加覆盖物
let marker = new BMap.Marker(points[mid],{icon:icon,rotation:angle(startP,endP)});
map.addOverlay(marker);