Angular: передать только новый массив данных, используя http - PullRequest
Новая
       27

Angular: передать только новый массив данных, используя http

0 голосов
/ 13 января 2020

Я пытаюсь разработать трекер полетов, используя API карты Leaflet. Каждый раз, когда появляются какие-либо новые координаты точки расположения самолета, я отображаю их на карте как траекторию полилинии, у меня есть «связь» между последней и первой точкой, поскольку прямые линии перекрываются с существующей исходной ломаной траектории полета из-за использования функции интервала для проверки новые координаты точки положения. Каждый раз, когда я вызываю AddPAth метод для передачи «точки с координатами», мне приходится передавать только новые точки. В противном случае у меня будет эта «связь» между последней и первой точкой, поскольку прямые линии перекрываются с существующей исходной полилинией. Поэтому мой вопрос заключается в том, как лучше всего инициализировать координаты данных json на карте, а затем передавать только новые данные, чтобы избежать «связи» между последней и первой точкой, например , например,

Мой код 

export class MapTrackBeforPage implements OnInit {
    map: Map;
    poly:L.Polyline


    constructor(
        private http: HTTP,
       public zone : NgZone) {

    }


    ionViewDidEnter() {
        this.getmarker().then(() => {
            this.zone.runOutsideAngular(() => {
                interval(15000).subscribe(() => {
                  ---- Reload DATA
                    this.getmarker()
                })
            })
        })

        // In setView add latLng and zoom
        this.map = new Map('Map_id', { attributionControl: false }).setView([33, 44], 6);
        this.sourceFlightPath.addTo(this.map)
        return tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png?apikey=', {
        }).addTo(this.map);
    }

    ---- GETTING DATA --------
    async getmarker() {
        this.http.get('xxxxxxxxxxxxxxxxx', {}, {})
            .then(data => {

                let getdata = JSON.parse(data.data)

               --------Pass Data -----
                this.AddPath(getdata)

            })
    }

------ PATH OF AIRCRAFT -----
    AddPath(path) {
        // Flight path

        for (let datas of path['trail']) {

         new L.Polyline([datas.lat,datas.lng], { color: 'red', weight: 3 }).addTo(this.map);

        }
    }

краткие данные json 

{
  "trail": [
    {
      "lat": 28.859594,
      "lng": 44.736115
    },
    {
      "lat": 28.852707,
      "lng": 44.76506
    }
  ]
}

1 Ответ

1 голос
/ 13 января 2020

Вы используете RX JS и отдельный оператор , вот пример: 

import { of } from 'rxjs';
import { distinct } from 'rxjs/operators';

of(1, 1, 2).pipe(
  distinct(),
)
.subscribe(x => console.log(x)); // it gives you 1, 2

Вы можете использовать запуск с оператором startWith если вам это нужно, то в вашем случае это может быть что-то вроде этого: 

this.http.get('xxxxxxxxxxxxxxxxx', {}, {})
        .pipe(
           startWith(your_initial_value),
           map(data => data.data),
           distinct()
         )
        .subscribe(data => {
            this.AddPath(getdata)
        })

вы можете создать наблюдаемое из обещания, если вы используете http-плагин ioni c 

observable$ = from(this._http.get(this.forecastUrl, {}, {}));

Вы можете найти больше примеров здесь https://rxjs-dev.firebaseapp.com/api/operators/distinct

...