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 pathpath: [[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, // 平台信息divhelpTooltip: null // 平台信息overlay}},created() {this.analysisPath(this.splitNumber)},mounted() {this.initSeamap()},methods: {initSeamap: function() {this.pathIndex = this.path.length - 1var sourceFeatures = new source.Vector()var layerFeatures = new layer.Vector({// 两端点Featuresource: 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中用openlayers实现移动点动画相关推荐

在vue中用openlayers调取天地图服务并动态选择各个省份的中心，及行政边界
vue这块我就不说了,直接讲openlayers. 1.openlayers是什么? Openlayers是一个专为Web GIS客户端开发提供的JavaScript类库包,用于实现标准格式发布的地图 ...
学习vue加OpenLayers（3）动画 GIF
不知道为什么官网的案例一直说没有gifler()方法,所以我又去网上查了查,发现openlayers官方API上是不支持gif的,openlayer 里面支持 gif 图标上图的只有 overlay类 ...
vue项目登录页-实现字体动画案例
vue项目登录页-实现字体动画案例实现思路: 1,让每个字都包含在span标签中,span标签的display:inner-block 2,页面刚生成时(动画之前)设置margin宽度为80px,o ...
vue中用canvas画移动端电量显示实现充电动画
写一个电量组件 battery.vue <template><div><canvas ref="mycanvas" :width="cWid ...
vue如何使用原生js写动画效果_手摸手，带你用 vue 动画实现原生 app 切换效果，丝滑般的体验...
先来看效果图完整源码在 github 中欢迎 star: 准备开始之前您需要有 vue 基础,以及安装好 vue-cli 开始新建 vue 项目:vue init webpack vuexle ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
vue如何使用原生js写动画效果_深入理解 Vuejs 动画效果
本文主要归纳在 Vuejs 学习过程中对于 Vuejs 动画效果的各个相关要点.由于本人水平有限,如文中出现错误请多多包涵并指正,感谢.如果需要看更清晰的代码高亮,请跳转至我的个人站点的 Vue 中的 ...
Vue 左右翻页，点赞动画
因做小活动比较多,使用了一些动画,做些笔记,供大家参考翻页动画 router -> index.js import Vue from 'vue'; import Router from 'vu ...
vue如何使用原生js写动画效果_Vue中的动画效果
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...

vue中用openlayers实现移动点动画

vue中用openlayers实现移动点动画相关推荐

最新文章

热门文章