場景

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

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

在上面的基礎上實現地圖上根據坐標信息，以車輛圖標為中心向前移動，效果如下

?

注：

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

實現

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

Openlayers中點擊地圖獲取坐標并輸出：

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

參考如上獲取一組坐標作為數據源。

??????? //定位數據源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對象中layers的最右邊，代表顯示在最上層

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

然后寫一個定時器，一秒執行一次，從上面定位數據源中依次取點，

并以當前點為中心

??????? //定時器循環模擬定位效果var index = 0;setInterval(() => {//坐標數據到頭了 就重新開始if(index>14){index = 0;}//根據索引獲取數據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',// 基準線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}`,})});//以當前點為中心this.flyToPoint([Number(item.x), Number(item.y)])//設置樣式feature.setStyle(style);//添加feturethis.positonSource.addFeature(feature)//移到下個點index++;},1000);

其中設置以當前點位為中心的方法

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

中用到了view的animate

animate：

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

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

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

參數說明：

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.

總結

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

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