Openlayers 打开图层标记移动时删除通过的线

我正在使用开放层工作我偶然发现了一个问题

当标记器移动时，我试图实现的是删除通过的线

要进一步解释，请查看下面的示例：

单击“开始动画”时，标记会移动，但标记经过的黄线保持不变，我想在标记移动时删除标记后面的那条线

如何使用OpenLayers实现这一点？

从开始，一个选项是添加一个新行

功能，然后更新其坐标以删除已遍历的坐标


添加新的
多段线
：

// new line feature (polyline) 
var lineCoords = route.getCoordinates();
var lineFeature = new ol.Feature({
  type: 'line',
  geometry: route.clone()
});


将新要素添加到矢量图层：

var vectorLayer = new ol.layer.Vector({ // VectorLayer({
  source: new ol.source.Vector({ // VectorSource({
    features: [geoMarker, startMarker, endMarker, lineFeature],


在moveFeature函数中，更新线的坐标以删除已遍历的坐标：

var moveFeature = function (event) {
    // ...
    var currentPoint = new ol.geom.Point(routeCoords[index]);
    coords=routeCoords.slice(index);
    lineFeature.getGeometry().setCoordinates(coords);





代码片段：


//由于JSFIDLE的限制，这个长字符串放在这里。
//它通常使用AJAX加载。
变量多段线=[
'hldhx@lnau`BCG_EaC？？cFjAwDjF？？uBlKMd}@z？？aC^yk@z_@se@b[wFdE？？wFfE}N'，
“fIoGxB_I\\gG}@eHoCyTmPqGaBaHOoD\\？yVrGotA | N？？o[N_STiwAtEmHGeHcAkiA}”，
"amybihokknoi"CcVvM？？gG"gF_@iJwC？？eCcA]OoL"DwFyCaCgCcCwDcGwHsSoX？？wI_E",，
'kUFmq@hBiOqBgTwS??iYse@gYq\\cp@ce@{vA}s@csJqaE}{@iRaqE{lBeRoIwd@_T{]_',
"Ngn{PmhEwaA{SeF"_u@kQuyAw]wQeEgtAsZ}LiCarAkVwI}D？？？RcjEinPspDwSqCgs@，
'sPua@_OkXaMeT_Nwk@ob@gV}TiYs[uTwXoNmT{Uyb@wNg]{Nqa@oDgNeJu_@_G} YsFw]k'，
'DuZyDmm@i_@uyIJe~@jCg|@nGiv@zUi_BfNqaAvIow@dEed@dCcf@r@qz@Egs@{Acu@mC',
'um@yIey@gGig@cK_m@aSku@qRil@我们{mAeTej}Tkz@cLgr@aHko@qOmcEaJw~C{w@ka',
'i@qBchBq@九巴{kDnBscBnFu_Dbc@_~QHeU`IuyDrC}@bByp@fCyoA？qMbD}{AIkeAgB'，
“好的{UsDke@gFej@qH{o@qGgb@qH{`@mMgm@uQus@吉隆坡{_@yOmd@ymBgwE}x@ouBwtA__',
'DuhEgaKuWct@gp@cnBii@mlBa_@}|Asj@qrCg^eaC{dAaJ_aAiOyjByH{nAuYu`GsAw'，
'Xyn@ywMyOyqD{{@cfIcDe}@y@aeBJmwA`CkiAbFkhBlTgdDdPyiB`W}xDnSa}DbJyhCrX'，
“itAhT}x@bE}Z_qW_Kwv@qKaaAiBgXvIm}A~JovAxCqW~WanB`XewBbK{u A`K}fBvAmi@，
'xBycBeCauBoF}}@qJioAww@gjHaPopA_NurAyJku@uGmi@cDs[eRaiBkQstAsQkcByNma'，
“CsK_uBcJgbEw@gkB_@ypEqDoqSm@eZcDwjBoGw`博梅格鲍斯_@_uBqb@ytBwkFqiT_',
'fAqfEwe@mfCka@_eC_UmlB}mmabewkdehwqaox}~DcBsZmLcxBqOwqE_dkyujmrj\\o'，
“~CfIewG | yibqbxsb？es@qGciA}RorAoVajA_nAodD{[y]`AgPqp@mKwr@ms@umEaW{dAm'，
'b@umAw|@ojBwzDaaJsmBwbEgdCsrFqhAihDquAi`Fux@}_Dui@_eB_u@guCuyAuiHukA_'，
“lKszAu | OmaA{wKm}@clHs_A_rEahCssKo\\sgBsSglAqk@yvDcS_wAyTwpBmPc|BwZknF'，
“oFscB_gsadizmylgtgqonhqt{hKaPg}”Dqq@m~Hym@c`euibudiab{hF{pWifx@snA',
“w`GkFyVqf@y~BkoAi}Lel@wtc@}`@oaXi_C}pZsi@eqGsSuqJ|Lqeb@e]kgPcaAu}SkDw'，
'zGhn@gjYh\\qlNZovJieBqja@ed@siO{[ol\\kCmjMe\\isHorCmec@uLebB}EqiBaCg}'，
'@m@qwHrT_vFps@kkI`uAszIrpHuzYxx@e{Crw@kpDhN{wBtQarDy@knFgP_yCu\\wyCwy'，
'A{kHo~@omeoymodaecpiuosdagd}{{AsyEihCayFilLaiUqm@_bAumFo}"乌布依"局长,，
“@swC~AkzDlhA}xEvcBa}”Cxk@ql@`饶@烧烤{@``Bye@djDww@齐克_cAtn@ye@nfC_eC'，
| ggah~s@w}@``Fi~FpnAooC|u@wlEaEedRlYkrPvKerBfYs}Arg@m}AtrCkzElw@gjBb',
'h@woBhR{gCwGkgCc[wtCuOapAcFoh@uBy[yBgr@c@iq@o@wvEv@sp@`FajBfCaq@fIipA',
'dy@ewJlUc`Exguabdembbbssarauqbbg}@s@g{AkB{bBif@_bYmC}r@kDgm@sPq_BuJ_'，
是的{X{AsK_d@eM{d@wVgx@oWcu@？？aDmOkNia@wFoSmDyMyCkPiBePwAob@XcQ |@oNdCo'，
'SfFwXhEmOnLi\\lbAulB`X\u d@|k@au@bc@oc@bqC}{BhwDgcD`l@ed@？？bL{G|a@eTje@',
'oS~]cLr~Bgh@|b}Jv}EieAlv@sPluD{z@nzA_]`|KchCtd@sPvb@wSb{@ko@f`RooQ~e',，
“[upZbuIolI|gFafFzu@iq@nMmJ | OeJn^{Qjh@yQhc@uJ~j@iGdd@kAp~BkBxO{| QsAfY',，
'gEtYiGd]}Jpd@wRhVoNzNeK`j@ce@vgK}cjnsoszqkvum^rSgc@`Uql@xIq\\vIgg@~k'，
“Dyq[nIir@jNoq@xNwc@fYik@tk@su@neB}uBhqEesFjoGeyHtCoD | D}Ed |@ctAbIuOzqB'，
'}D~NgY`\\um@v[gm@v{Cw`G`w@o{AdjAwzBh{C}`Gpp@ypAxn@}马夫兹{bBbNia{jI'，
'ab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@，
'mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goamsaydeirb{B}IsJ'，
“uEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m'，
'~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@？？kF}D？？OL'
].加入（“”）；
var route=/**@type{import（../src/ol/geom/LineString.js”）.default}*/（新的ol.format.Polyline({
系数：1e6，
}).readGeometry（多段线{
数据预测：“EPSG:4326”，
功能投影：“EPSG:3857”，
}));
var routeCoords=route.getCoordinates（）；
var ROUTELENGHT=ROUTECORDS.length；
var routeFeature=新的ol.功能({
键入：“路线”，
几何：路线，
});
var lineCoords=route.getCoordinates（）；
变量lineFeature=新的ol.特征({
键入：“行”，
几何体：route.clone（）
});
变量geoMarker=/**@类型特征*/（新ol.特征({
类型：“geoMarker”，
几何：新的ol.geom.Point（routeCoords[0]），
}));
var startMarker=新的ol.功能({
键入：“图标”，
几何：新的ol.geom.Point（routeCoords[0]），
});
var endMarker=新的ol.特征({
键入：“图标”，
几何：新的ol.geom.Point（routeCoords[routeLength-1]），
});
变量样式={
“行”：新的ol.style.style({
笔划：新的ol风格笔划({
宽度：6，
颜色：“蓝色”，
}),
}),
“路线”：新的ol.style.style({
笔划：新的ol风格笔划({
宽度：6，
颜色：[237212,0,0.8]，
}),
}),
“图标”：新的ol.style.style({
图片：新ol.style.Icon({
锚定：[0.5,1]，
src:'https://openlayers.org/en/v4.6.5/examples/data/icon.png',
}),
}),
“geoMarker”：新的ol.style.style({
图片：新ol.style.Circle（{//CircleStyle({
半径：7，
填充：新的ol.style.fill({
颜色：“黑色”
}),
笔划：新的ol风格笔划({
颜色：'白色'，
宽度：2，
}),
}),
}),
};
var动画=假；
速度，现在；
var speedInput=document.getElementById（'speed'）；
var startButton=document.getElementById（'start-animation'）；
var vectorLayer=new ol.layer.Vector（{//vectorLayer({
source:new ol.source.Vector（{//VectorSource({
特征：[/*路由特征，*/geoMarker，startMarker，endMarker，lineFeature]，
}),
风格：功能（特征）{
//如果动画处于活动状态，则隐藏几何标记
如果（设置动画）&