Vue + Openlayers实现自定义轨迹动画

　　 　　 　　 　　<>脚本 　　进口“ol/ol.css”; 　　从“ol/导入功能特性”; 　　从“ol/导入地图地图”; 　　从“ol导入视图/视图”; 　　从“ol/格式/进口多线多线”; 　　从“ol进口{投影}/项目”; 　　从“ol进口{点,LineString}/几何学”; 　　进口{TileLayer瓷砖,向量作为VectorLayer}“ol/层”; 　　从“ol进口XYZ/源/XYZ”; 　　从“ol/源/进口VectorSource向量”; 　　进口{ 　　圆CircleStyle, 　　填满, 　　图标, 　　中风, 　　风格, 　　文本 　　从“ol}/风格”; 　　从“ol/渲染”进口{getVectorContext}; 　　 　　出口默认{ 　　数据(){ 　　返回{ 　　地图:空, 　　进展:0,//进度 　　动画:假的,//动画是否开始 　　速度:null,//速度 　　现在:null,//当前时间 　　textContent:“开始”, 　　routeCoords: null,//数组点集合 　　routeLength: null,//数组长度 　　路线:null,//线 　　routeFeature: null,//画线 　　geoMarker: null,//标记 　　startMarker: null,//开始标记 　　endMarker: null,//结束标记 　　风格:{ 　　路线:新风格({//线的样式 　　中风:新中风({ 　　宽度:6, 　　颜色:(237、212、0、0.8) 　　}） 　　}), 　　图标:新风格({//默认图标样式 　　图片:新CircleStyle ({ 　　半径:7, 　　填写:新填充({颜色:“红色”}), 　　中风:新中风({ 　　颜色:“白”, 　　宽:2 　　}） 　　}） 　　}), 　　geoMarker:新风格({//设置标记样式 　　图片:新图标({ 　　主播:(0.5,1)//偏移位置//旋转:0,//旋转//尺寸:52,26岁,//图标大小 　　“@/资产/src:要求(tx -图标- 1. png”) 　　}） 　　}), 　　开始:新风格({//设置开始标记样式 　　图片:新图标({ 　　主播:[0.5,1], 　　src:要求(“@/资产/rise.png”) 　　}） 　　}), 　　结束:新风格({//设置结束标记样式 　　图片:新图标({ 　　主播:[0.5,1], 　　src:要求(“@/资产/end.png”) 　　}） 　　}） 　　}， 　　vectorLayer: null,//矢量图层 　　中心:[118.835014569433,32.08414190192472]//中心点 　　}; 　　}， 　　方法:{//初始化地图 　　initMap () { 　　让=这个; 　　那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] 　　]; 　　那routeLength=that.routeCoords.length; 　　那路线=new LineString (that.routeCoords); 　　 　　那({routeFeature=新特性 　　类型:“路线”, 　　几何:that.route 　　}); 　　那({geoMarker=新特性 　　类型:“geoMarker”, 　　几何:新点(that.routeCoords [0]) 　　}); 　　那({startMarker=新特性 　　类型:“开始”, 　　几何:新点(that.routeCoords [0]) 　　}); 　　那({endMarker=新特性 　　类型:“结束”, 　　几何:新观点(that.routeCoords [。routeLength - 1) 　　});//that.endMarker.setStyle (//新风格({////图片:新CircleStyle ({////半径:7,////填写:新填充({颜色:“红色”}),////中风:新中风({////颜色:“白”,////宽度:2////})////}),////图片:新图标({////src:要求(“@/资产/tx -图标- 1. png”)////}),////文本:新的文本({////文本:“11133333333333333333333333333333333311”,////规模:1.3,////填写:新填充({////颜色:# 000000的////}),////中风:新中风({////颜色:# FFFF99,////宽度:3.5////})////})//})//); 　　 　　那null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

Vue + Openlayers实现自定义轨迹动画