vue使用openlayers实现移动点动画
更新时间:2020年9月24日 16:39 点击:2276
本文实例为大家分享了vue使用openlayers实现移动点动画的具体代码,供大家参考,具体内容如下
做项目时,本来打算仿照官网的Example中动画制作,引入vue中后,发现它引用的库函数一直报错,最后我去vue中安装的依赖库中去查找这个函数,果然没有。也就是说官方例子使用的库和我安装的OL库存在一定差异。
后来我还是用笨方法去解决了,最终效果如下:
总体思路是将移动目标实例一个Overlay对象,然后将如图5个经纬度点没两点之间分割成多个(200个),之后通过定时器不断setPositon。
代码如下:
<template> <div> <div id="map"/> <div id="geo-marker"> <img :src="myplanImg" > </div> </div> </template> <script> // import * as myol from '@/views/openstreetmap/openlayerstools.js' // import img from '@/assets/images' import 'ol/ol.css' import { Map, View, Feature } from 'ol' import * as layer from 'ol/layer.js' import * as source from 'ol/source.js' import * as geom from 'ol/geom.js' import * as style from 'ol/style.js' import Overlay from 'ol/Overlay.js' import TileLayer from 'ol/layer/Tile' import { deepclone } from '@/utils/index.js' import myplanImg from '@/../static/images/船载应急通信系统.png' // import * as myol from '@/views/openstreetmap/animation.js' export default { data() { return { // a simulated path path: [ [115.6200, 14.82], [112.79, 14.82], [114.6636, 18.2977], [111.6870, 18.8970], [110.3014, 15.0630] ], // 模拟路径 pathIndex: 0, // 路径点索引 marker: null,//移动点 splitNumber: 200, // 每两个经纬度之间的分割点 setIntervalTime: 30, // 移动点间隔时间 myplanImg: myplanImg, // 移动点的图片 helpTooltipElement: null, // 平台信息div helpTooltip: null // 平台信息overlay } }, created() { this.analysisPath(this.splitNumber) }, mounted() { this.initSeamap() }, methods: { initSeamap: function() { this.pathIndex = this.path.length - 1 var sourceFeatures = new source.Vector() var layerFeatures = new layer.Vector({// 两端点Feature source: sourceFeatures }) var lineString = new geom.LineString([]) var layerRoute = new layer.Vector({// 两点之间的连线 source: new source.Vector({ features: [ new Feature({ geometry: lineString }) ] }), style: [ new style.Style({ stroke: new style.Stroke({ width: 3, color: 'rgba(0, 0, 0, 1)', lineDash: [0.1, 5] }), zIndex: 2 }) ], updateWhileAnimating: true }) this.global.map = new Map({ target: 'map', view: new View({ projection: 'EPSG:4326', center: [109.8, 18.4], zoom: 7, minZoom: 3, // 限制最大显示 maxZoom: 14 }), layers: [ new TileLayer({ source: new source.OSM() }), layerRoute, layerFeatures ] }) var markerEl = document.getElementById('geo-marker') markerEl.className = 'css_animation' this.marker = new Overlay({ positioning: 'center-center', offset: [0, 0], element: markerEl, stopEvent: false }) this.global.map.addOverlay(this.marker) var style1 = [// 开始结束点样式 new style.Style({ image: new style.Icon(({ src: 'static/images/marker.png' })) }) ] var feature_start = new Feature({ geometry: new geom.Point(this.path[0]) }) var feature_end = new Feature({ geometry: new geom.Point(this.path[this.path.length - 1]) }) feature_start.setStyle(style1) feature_end.setStyle(style1) sourceFeatures.addFeatures([feature_start, feature_end]) lineString.setCoordinates(this.path) this.helpTooltipElement = document.createElement('div') this.helpTooltipElement.className = 'measuretip' this.helpTooltipElement.id = 'speed' this.helpTooltip = new Overlay({ element: this.helpTooltipElement, offset: [15, 0], positioning: 'center-left' }) this.global.map.addOverlay(this.helpTooltip) this.global.map.once('postcompose', (event) => { setInterval(() => { this.animation() }, this.setIntervalTime) }) // this.global.map.getView().fit(lineString.getExtent()) }, animation: function() { if (this.pathIndex === -1) { this.pathIndex = this.path.length - 1 } this.marker.setPosition(this.path[this.pathIndex]) this.helpTooltipElement.innerHTML = '<B>名称:</B>船载应急通信系统' + '\<br\>' + '<B>子系统:</B>平台A,平台B' + '\<br\>' + '<B>经纬度:</B>' + (this.path[this.pathIndex][0] + '').substring(0, 6) + ',' + (this.path[this.pathIndex][1] + '').substring(0, 5) this.helpTooltip.setPosition(this.path[this.pathIndex]) this.pathIndex-- }, analysisPath: function(splitNumber) { var tempPath = deepclone(this.path) var pathResults = [] var tempPoint = [0, 0] if (tempPath.length > 1) { for (let i = 0; i < tempPath.length - 1; i++) { // 每两个点之间分割出splitNumber个点 pathResults.push(tempPath[i]) for (let j = 0; j < splitNumber; j++) { tempPoint[0] = (tempPath[i + 1][0] - tempPath[i ][0]) * (j + 1) / splitNumber + tempPath[i][0] tempPoint[1] = (tempPath[i + 1][1] - tempPath[i ][1]) * (j + 1) / splitNumber + tempPath[i][1] pathResults.push(deepclone(tempPoint)) } } pathResults.push(tempPath[tempPath.length - 1]) this.path = deepclone(pathResults) console.log(this.path) } } } } </script> <style> #map { width: 100%; height: 100%; overflow: hidden; } .measuretip { position: relative; background-color: #0D9BF2; opacity: 0.7; border-radius: 3px; padding: 10px; font-size: 12px; cursor: default; } </style>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了pycharm 实现光标快速移动到括号外或行尾的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-02-06
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
Vue 列表页带参数进详情页的操作(router-link)
这篇文章主要介绍了Vue 列表页带参数进详情页的操作(router-link),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-13- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20