地图上的两点,计算出两点之间的角度

本文介绍了一种计算地图上两点间角度的方法,使标记图标能够随路径动态调整方向,提升用户体验。通过数学运算确定坐标间的相对位置及角度,适用于各类地图应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

根据两个坐标点,计算出两点之间的角度

最常用的场景:地图上的标记点需要动态的改变角度

例子如下:

假如地图上有一条路线轨迹,你的标记点是一辆车的图标,你的车(标记点)在轨迹上运行的时候,如果不动态更改旋转角度的话,就会如下图所示,显然这用户体验是很差的。

在这里插入图片描述

所以标记点移动的时候,就要算出两点之间的一个角度,然后动态的赋值给地图中标记点的旋转角度参数。

真正的效果应该是这样的

在这里插入图片描述

废话不多说直接上代码


    // 坐标1
	let position1 = {
		lng: 118.109673,
		lat: 24.580435,
	
	}
	// 坐标2
	let position2 = {
		lng: 118.10961,
		lat: 24.580648,
	}
	let valLng = position1.lng - position2.lng;
	let valLat = position1.lat - position2.lat;
	
	// 返回一个绝对值
	let absoluteLng = Math.abs(valLng);
	let absoluteLat = Math.abs(valLat);
	
	// 取得三角形的斜边
	let hypotenuse = Math.hypot(absoluteLng, absoluteLat);
	// 计算弧度
	let radina = Math.acos(absoluteLng / hypotenuse);
	
	// 计算角度
	let angle = Math.floor(radina * 180 / Math.PI);
	
	console.log("两坐标点计算出的角度为:", angle)
	

两点之间的角度算出来了,其实还存在一个问题,就是y轴对称的点,他们计算出的角度是一样的,仔细看下面图中标识的点

在这里插入图片描述

坐标点1与坐标点2-A的角度 = 坐标1与坐标点2-B的角度

小提示:

坐标点2 越接近X轴,计算出的角度就越小;
坐标点2 越接近Y轴,计算出的角度就越大;

解决问题:那么就需要用到坐标系中的象限了,如下图

在这里插入图片描述

注意看下面的两个例子,看是如何计算的


	/**
	* 例子1
	* 旋转角度区间: 0~360* 标记点的方向: 由东向西 
	*/
	
    // 计算出标记点真正旋转的角度
	if (valLng > 0) {
		if (valLat > 0) {
			// 第三象限
			angle = 360 - angle;
		} else {
			// 第二象限
			angle = angle;
		}
	} else {
		if (valLat > 0) {
			//第四象限
			angle = 180 + angle;
		} else {
			// 第一象限
			angle = 180 - angle;
		}
	}
	console.log("坐标点真正旋转的角度:", angle)


/**
	* 例子2
	* 旋转角度区间: 0~360* 标记点的方向: 由西向东 
	*/
	
    // 计算出标记点真正旋转的角度
	if (valLng > 0) {
		if (valLat > 0) {
			// 第三象限
			angle = 180 - angle;
		} else {
			// 第二象限
			angle = 180 + angle;
		}
	} else {
		if (valLat > 0) {
			//第四象限
			angle = angle;
		} else {
			// 第一象限
			angle = 360 - angle;
		}
	}
	console.log("坐标点真正旋转的角度:", angle)
	

注意:坐标点方向不同、角度区间不同、旋转的角度(上述计算是默认顺时针),象限中计算也不同,具体根据自己的需求来。

下面是整个计算的完整代码示例:



	// 坐标1
	let position1 = {
		lng: 118.112193,
		lat: 24.580612,

	}
	// 坐标2
	let position2 = {
		lng: 118.112494,
		lat: 24.580883
	}
	let valLng = position1.lng - position2.lng;
	let valLat = position1.lat - position2.lat;

	// 返回一个绝对值
	let absoluteLng = Math.abs(valLng);
	let absoluteLat = Math.abs(valLat);

	// 取得三角形的斜边
	let hypotenuse = Math.hypot(absoluteLng, absoluteLat);
	// 计算弧度
	let radina = Math.acos(absoluteLng / hypotenuse);

	// 计算角度
	let angle = Math.floor(radina * 180 / Math.PI);

	console.log("两坐标点计算出的角度为:", angle)

	// 计算出标记点真正旋转的角度
	if (valLng > 0) {
		if (valLat > 0) {
			// 第三象限
			angle = 360 - angle;
		} else {
			// 第二象限
			angle = angle;
		}
	} else {
		if (valLat > 0) {
			//第四象限
			angle = 180 + angle;
		} else {
			// 第一象限
			angle = 180 - angle;
		}
	}
	console.log("坐标点真正旋转的角度:", angle)

好了,看不懂的我建议多看几次,仔细慢慢理解一下,其实你会发现很简单,有什么问题或者有更好的方法,欢迎留言指出 ~ / ~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值