场景

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

        //定位图层的Source
        var 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);
                //添加feture
                this.positonSource.addFeature(feature)
                //移到下个点
                index++;
        },1000);

其中设置以当前点位为中心的方法

        //设置以当前点位为中心
        function flyToPoint(point) {
            var to = point
            var view = this.map.getView()
            view.animate({
                center: to,
                duration: 45
            })
        }

中用到了view的animate

animate：

动画视图。视图的中心、缩放(或分辨率)和旋转可以通过动画实现视图状态之间的平滑过渡。例如，动画视图到一个新的缩放级别:

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

默认情况下，动画持续一秒，并使用入出缓动。您可以通过包含duration(毫秒)和easing选项(参见module:ol/easing)来定制此行为。

参数说明：

Name Type Description

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.

Name	Type	Description
`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.