Leaflet 更新传单/地图框中的图层

我正在尝试进行实时地图可视化，通过WebSocket不断获取新点。最初在地图上绘制这些标记似乎很简单，但我不确定在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);

---

有更好的方法吗？

没有理由只为了将对象添加到地图中而执行构建

GeoJSON

对象的中间步骤。根据您的具体需要，您可以执行以下操作：

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

---

您应该管理

tweets

对象，使其仅包含地图上不可见的点。删除所有旧的标记，以便您可以再次添加它们，这当然会非常缓慢。

我会查看传单实时：

将实时数据放在传单地图上：实时跟踪GPS装置、传感器数据或任何东西

---

您可以通过传递一个

false

而不是真实数据来创建一个空的GeoJSON层：

//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);

对于一条tweet，我想你可以创建一个特性而不是FeatureCollection，尽管我不知道额外的抽象层是否会对性能产生任何影响

编辑：下面是一个显示.addData方法的示例小提琴：

如果你增加10000点，速度会明显减慢，而对于15000点，速度会非常缓慢，但我怀疑这与如何增加点没有多大关系，因为需要渲染这么多的圆形标记

---

如果您还没有，您可能想尝试使用新的，它可以更快地重新绘制向量层，并且通常对大型数据集更具响应性。将此15000点示例与相同的代码进行比较。并不是所有的东西都是固定的（弹出窗口在两种情况下都需要很长时间才能打开），但尝试拖动地图时的延迟时间差异非常显著。

您的目标是随着时间的推移不断向地图添加点，还是也要删除旧点？当然，使用像L.GeoJSON这样的分组层是有原因的。如果您想轻松设置样式，请附加EventHandler、迭代层、添加/删除层等。但我确实说过“…只是为了让你能把它添加到地图上”。