Vue+Openlayers自定义轨迹动画


Posted in Javascript onSeptember 24, 2020

本文实例为大家分享了Vue+Openlayers实现轨迹动画的具体代码,供大家参考,具体内容如下

<template>
 <div class="map-warp">
 <h3>
 <a
 href="https://openlayers.org/en/latest/examples/feature-move-animation.html?q=polyline"
 target="_bank"
 >OpenlayersTrack</a>

 </h3>
 <div class="progress-bar">
 <div class="bar-box">
 <div class="bar" :style="{width:progress+'%'}">
  <span>{{progress}}%</span>
 </div>
 </div>
 </div>
 <div id="map" class="map"></div>
 <el-row :gutter="20">
 <el-col :span="5">
 <label for="speed">
  运动速度: 
  <input id="speed" type="range" step="10" value="5" />
 </label>
 </el-col>
 <el-col :span="5">
 <button @click="handlerPlay">{{textContent}}</button>
 </el-col>
 </el-row>
 </div>
</template>

<script>
import "ol/ol.css";
import Feature from "ol/Feature";
import Map from "ol/Map";
import View from "ol/View";
import Polyline from "ol/format/Polyline";
import { Projection } from "ol/proj";
import { Point, LineString } from "ol/geom";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import XYZ from "ol/source/XYZ";
import VectorSource from "ol/source/Vector";
import {
 Circle as CircleStyle,
 Fill,
 Icon,
 Stroke,
 Style,
 Text
} from "ol/style";
import { getVectorContext } from "ol/render";

