場景

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.16514867741462683Math.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.xvar dy = second.y - first.yvar 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為負的，取決于車輛圖標車頭的朝向是左還是右。

總結

以上是生活随笔為你收集整理的Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。