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為負的，取決於車輛圖標車頭的朝向是左還是右。