Angular：仅使用http传递新的数据数组

Question

我正在尝试使用Leaflet map API开发航班跟踪器。每当有任何新的飞机坐标点位置时，我都会在地图上将它们显示为折线路径，由于使用间隔函数检查，直线与现有的原始飞行路线折线重叠，因此在最后一点和第一点之间存在“连接”新坐标点位置。每次我调用AddPAth方法传递“坐标点”时，都只需要传递新点即可。否则，由于直线与现有的原始折线重叠，因此我将在最后一点与第一个点之间具有这种“联系”。所以我的问题是，什么是最好的方法来初始化地图上的数据json坐标，然后仅将新数据传递给避免在最后一点和第一个点之间建立“连接”，如as example here

我的代码

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
    }
  ]
}

Answer 1

您使用RXJS和distinct运算符，下面是一个示例：

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)
        })

如果您使用ionic的http插件，则可以从一个诺言中创建一个可观察的对象。>

observable$ = from(this._http.get(this.forecastUrl, {}, {}));
您可以在https://rxjs-dev.firebaseapp.com/api/operators/distinct中找到更多示例