Angular中Leaflet地图更新飞行路径时重复折线问题求助

看起来你遇到的核心问题是每次数据更新时，旧的折线和标记没有被彻底清除，同时新数据还在累加旧的坐标点，导致地图上出现重复的路径。咱们一步步拆解问题原因，然后给出修复方案：

问题根源分析 #

• points数组未清空：points是类的成员变量，每次获取新数据后调用AddPath时，你只是把新坐标push进去，旧的坐标还留在数组里，所以新生成的折线会包含所有历史路径点。
• 循环内重复创建Polyline：在AddPath的for循环里，每遍历一个坐标点就创建一次Polyline，并且每次都传入整个points数组——这意味着每循环一次就会多画一条包含所有已添加点的折线，完全是重复绘制。
• 标记点未绑定到FeatureGroup：飞机图标标记是直接添加到map上的，而不是fg这个featureGroup里，所以调用fg.clearLayers()时根本清除不了旧的标记，导致标记也会重复出现。

修复后的代码及说明 #

咱们针对上述问题逐一修改：

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

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

  ionViewDidEnter() { 
    this.leafletMap(); // 先初始化地图，再获取数据，顺序更合理
    this.getmarker(); 
  } 

  leafletMap() { 
    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 => { 
            const pathData = JSON.parse(data.data);
            console.log(pathData);
            this.fg.clearLayers(); // 先清除所有旧的图层（折线+标记）
            this.AddPath(pathData); 
          })
      },5000)
    })
  } 

  AddPath(path: any[]) { 
    // 临时创建当前路径的点数组，避免累加旧数据
    const currentPoints = path.map(datas => ({ lat: datas.lat, lng: datas.lng }));
    
    // 只创建一次Polyline，传入当前所有路径点
    this.poly = new L.Polyline(currentPoints, { 
      color: 'red', 
      weight: 3 
    }).addTo(this.fg); 

    // 缩放地图到当前路径范围
    this.map.fitBounds(this.fg.getBounds());

    // 将标记添加到featureGroup，这样清除图层时会一起删掉旧标记
    new L.Marker(currentPoints[0], { 
      icon: new L.DivIcon({ 
        html: ` <img src="assets/icon/B733.png" style="width:25px"/>`, 
        iconSize: [20, 20], 
      }) 
    }).addTo(this.fg); 
  } 
}

关键修改点说明 #

• 移除成员变量points，改用临时数组：每次处理新数据时，用map方法直接把新的JSON数据转换成坐标点数组，避免旧数据累加。
• 调整初始化顺序：先调用leafletMap()初始化地图，再启动定时获取数据的任务，逻辑更合理。
• 循环外创建Polyline：不再在循环里重复创建折线，而是一次性把所有当前路径点传入，只生成一条折线。
• 标记点绑定到FeatureGroup：把飞机标记添加到fg中，这样fg.clearLayers()就能同时清除旧的折线和标记，彻底解决重复显示问题。

这样修改后，每次数据更新时，旧的图层会被完全清除，然后只绘制新的路径和标记，就不会出现重复折线的问题了。

内容的提问来源于stack exchange，提问作者Ali Ghassan