vue是否可以做行车轨迹_Vue+Openlayers自定义轨迹动画

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

href="https://openlayers.org/en/latest/examples/feature-move-animation.html?q=polyline"

target="_bank"

>OpenlayersTrack

{ {progress}}%

运动速度: 

{ {textContent}}

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], // 图标大小