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 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
js读取本地文件的实例
Dec 22 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
Mar 17 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十六)
2014/06/30 PHP
为你总结一些php系统类函数
2015/10/21 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
IE中直接运行显示当前网页中的图片 推荐
2006/08/31 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
基于jQuery的360图片展示实现代码
2012/06/14 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
webpack的pitching loader详解
2019/09/23 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python实现逻辑回归的方法示例
2017/05/02 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
2015/04/24 HTML / CSS
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
设计师大码女装:11 Honoré
2020/05/03 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
医院学雷锋活动策划方案
2014/02/15 职场文书
家长写给孩子的评语
2014/04/18 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
学党史心得体会
2014/09/05 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
党支部鉴定意见
2015/06/02 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
服务器nginx权限被拒绝解决案例
2022/09/23 Servers