如何在添加新路径之前自动删除以前的折线

Question

我正在使用 Leaflet map 开发 Angular。我的项目正在获取飞行路径的数据 json 坐标。我下面的代码工作正常，但问题是我在数据更新时在地图上有重复的折线路径。我做了一些步骤来删除以前的折线路径并显示新路径，但我仍然有同样的问题。

export class MapTrackBeforPage implements OnInit {
    map: Map;
    poly:L.Polyline
    fg = L.featureGroup()

    protected points: { lat: number, lng: number }[] = [];

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

    }

    ionViewDidEnter() {
        this.getmarker()
        this.leafletMap()
    }

    leafletMap() {
        // In setView add latLng and zoom
        this.map = new Map('Map_id', { attributionControl: false }).setView([33, 44], 6);
        this.fg =L.featureGroup().addTo(this.map)

        return tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png', {
            attribution: 'Baghdad Int`l Airport © 2019',
        }).addTo(this.map);
    }

    async getmarker() {

        this.zone.runTask(()=>{
            setInterval(()=>{
                this.http.get('xxxxxxxxxxxxxxxxxx'', {}, {})
                .then(data => {
                    this.fg.clearLayers()
                    let getdata = JSON.parse(data.data)
                    console.log(getdata)
                    this.AddPath(JSON.parse(data.data))
                })
            },5000)
        })

    }

    AddPath(path) {
        // Flight path
        for (let datas of path) {

            this.points.push({ lat: datas.lat, lng: datas.lng })
            console.log(this.points)
            this.poly = new L.Polyline([this.points], { color: 'red', weight: 3 }).addTo(this.fg);
            // zoom the map to the polyline
            this.map.fitBounds(this.fg.getBounds())

        }
        new L.Marker(this.points[0], {
        icon: new L.DivIcon({
        html: ` <img src="assets/icon/B733.png" style="width:25px"/>`,
        iconSize: [20, 20],
        })

        }).addTo(this.map)
    }


}

Answer 1

将折线添加到要素组，然后您可以清除该组。

let fg = L.featureGroup().addTo(map)
async getmarker() {

    let poly: L.Polyline
    poly.remove()

    interval(5000).subscribe(()=>{
        this.http.get('http://xxxxxxxxxxxxxxxx', {}, {})
        .then(data => {
            fg.clearLayers(); //<----
            let getdata = JSON.parse(data.data)
            console.log(getdata)

            // Flight path
            for (let datas of JSON.parse(data.data)['trail']) {

                this.points.push({ lat: datas.lat, lng: datas.lng })
                console.log(this.points)
                 poly = new L.Polyline([this.points], { color: 'red', weight: 3 }).addTo(fg); //<---- Change to fg
                // zoom the map to the polyline

                this.map.fitBounds(fg.getBounds()) //<---- Change to fg

            }

    })

}

也许你必须从 fg var 中更改 init，我不知道这是否适合 angluar

更新：搜索错误

试试：

map: Map;
    poly:L.Polyline
    fg : L.FeatureGroup() // ":" and "F"

或

leafletMap() {
        // In setView add latLng and zoom
        this.map = new Map('Map_id', { attributionControl: false }).setView([33, 44], 6);


        var t = tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png', {
            attribution: 'Baghdad Int`l Airport © 2019',
        }).addTo(this.map);
        this.fg =L.featureGroup().addTo(this.map) //<--------
        return t; //<--------
    }

或

leafletMap() {
        // In setView add latLng and zoom
        this.map = new Map('Map_id', { attributionControl: false }).setView([33, 44], 6);


        var t = tileLayer('https://{s}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png', {
            attribution: 'Baghdad Int`l Airport © 2019',
        }).addTo(this.map);
        this.fg = new L.FeatureGroup().addTo(this.map) //<--------
        return t;
    }

你在控制台中得到了什么？：

 for (let datas of path) {

            this.points.push({ lat: datas.lat, lng: datas.lng })
            console.log(this.points)
            this.poly = new L.Polyline([this.points], { color: 'red', weight: 3 }).addTo(this.fg);
            // zoom the map to the polyline
            this.map.fitBounds(this.fg.getBounds())

        }
console.log(fg); //<----

Answer 2

要禁用最后一个点和第一个点之间的“连接”，您可以删除或不打印数组中的最后一个点。我在寻找你的 latlng 数组中的第一个和最后一个条目具有相同的值。

 AddPath(path) {
        // Flight path
        const len = path.length;
        let i = 0;
        for (let datas of path) {

            this.points.push({ lat: datas.lat, lng: datas.lng })
            console.log(this.points)
            if(i < len-1){
                  this.poly = new L.Polyline([this.points], { color: 'red', weight: 3 }).addTo(this.fg);
            }
            // zoom the map to the polyline
            this.map.fitBounds(this.fg.getBounds())
            i++;
        }
        new L.Marker(this.points[0], {
        icon: new L.DivIcon({
        html: ` <img src="assets/icon/B733.png" style="width:25px"/>`,
        iconSize: [20, 20],
        })

        }).addTo(this.map)
    }