Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度)

场景

Openlayers中使用animate实现车辆定位导航效果(以当前车辆为中心移动)：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118634344

上面实现的导航效果，如果是车辆行驶的点位轨迹X和Y都会改变就会这样

 

怎样实现车辆的图片带旋转角度，即车辆行驶带转角的效果。

要实现的效果如下

 

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先Style的image有个rotation属性，用来设置图片的旋转角度

 

要计算图片旋转的角度，就要知道车辆下次和上次的点位去计算角度。

计算角度用到JS中的Math.atan2这个函数

Math.atan2()

返回从原点(0,0)到(x,y)点的线段与x轴正方向之间的平面角度(弧度值)，也就是Math.atan2(y,x)

atan2 方法返回一个 -pi 到 pi 之间的数值，表示点 (x, y) 对应的偏移角度。这是一个逆时针角度，以弧度为单位，正X轴和点 (x, y) 与原点连线 之间。注意此函数接受的参数：先传递 y 坐标，然后是 x 坐标。

atan2 接受单独的 x 和 y 参数，而 atan 接受两个参数的比值。

由于 atan2 是 Math 的静态方法，所以应该像这样使用：Math.atan2()，而不是作为你创建的 Math 实例的方法。

示例

Math.atan2(90, 15) // 1.4056476493802699
Math.atan2(15, 90) // 0.16514867741462683

Math.atan2( ±0, -0 )               // ±PI.
Math.atan2( ±0, +0 )               // ±0.
Math.atan2( ±0, -x )               // ±PI for x > 0.
Math.atan2( ±0, x )                // ±0 for x > 0.
Math.atan2( -y, ±0 )               // -PI/2 for y > 0.
Math.atan2( y, ±0 )                // PI/2 for y > 0.
Math.atan2( ±y, -Infinity )        // ±PI for finite y > 0.
Math.atan2( ±y, +Infinity )        // ±0 for finite y > 0.
Math.atan2( ±Infinity, x )         // ±PI/2 for finite x.
Math.atan2( ±Infinity, -Infinity ) // ±3*PI/4.
Math.atan2( ±Infinity, +Infinity ) // ±PI/4.

所以这里需要计算模拟数据下个坐标相对与上个坐标的角度值

            //定义角度
            var rotation = 0;
            //如果是最后一个点
            if (index == this.positionData.length - 1) {
                rotation = setAngle(this.positionData[index], this.positionData[index]);
            } else {
                rotation = setAngle(this.positionData[index], this.positionData[index + 1]);
            }

其中this.positionData是模拟定位坐标数据

        //定位数据源
        var positionData = [{
                x: '-11560139.941628069',
                y: '5538515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11560039.941628069',
                y: '5537515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11559039.941628069',
                y: '5536515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11558039.941628069',
                y: '5535515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11557039.941628069',
                y: '5534515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11556039.941628069',
                y: '5533515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11555039.941628069',
                y: '5532515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11554039.941628069',
                y: '5531515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11553039.941628069',
                y: '5530515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11552039.941628069',
                y: '5529515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11551039.941628069',
                y: '5528515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11550039.941628069',
                y: '5527515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11549039.941628069',
                y: '5526515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11548039.941628069',
                y: '5525515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11547039.941628069',
                y: '5524515.7834814',
                carNumber: '霸道的程序猿'
            },
            {
                x: '-11546039.941628069',
                y: '5523515.7834814',
                carNumber: '霸道的程序猿'
            }

        ];

计算角度时调用了

        // 点位转角
        function setAngle(first, second) {
            var dx = second.x - first.x
            var dy = second.y - first.y
            var rotation = Math.atan2(dy, dx)
            return rotation
        }

然后在feature的style中的image设置rotation

            var style = new ol.style.Style({
                image: new ol.style.Icon({
                    scale: 0.8,
                    src: './icon/car.png',
                    anchor: [0.48, 0.52],
                    //设置旋转角度
                    rotation: -rotation,
                }),
                text: new ol.style.Text({
                    font: 'normal 12px 黑体',
                    // // 对其方式
                    textAlign: 'center',
                    // 基准线
                    textBaseline: 'middle',
                    offsetY: -35,
                    offsetX: 0,
                    backgroundFill: new ol.style.Stroke({
                        color: 'rgba(0,0,255,0.7)',
                    }),
                    // 文本填充样式
                    fill: new ol.style.Fill({
                        color: 'rgba(236,218,20,1)'
                    }),
                    padding: [5, 5, 5, 5],
                    text: `${item.carNumber}`,
                })
            });

这里设置的的rotation为负的，取决于车辆图标车头的朝向是左还是右。