更新Leaflet/Mapbox中的圖層

Question

我試圖通過websockets實時繪製一個映射可視化文件，並在其中獲取新的點。最初在地圖上繪製這些標記似乎很簡單，但我不確定在Mapbox上更新圖層的正確方式是什麼。

截至目前，每當我得到一個新的點，我刪除舊的層，創建一個新的，然後將其添加到地圖上。這種方法存在的問題是速度慢，而且對於大量的點（> 5000）它開始滯後。

// remove layer 
    if (this.pointsLayer != null) { 
     map.removeLayer(this.pointsLayer); 
    } 

    // build geoJSON 
    var geoJSON = { "type": "FeatureCollection", "features": [] }; 
    geoJSON["features"] = tweets.map(function(tweet) { 
     return this.getGeoPoint(tweet); 
    }.bind(this)); 

    // add geoJSON to layer 
    this.pointsLayer = L.mapbox.featureLayer(geoJSON, { 
     pointToLayer: function(feature, latlon) { 
      return L.circleMarker(latlon, { 
       fillColor: '#AA5042', 
       fillOpacity: 0.7, 
       radius: 3, 
       stroke: false 
      }); 
     } 
    }).addTo(map); 

有沒有更好的方法？

Answer 1

你可以通過它創建一個空的GeoJSON的層的false，而不是真實的數據：

//create empty layer 
this.pointsLayer = L.mapbox.featureLayer(false, { 
    pointToLayer: function(feature, latlon) { 
     return L.circleMarker(latlon, { 
      fillColor: '#AA5042', 
      fillOpacity: 0.7, 
      radius: 3, 
      stroke: false 
     }); 
    } 
}).addTo(map); 

然後使用.addData來更新它作爲新的鳴叫進來喜歡的東西：

// build geoJSON 
var geoJSON = { "type": "FeatureCollection", "features": [] }; 
geoJSON["features"] = /**whatever function you use to build a single tweet's geoJSON**/ 

// add geoJSON to layer 
this.pointsLayer.addData(geoJSON); 

對於單個推文，我想你可以只是c創建一個Feature而不是FeatureCollection，儘管我不知道這個額外的抽象層是否會影響性能。

編輯：這裏是表示工作.addData方法的例子小提琴：

http://jsfiddle.net/nathansnider/4mwrwo0t/

明顯，如果您添加10000點它不會慢下來，併爲15000點，它是真正呆滯，但我懷疑這與添加點的方式有關，因爲渲染這麼多circleMarkers的要求。

如果您還沒有，可以嘗試使用新的Leaflet 1.0 beta，它可以更快地重新繪製矢量圖層，並且通常對大型數據集響應更快。將這個15,000點示例using Leaflet 0.7.5與相同的代碼using Leaflet 1.0.0b2進行比較。並非所有東西都是固定的（彈出窗口需要很長時間才能打開），但拖動地圖時滯後時間的差異非常大。

Answer 2

沒有理由通過構建一個GeoJSON對象的中間步驟，以便您可以將其添加到地圖。根據您的具體需求，你可以做這樣的事情：

tweets.forEach(function(t) { 
    L.marker(this.getGeoPoint(t)).addTo(map); 
}, this); 

您應該管理tweets對象，因此它只包含尚未看到地圖上的點，雖然。刪除所有舊的標記，只要你可以再次添加它們，當然會很慢。

Answer 3

我想看看傳單實時：實時跟蹤GPS設備，傳感器數據或任何事情：

在單張地圖看跌的實時數據。

https://github.com/perliedman/leaflet-realtime