export default {
 data() {
 return {
 map: null,
 progress: 0, // 进度
 animating: false, // 动画是否开始
 speed: null, // 速度
 now: null, // 当前时间
 textContent: "开始",
 routeCoords: null, // 数组点集合
 routeLength: null, // 数组长度
 route: null, // 线
 routeFeature: null, // 画线
 geoMarker: null, // 标记
 startMarker: null, // 开始标记
 endMarker: null, // 结束标记
 styles: {
 route: new Style({
  // 线的样式
  stroke: new Stroke({
  width: 6,
  color: [237, 212, 0, 0.8]
  })
 }),
 icon: new Style({
  // 默认icon样式
  image: new CircleStyle({
  radius: 7,
  fill: new Fill({ color: "red" }),
  stroke: new Stroke({
  color: "white",
  width: 2
  })
  })
 }),
 geoMarker: new Style({
  // 设置标记样式
  image: new Icon({
  anchor: [0.5, 1], // 偏移位置
  // rotation: 0, // 旋转
  // size: [52, 26], // 图标大小
  src: require("@/assets/tx-icon-1.png")
  })
 }),
 start: new Style({
  // 设置开始标记样式
  image: new Icon({
  anchor: [0.5, 1],
  src: require("@/assets/rise.png")
  })
 }),
 end: new Style({
  // 设置结束标记样式
  image: new Icon({
  anchor: [0.5, 1],
  src: require("@/assets/end.png")
  })
 })
 },
 vectorLayer: null, // 矢量图层
 center: [118.835014569433, 32.08414190192472] // 中心点
 };
 },
 methods: {
 // 初始化地图
 initMap() {
 let that = this;
 that.routeCoords = [
  [118.83476768752418, 32.08385299388422],
  [118.83491813875425, 32.08394894013734],
  [118.83504349233812, 32.08408332210981],
  [118.83504349233812, 32.08408332210981],
  [118.83512889261571, 32.083918456790876],
  [118.83517286002402, 32.083733744293006],
  [118.83496824937895, 32.084077663081935],
  [118.83490797978696, 32.08412326115879],
  [118.83489815812887, 32.08414025948315],
  [118.83488806541473, 32.084153465524956],
  [118.83488315718186, 32.08415572622981],
  [118.8348782482698, 32.0841596143537],
  [118.83485807031045, 32.08416812475921],
  [118.83484798473395, 32.08416424284437],
  [118.83483789451235, 32.08417148163059],
  [118.83483789122208, 32.08417934749756],
  [118.83489794089253, 32.084006273376524],
  [118.83490803262733, 32.08399523720106],
  [118.83491321591835, 32.08398700421235],
  [118.83491812613363, 32.083979861216235],
  [118.83491812890527, 32.08397308027895],
  [118.83492822118053, 32.0839606878946],
  [118.83493831179283, 32.08395236406387],
  [118.8349443113023, 32.08394818448314],
  [118.83494840317711, 32.0839421415609],
  [118.8349582198328, 32.08393707761024],
  [118.83495822192893, 32.08393192409512],
  [118.83495822314188, 32.083928940480945],
  [118.83495822600715, 32.08392188830153],
  [118.83496831727095, 32.08391193701643],
  [118.83496832133952, 32.083901901220244],
  [118.83497432325855, 32.083891754391544],
  [118.83497841676457, 32.083881642888024],
  [118.83498850812316, 32.083871420344074],
  [118.8349985986039, 32.08386336769408],
  [118.83499860472438, 32.08384817837085],
  [118.83500869639813, 32.08383714209293],
  [118.83500870130179, 32.083824936382825],
  [118.83501279510463, 32.08381401114558],
  [118.83501852555108, 32.08380088571361],
  [118.83502861687877, 32.08379066312818]
 ];
 that.routeLength = that.routeCoords.length;
 that.route = new LineString(that.routeCoords);

 that.routeFeature = new Feature({
 type: "route",
 geometry: that.route
 });
 that.geoMarker = new Feature({
 type: "geoMarker",
 geometry: new Point(that.routeCoords[0])
 });
 that.startMarker = new Feature({
 type: "start",
 geometry: new Point(that.routeCoords[0])
 });
 that.endMarker = new Feature({
 type: "end",
 geometry: new Point(that.routeCoords[that.routeLength - 1])
 });
 // that.endMarker.setStyle(

 // new Style({
 // // image: new CircleStyle({
 // // radius: 7,
 // // fill: new Fill({ color: "red" }),
 // // stroke: new Stroke({
 // // color: "white",
 // // width: 2
 // // })
 // // }),
 // // image: new Icon({
 // // src: require("@/assets/tx-icon-1.png")
 // // }),
 // // text: new Text({
 // // text: '11133333333333333333333333333333333311',
 // // scale: 1.3,
 // // fill: new Fill({
 // // color: '#000000'
 // // }),
 // // Stroke:new Stroke({
 // // color: '#FFFF99',
 // // width: 3.5
 // // })
 // // })
 // })
 // );

 that.vectorLayer = new VectorLayer({
 source: new VectorSource({
  features: [
  that.routeFeature,
  that.geoMarker,
  that.startMarker,
  that.endMarker
  ]
  // 线、标记、开始标记、结束标记
 }),
 style: function(feature) {
  // 如果动画处于活动状态,则隐藏标记
  if (that.animating && feature.get("type") === "geoMarker") {
  return null;
  }
  return that.styles[feature.get("type")];
 }
 });
 this.map = new Map({
 target: "map",
 layers: [
  new TileLayer({
  source: new XYZ({
  url:
  "http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
  }),
  projection: "EPSG:3857"
  }),
  that.vectorLayer
 ],
 view: new View({
  projection: new Projection({ code: "EPSG:4326", units: "degrees" }),
  center: this.center,
  zoom: 19,
  minZoom: 2,
  maxZoom: 19
 })
 });
 this.mapClick();
 },

 // 地图绑定事件
 mapClick() {
 let that = this;
 this.map.on("click", function(event) {
 let feature = that.map.getFeaturesAtPixel(event.pixel);
 let pixel = that.map.getEventPixel(event.originalEvent);
 let coodinate = event.coordinate;
 // let temp = feature[0].geometryChangeKey_.target
 // Point
 if (feature.length > 0) {
  console.warn(feature[0].values_.type, 111);
  // console.warn(feature[0].get('geometryChangeKey'),9999999999)
 }
 });
 },

 // 运动轨迹开关
 handlerPlay() {
 if (this.textContent === "暂停") {
 this.stop(false);
 } else {
 this.start();
 }
 },

 // 轨迹移动
 moveFeature(event) {
 let vectorContext = getVectorContext(event);
 let frameState = event.frameState;
 if (this.animating) {
 let elapsedTime = frameState.time - this.now;
 let index = Math.round((this.speed * elapsedTime) / 1000);
 // 进度条
 this.progress = Math.floor(
  ((100 / this.routeLength) * (this.speed * elapsedTime)) / 1000
 );
 if (index >= this.routeLength) {
  this.progress = "100";
  this.stop(true);
  return;
 }

 let currentPoint = new Point(this.routeCoords[index]);
 let feature = new Feature(currentPoint);
 vectorContext.drawFeature(feature, this.styles.geoMarker);
 }
 // tell OpenLayers to continue the postrender animation
 this.map.render(); // 开始移动动画
 },

 // 开始动画
 start() {
 if (this.animating) {
 this.stop(false);
 } else {
 this.animating = true;
 this.textContent = "暂停";
 this.now = new Date().getTime();
 let speedInput = document.getElementById("speed");
 this.speed = speedInput.value;
 this.geoMarker.setStyle(null); // hide geoMarker 隐藏标记
 // just in case you pan somewhere else
 this.map.getView().setCenter(this.center); // 设置下中心点
 this.vectorLayer.on("postrender", this.moveFeature);
 this.map.render();
 }
 },

 // 停止
 stop(ended) {
 this.progress = 0;
 this.animating = false;
 this.textContent = "开始";
 let coord = ended
 ? this.routeCoords[this.routeLength - 1]
 : this.routeCoords[0];
 let geometry = this.geoMarker.getGeometry().setCoordinates(coord);
 //remove listener
 this.vectorLayer.un("postrender", this.moveFeature); // 删除侦听器
 }
 },
 mounted() {
 this.initMap();
 }
};
</script>

