maptalks中的LineString.animateShow 在执行过程中，有没有方法回退到某一个点？

Question

具体是需求，在地图上播放线的动画，并且可以随意前进/后退拖动，这条线的播放进度。

Answer 1

大概思路：

//  LineString 对象
const line = new maptalks.LineString([...]);


const segments = [];
for (let i = 1; i < line.getCoordinates().length; i++) {
  segments.push(new maptalks.LineString([
    line.getCoordinate(i - 1),
    line.getCoordinate(i)
  ]));
}


function animate(progress) {

  layer.clear();

  const count = Math.floor(progress * segments.length);
  for (let i = 0; i < count; i++) {
    segments[i].addTo(layer);
  }
}

const slider = document.getElementById('slider');
slider.addEventListener('input', function () {
  const progress = this.value / 100; // 滑块范围是0到100
  animate(progress);
});