场景

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)来定制此行为。

参数说明：

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.

Openlayers中使用animate实现车辆定位导航效果(以当前车辆为中心移动)相关推荐

Openlayers中使用Image的rotation实现车辆定位导航带转角(判断车辆图片旋转角度)
场景 Openlayers中使用animate实现车辆定位导航效果(以当前车辆为中心移动): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/det ...
Vue CSS3或者npmjs网站中的animate.css实现动画效果
cartoonvue.vue(CSS3)支持一个动画 <template><div><h2>动画效果 ...
仿OPPO R7 plus中的时钟应用的导航效果
效果图: 效果基本上和oppo上的效果一样,应为图片原因少了一些立体效果. MainActivity: package com.example.chl.myapplication;import and ...
Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动
场景 Vue+Openlayer使用overlay实现弹窗弹出显示与关闭: Vue+Openlayer使用overlay实现弹窗弹出显示与关闭_BADAO_LIUMANG_QIZHI的博客-CSDN博 ...
openLayers中实现面要素立体化效果
openLayers中实现面要素立体化效果一.面要素立体化的效果实现方法二.实现过程及效果展示三.总结 ** 一.面要素立体化的效果实现方法 ** 对于面要素,想要实现立体效果,之前写了一篇博客 ...
假想面试题：现在有一串字符串2, 2, 3……，其中字符串中的数字类似于Word文档中的标题级别，最终效果是让它们按照Word文档导航窗格中的标题级别格式进行展示
目录一.问题二.答案 1.依赖 2.代码 3.结果 4.思路分析三.拓展 1.反向思维 2.引用数据类型四.实战 1.背景 2.实战模拟 2.1.代码 2.2.结果一.问题现在有一串字符串 ...
关于GPS 车辆定位导航中的投影变换
GPS 采用 WGS-84 椭球地理坐标, 用经.纬度和大地系来表示3 维空间信息.因此,GPS 车辆定位导航监控中心接收到的只是经.纬度信息, 必须通过高斯投影将其转换成高斯坐标.转换公式如下: 转 ...
仿抖音底部导航效果（二）
继续实现仿抖音底部导航今天要实现效果如下图首先在原基础的布局中加入一个ImageView <LinearLayoutandroid:layout_width="wrap_conte ...
读书笔记(2) OpenLayers中的图层
OpenLayers有多个不同的图层类,每一个都可以连接到不同的地图服务器.例如通过Layer.WMS类可以连接到WMS地图服务器,通过Layer.Google类可以连接到谷歌地图服务器.OpenLa ...

Openlayers中使用animate实现车辆定位导航效果(以当前车辆为中心移动)

场景

实现

Openlayers中使用animate实现车辆定位导航效果(以当前车辆为中心移动)相关推荐

最新文章

热门文章