場景

Openlayers中使用animate實現(xiàn)車輛定位導(dǎo)航效果(以當(dāng)前車輛為中心移動)：

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

上面實現(xiàn)的導(dǎo)航效果，如果是車輛行駛的點位軌跡X和Y都會改變就會這樣

?

怎樣實現(xiàn)車輛的圖片帶旋轉(zhuǎn)角度，即車輛行駛帶轉(zhuǎn)角的效果。

要實現(xiàn)的效果如下

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

首先Style的image有個rotation屬性，用來設(shè)置圖片的旋轉(zhuǎn)角度

?

要計算圖片旋轉(zhuǎn)的角度，就要知道車輛下次和上次的點位去計算角度。

計算角度用到JS中的Math.atan2這個函數(shù)

Math.atan2()

返回從原點(0,0)到(x,y)點的線段與x軸正方向之間的平面角度(弧度值)，也就是Math.atan2(y,x)

atan2 方法返回一個 -pi 到 pi 之間的數(shù)值，表示點 (x, y) 對應(yīng)的偏移角度。這是一個逆時針角度，以弧度為單位，正X軸和點 (x, y) 與原點連線 之間。注意此函數(shù)接受的參數(shù)：先傳遞 y 坐標(biāo)，然后是 x 坐標(biāo)。

atan2 接受單獨的 x 和 y 參數(shù)，而 atan 接受兩個參數(shù)的比值。

由于 atan2 是 Math 的靜態(tài)方法，所以應(yīng)該像這樣使用：Math.atan2()，而不是作為你創(chuàng)建的 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.

所以這里需要計算模擬數(shù)據(jù)下個坐標(biāo)相對與上個坐標(biāo)的角度值

??????????? //定義角度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是模擬定位坐標(biāo)數(shù)據(jù)

??????? //定位數(shù)據(jù)源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: '霸道的程序猿'}];

計算角度時調(diào)用了

??????? // 點位轉(zhuǎn)角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設(shè)置rotation

??????????? var style = new ol.style.Style({image: new ol.style.Icon({scale: 0.8,src: './icon/car.png',anchor: [0.48, 0.52],//設(shè)置旋轉(zhuǎn)角度rotation: -rotation,}),text: new ol.style.Text({font: 'normal 12px 黑體',// // 對其方式textAlign: 'center',// 基準(zhǔn)線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}`,})});

這里設(shè)置的的rotation為負(fù)的，取決于車輛圖標(biāo)車頭的朝向是左還是右。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。