标签：carNumber ol 定位导航 5538515.7834814 车辆 霸道 var Openlayers view

场景

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.

标签：carNumber,ol,定位导航,5538515.7834814,车辆,霸道,var,Openlayers,view
来源： https://www.cnblogs.com/badaoliumangqizhi/p/14993694.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。