<style lang="scss">
#map {
 height: 500px;
 margin-top: 20px;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
 display: none;
}
.progress-bar {
 width: 100%;
 height: 30px;
 margin: 30px 0;
 background: url("~@/assets/bg-5.png") center bottom no-repeat;
 background-size: 100% 30px;
 position: relative;
 box-sizing: border-box;
 .bar-box {
 position: absolute;
 top: 10px;
 left: 30px;
 right: 30px;
 height: 10px;
 border-radius: 5px;
 background: #034c77;
 }
 .bar {
 height: 10px;
 border-radius: 5px;
 background: url("~@/assets/bg-6.png") 0 bottom repeat #ecc520;
 position: relative;
 span {
 width: 50px;
 height: 50px;
 line-height: 18px;
 font-size: 12px;
 font-weight: bold;
 text-align: center;
 position: absolute;
 color: #fe0000;
 top: -30px;
 right: -25px;
 background: url("~@/assets/bg-7.png") center 0 no-repeat;
 background-size: 100% 30px;
 }
 }
 }
</style>

Vue+Openlayers自定义轨迹动画

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

Javascript 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
JQuery中serialize() 序列化
Mar 13 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
axios封装与传参示例详解
Oct 18 Javascript
vue使用openlayers实现移动点动画
Sep 24 #Javascript
Openlayers实现点闪烁扩散效果
Sep 24 #Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 #Javascript
vue3.0生命周期的示例代码
Sep 24 #Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 #Javascript
Vue3不支持Filters过滤器的问题
Sep 24 #Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 #Javascript
You might like
教你如何把一篇文章按要求分段
2006/10/09 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
php防止sql注入简单分析
2015/03/18 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
js的表单操作 简单计算器
2011/12/29 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
2016/11/18 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
Python模块包中__init__.py文件功能分析
2016/06/14 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
python 去除txt文本中的空格、数字、特定字母等方法
2018/07/24 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
详解python读取image
2019/04/03 Python
Python3的socket使用方法详解
2020/02/18 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
顶撞老师检讨书
2014/02/07 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
大型营销活动计划书
2014/04/28 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
任命书怎么写
2015/03/02 职场文书
社区党务工作总结2015
2015/05/19 职场文书
高中化学教学反思
2016/02/22 职场文书
《法国号》教学反思
2016/02/22 职场文书
90后经典动画片排行:《数码宝贝》第二,《小鲤鱼历险记》在榜
2022/03/18 日漫