Vue+Openlayers自定义轨迹动画_JavaScript

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

									  运动速度:&nbsp;

									  <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>