場景

Openlayers中加載Geoserver切割的EPSG:900913離線瓦片地圖并顯示：

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

在上面的基礎(chǔ)上實現(xiàn)地圖上根據(jù)坐標(biāo)信息，以車輛圖標(biāo)為中心向前移動，效果如下

?

注：

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

實現(xiàn)

為了獲取地圖上的點位數(shù)據(jù)，可以先在地圖上取一組點。

Openlayers中點擊地圖獲取坐標(biāo)并輸出：

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

參考如上獲取一組坐標(biāo)作為數(shù)據(jù)源。

??????? //定位數(shù)據(jù)源var positionData = [{x: '-11560139.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11560039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11559039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11558039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11557039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11556039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11555039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11554039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11553039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11552039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11551039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11550039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11549039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11548039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11547039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'},{x: '-11546039.941628069',y: '5538515.7834814',carNumber: '霸道的程序猿'}];

然后定義打點車輛顯示的圖層和Source

??????? //定位圖層的Sourcevar positonSource = new ol.source.Vector({features: []});// 定位圖層var positionLayer = new ol.layer.Vector({source: positonSource});

然后將此圖層放在Map對象中l(wèi)ayers的最右邊，代表顯示在最上層

??????? var map = new ol.Map({layers: [layer, pointLayer, lineVector ,positionLayer],target: 'map',view: view});

然后寫一個定時器，一秒執(zhí)行一次，從上面定位數(shù)據(jù)源中依次取點，

并以當(dāng)前點為中心

??????? //定時器循環(huán)模擬定位效果var index = 0;setInterval(() => {//坐標(biāo)數(shù)據(jù)到頭了 就重新開始if(index>14){index = 0;}//根據(jù)索引獲取數(shù)據(jù)var item = this.positionData[index];//清除上次的if(this.positonSource){this.positonSource.clear();}var feature = new ol.Feature({geometry: new ol.geom.Point([Number(item.x), Number(item.y)])});var style = new ol.style.Style({image: new ol.style.Icon({scale: 0.8,src: './icon/car.png',anchor: [0.48, 0.52]}),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}`,})});//以當(dāng)前點為中心this.flyToPoint([Number(item.x), Number(item.y)])//設(shè)置樣式feature.setStyle(style);//添加feturethis.positonSource.addFeature(feature)//移到下個點index++;},1000);

其中設(shè)置以當(dāng)前點位為中心的方法

??????? //設(shè)置以當(dāng)前點位為中心function flyToPoint(point) {var to = pointvar view = this.map.getView()view.animate({center: to,duration: 45})}

中用到了view的animate

animate：

動畫視圖。視圖的中心、縮放(或分辨率)和旋轉(zhuǎn)可以通過動畫實現(xiàn)視圖狀態(tài)之間的平滑過渡。例如，動畫視圖到一個新的縮放級別:

view.animate({zoom: view.getZoom() + 1});

默認情況下，動畫持續(xù)一秒，并使用入出緩動。您可以通過包含duration(毫秒)和easing選項(參見module:ol/easing)來定制此行為。

參數(shù)說明：

NameTypeDescription

var_args

Animation options. Multiple animations can be run in series by passing multiple options objects. To run multiple animations in parallel, call the method multiple times. An optional callback can be provided as a final argument. The callback will be called with a boolean indicating whether the animation completed without being cancelled. NameTypeDescription center module:ol/coordinate~Coordinate The center of the view at the end of the animation. zoom number The zoom level of the view at the end of the animation. This takes precedence over?resolution. resolution number The resolution of the view at the end of the animation. If?zoom?is also provided, this option will be ignored. rotation number The rotation of the view at the end of the animation. anchor module:ol/coordinate~Coordinate Optional anchor to remain fixed during a rotation or resolution animation. duration number?(defaults to 1000) The duration of the animation in milliseconds. easing function The easing function used during the animation (defaults to?module:ol/easing~inAndOut). The function will be called for each frame with a number representing a fraction of the animation's duration. The function should return a number between 0 and 1 representing the progress toward the destination state.

總結(jié)

以上是生活随笔為你收集整理的Openlayers中使用animate实现车辆定位导航效果(以当前车辆为中心移动)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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