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 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
QQ空间顶部折页撕开效果示例代码
Jun 15 Javascript
angularJS中router的使用指南
Feb 09 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
Aug 08 Javascript
vue制作toast组件npm包示例代码
Oct 29 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
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
2007/03/08 Javascript
了解一点js的Eval函数
2012/07/26 Javascript
图片无缝滚动代码(向左/向下/向上)
2013/04/10 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
JS获取当前地理位置的方法
2017/10/25 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
解决python3 HTMLTestRunner测试报告中文乱码的问题
2018/12/17 Python
Python中常用的内置方法
2019/01/28 Python
python版DDOS攻击脚本
2019/06/12 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
Lookfantastic法国官网:英国知名美妆购物网站
2017/10/28 全球购物
The Hut英国:英国领先的豪华在线百货商店
2019/07/26 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
房地产促销活动方案
2014/03/01 职场文书
公司节能减排倡议书
2014/05/14 职场文书
单位租车协议书
2015/01/29 职场文书
校本培训个人总结
2015/02/28 职场文书
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫
ant design charts 获取后端接口数据展示
2022/05/25 Javascript