更新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