arcgis 4 根据线坐标构建线动画

根据线动画

前期准备加载esri 需要的类

  • const [Graphic, GraphicsLayer, Polyline] = await esriClass.load([esriClassName.Graphic, esriClassName.GraphicsLayer, esriClassName.Polyline]);

```javascript

class PathAnimatetionByFrame{

constructor(){

}
addLine(view, config) {
return new Promise((rs, rj) => {
const graphiclayer = new GraphicsLayer();
graphiclayer.removeAll();

  • const geo = new Polyline({
  • type: 'polyline',
  • spatialReference: view.spatialReference,
  • paths: [[]]
  • });
  •  
  • const gra = new Graphic(geo, config.symbol);
  • graphiclayer.add(gra);
  • const data = config.paths;
  • const rate = config.rate;
  • let curLineIndex = 0;
  • let curPointindex = 0;
  • window.requestAnimationFrame(() => {
  • step(gra, geo, data);
  • });
  • function step(gra, geo, data) {
  • let points = data[curLineIndex];
  • for (let i = 0; i < rate; i++) {
  • if (curPointindex > points.length - 1) {
  • curLineIndex++;
  • if (curLineIndex === data.length) {
posted @ 2022-01-20 17:47  haibalai  阅读(92)  评论(0编辑  收藏  举报