Openlayers样式图标角度计算问题

1.问题背景:
一般在写轨迹回放的时候,车辆行进方向会有一个朝向的问题,这个需要实时计算,不断修正车子前进方向。
2.openlayers图片样式(ol.style.Icon),角度是按照顺时针旋转的。


文档说明,角度是按照顺时针旋转的

3.加载小车图标测试
(1)初始小车图标朝向


小车图标初始朝向是朝东的

(2)把小车加载到地图中
下车加载到地图中,他的图标方向和图标本身方向是一致的

(3)改变小车朝向,让他顺着行进路线。(如何计算?)
3.1)先把以小车起点为原点建立一个坐标系,求出终点和起点的差值。
建立坐标系,并根据不同象限,列出差值的大于还是小于0

3.2)以第二象限为例,求出当前线段的角度。
计算角度

3.3)由此可以推论出,其余四个象限,角度计算方法,注意因为计算时用的是反正切函数所以弧度值为-Math.PI/2到Math.PI/2,所以在第三四象限时需要注意。
4.角度计算方法
function setAngle(first, second) {
            let y = second[1] - first[1];
            let x = second[0] - first[0];
            let radAngle = Math.atan(y / x);
            if (y <= 0 && x >= 0) {//第二象限
                console.log('第二象限');
                radAngle = -radAngle;
            } else if (x >= 0 && y >= 0) {//第一象限
                radAngle = -radAngle;
                console.log('第一象限');
            } else if (x <= 0 && y >= 0) {//第四象限
                radAngle = Math.PI - radAngle;
                console.log('第四象限');
            } else if (x <= 0 && y <= 0) {//第三象限
                radAngle = Math.PI - radAngle;
                console.log('第三象限');
            }
            return radAngle;
        }

你可能感兴趣的:(Openlayers样式图标角度计算问题)