Alberto you can use https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-route/ as an example and try to do same on ios

Yes is a good idea

there is Turf for ios https://github.com/mapbox/turf-swift

когда ведешь "trace" по карте, которая следует по заданной траектории вместе с камерой с помощью flyTo и panTo, есть ли возможность части пути этой линии задать другие свойства, например с 0 по 100 точки - красная линия, с 100 по 200 - зеленая, с 200 и далее - снова красная ? если использовать setLayoutProperty для этого слоя, то меняется свойства всей линии, а не ее части. например когда цикл пути доходит до сотой точки полностью вся линия вместо красной становится зеленой, а нее ее часть, а нужна другая логика

это одна невидимая и много разноцветных линий?

(и одна в форме котёнка)

В сорсе установите линиям проперти, цвет задайте на основе этих пропертей через выражение. Измененные данные вы можете подкидывать сорсу на лету

.setData кажется

одна одноцветная линия идет просто по координатам формируя layer, т.е. линия с каждой новой точкой растет (прямо рисуется на ходу идя по координатам)

я задавал цвет статически в layer, а потом меняю одну из property этого layer. но перекрашивается вся линия.

1. у меня линия задается как слой :                              

store.state.map.addSource('trace', {type: 'geojson', data: data});
store.state.map.addLayer({
                                  'id': 'trace',
                                  'type': 'line',
                                  'source': 'trace',
                                  'paint': {
                                      'line-color': 'red',
                                      'line-opacity': 0.75,
                                      'line-width': 7
                                  }
                              });

2. потом начинает рисоваться будучи красной, на 300 точке я меняю на зеленый, но меняется вся линия полностью, а надо чтобы менялась только та часть что идет с 300ой точки :
(  store.state.map.setPaintProperty('trace', 'line-color’, ‘green’);
Код:
let i = 0;
this.timer = window.setInterval(() => {
   if (i < coordinates.length) {
       if (i < 300) {
           data.features[0].geometry.coordinates.push(
               coordinates[i]
           );
             store.state.map.getSource('trace').setData(data);
             store.state.map.panTo(coordinates[i]);
             i++;
             store.state.map.flyTo({'center': coordinates[i], 'zoom': 10, 'speed': 0.15});
           }
       } else if (i >= 300 && i <= 400) {
           data.features[0].geometry.coordinates.push(
               coordinates[i]
           );

           store.state.map.setPaintProperty('trace', 'line-color’, ‘green’);
           store.state.map.getSource('trace').setData(data);
           store.state.map.panTo(coordinates[i]);
           store.state.map.flyTo({'center': coordinates[i], 'zoom': 5, 'speed': 0.7});
           i++;
       } else if (i > 400) {

           data.features[0].geometry.coordinates.push(
               coordinates[i]
           );

           store.state.map.setPaintProperty('trace', 'line-color’, ‘red’);
           store.state.map.getSource('trace').setData(data);
           store.state.map.panTo(coordinates[i]);
           store.state.map.flyTo({'center': coordinates[i], 'zoom': 12, 'speed': 0.5});
           i++;

       }
   } else {
       window.clearInterval(this.timer);
   }
}, 75);

Свойства отрисовки применяются ко всему слою. Как вариант делать несколько источников и слоёв чтобы они были разного цвета

я вижу два варианта.
Сначала ты все делаешь как сейчас, потом когда тебе надо сменить цвет - создаешь новый сорс и слой с другим цветом (красным). Этот новый сорс начинается там где закончилась зеленая линия

второй вариант я раписал выше

делаешь одну длинную невидимую линию и едешь по ней траекторией
распиливаешь эту линию на кусочки, кусочки рисуешь каждый своим цветом

спасибо! буду рендерить новую линию на отдельный layer. а как проще всего сделать так, чтобы точно быть уверенным что после первой нарисованной линии сразу запуститься рисовка второй? подгонка setTimeout под это как то выходит не очень

да рендери ты в тот же слой, только пропертю повесь что цвет другой и в стиль правило напиши

для того чтобы добавлять фичи в существующий сорс использйу метод .setData сорса. Для того чтобы определять в стиле цвет в зависимости от пропертей фичи используй выражения типа "categorical"

'fill-color': {
  type: 'categorical',
  property: 'название_проперти_определяющей_цвет',
  stops: [
    ['red',   'rgb(255, 0, 0)'],
    ['green', 'rgb(0, 255, 0)'],
    ['blue',  'rgb(0, 0, 255)'],
  ]
}

'fill-color': {
  type: 'categorical',
  property: 'название_проперти_определяющей_цвет',
  stops: [
    ['red',   'rgb(255, 0, 0)'],
    ['green', 'rgb(0, 255, 0)'],
    ['blue',  'rgb(0, 0, 255)'],
  ]
}

а setData же geojson принимает в агрумент. вы имеете ввиду это в контексте того, что новые координаты можно на лету  будет отдать ? ( в контексте этого вопрос: а можно ли вызвать fetch на несколько файлов сразу ?) а насчет property как mapbox поймет, что надо менять цвет в данном примере ?

а, red, green и blue это и есть условия переключения