vue使用openlayers实现移动点动画

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue+Openlayers自定义轨迹动画

    本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码,供大家参考,具体内容如下 <template> <div class="map-warp"> <h3> <a href="https://openlayers.org/en/latest/examples/feature-move-animation.html?q=polyline" target="_bank" >Openla

  • vue使用openlayers实现移动点动画

    本文实例为大家分享了vue使用openlayers实现移动点动画的具体代码,供大家参考,具体内容如下 做项目时,本来打算仿照官网的Example中动画制作,引入vue中后,发现它引用的库函数一直报错,最后我去vue中安装的依赖库中去查找这个函数,果然没有.也就是说官方例子使用的库和我安装的OL库存在一定差异. 后来我还是用笨方法去解决了,最终效果如下: 总体思路是将移动目标实例一个Overlay对象,然后将如图5个经纬度点没两点之间分割成多个(200个),之后通过定时器不断setPositon.

  • Vue结合openlayers按照经纬度坐标实现锚地标记及绘制多边形区域

    目录 前言 1.安装openlayers 2.引入模块 3.地图与弹窗html样式 4.data数据定义 5.methods方法 6.mounted数据加载 7.锚地数据获取 前言 本文介绍vue结合openlayers实现根据返回的经纬度坐标完成锚地标记.绘制多边形区域: 注意点: 1.根据返回的经纬度取第一个坐标作为锚地图标位置: 2.根据返回的经纬度坐标数据,这里的后台数据需要处理(根据返回的数据处理成需要的格式),得到坐标数组渲染绘制区域画图显示在航道图层上. 3.关于数据渲染的问题:

  • vue利用openlayers实现动态轨迹

    目录 实现效果 创建一个地图容器 引入地图相关对象 创建地图对象 创建一条线路 画一条线路 添加起.终点 添加小车 准备开车 完整代码 实现效果 今天介绍一个有趣的gis小功能:动态轨迹播放!效果就像这样: 这效果看着还很丝滑!别急,接下来教你怎么实现.代码示例基于parcel打包工具和es6语法,本文假设你已经掌握相关知识和技巧. gis初学者可能对openlayers(后面简称ol)不熟悉,这里暂时不介绍ol了,直接上代码,先体验下感觉. 创建一个地图容器 引入地图相关对象 import M

  • vue实现手机号码抽奖上下滚动动画示例

    本文介绍了vue实现手机号码抽奖上下滚动动画示例,分享给大家.具体如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Document</title> <meta name="viewport" content=

  • Vue实现回到顶部和底部动画效果

    本文实例为大家分享了Vue实现回到顶部和底部动画效果的具体代码,供大家参考,具体内容如下 代码: <template> <div> <div class="scroll" :class="{show:isActive}"> <div id="toTop" @click="toTop(step)"><</div> <div id="toBottom

  • 如何在vue里添加好看的lottie动画

    引入lottie库 ( >.< ) 在vue中引入lottie非常非常简单 1.安装vue-lottie包 npm install --save vue-lottie 2.全局引入vue-lottie 在main.js引入并注册全局组件即可 import lottie from 'vue-lottie'; Vue.component('lottie', lottie) 当然你也可以局部引入 ~ o ~ 3.引入你的lottie资源 在文中顶部lottie资源网站可以下载相应的资源,下载下来的文

  • Vue SPA 初次进入加载动画实现代码

    在app挂载的div同级处写一个加载动画,例如: <body class="font-hei"> <div class="wrap" id="loader"> <div> <div class="mult2rect mult2rect1"></div> <div class="mult2rect mult2rect2"></div

  • vue中实现弹出层动画效果的示例代码

    1 <template> <div class="home"> <!-- 首先将要过渡的元素用transition包裹,并设置过渡的name --> <transition name="mybox"> <div class="box" v-show="boxshow"></div> </transition> <button @click

  • vue实现右侧滑出层动画

    本文实例为大家分享了vue实现右侧滑出层动画的具体代码,供大家参考,具体内容如下 效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" co

  • vue利用openlayers加载天地图和高德地图

    目录 一.天地图部分 1.在vue中安装openlayers 二.高德地图部分 一.天地图部分 1.在vue中安装openlayers npm i --save ol 这里说的vue是基于脚手架构建的. 新建个页面,也就是vue文件,配置好路由.接着就是可以直接放入我的代码运行显示了. <template> <div class="wrapper"> <div>天地图</div> <div class="map"

随机推荐