????最近维护老项目，有个路径回放的功能，写的比较复杂，现在只要比较简单就能做好，只要使用turf.js的lineChunk就可以了,愉快的结束本篇水文.

????以下都是水字数

????生成线段，使用turf.lineChunk跟据turf.length来分割成定长线段，计算线段的范围好缩放至线段附近

   let line = turf.lineString(data.data);
   let options = {units: ‘kilometers‘};
   let length = turf.length(line, options);
   let along = turf.lineChunk(line, length/100, options);
   let bbox = turf.bbox(line);
   let extent = new Extent({
         xmax: bbox[2],
         xmin: bbox[0],
         ymax: bbox[3],
         ymin: bbox[1],
         spatialreference: {
           wkid: 4326
         }
       })

????使用定时器来j进行数据修改，通过不停的修改几何数据，当开始是绘制一个线段，后面修改几何插入新的线段，让人有种动画的感觉.

ArcGIS JS API 4.18

 clock = function () {
            if (n   >= along.features.length) {
              clearInterval(r)
            } else {
              if(n==0){
                let polyline = {
                  type: "polyline",
                  paths: [along.features[n].geometry.coordinates],
                }

                let polylineSymbol = {
                  type: "simple-line",  // autocasts as SimpleLineSymbol()
                  color: [0, 0, 255],
                  width: 4
                }
                let polylineGraphic = new Graphic({
                  geometry: polyline,
                  symbol: polylineSymbol,
                });
                layer.graphics.add(polylineGraphic);
              }else{
                let geo=layer.graphics.getItemAt(0).clone()
                layer.graphics.removeAll()
                geo.geometry.addPath(along.features[n].geometry.coordinates)
                layer.graphics.add(geo);
              }
              n=n+1
            }}

ArcGIS JS API 3.35

 clock = function () {
         if (n   >= along.features.length) {
           clearInterval(r)
         } else {
           if(n==0){
             let polylineJson = {
               ‘paths‘: [along.features[n].geometry.coordinates],
               ‘spatialReference‘: {‘wkid‘: 4326}
             }
             let lline = new Polyline(polylineJson)
             let lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 255]), 6)
             lineGraphicLayer.add(new Graphic(lline, lineSymbol))
           }else{
             let geo=lineGraphicLayer.graphics[0].clone()
             lineGraphicLayer.clear()
             geo.geometry.addPath(along.features[n].geometry.coordinates)
             lineGraphicLayer.add(geo)
           }
           n=n+1
         }}

参考资料:

https://turfjs.fenxianglu.cn/category/misc/lineChunk.html

ArcGIS JS API 路径回放