如何使用Leaflet有效显示大量数据集的一部分？

我一直看到非GIS Web开发人员遇到此问题，而且我不确定解决方案是什么。

1. 有一些包含数千个项目的数据集。
2. 我们希望向用户显示地图，其中可见的子集显示为交互式，可单击的元素。

有什么方法可以做到这一点？

我可以想到这些，但是它们并不令人满意，所以我想知道还有什么：

1. 将所有数据存储在GeoJSON文件中，将其传输到浏览器，然后让Leaflet显示它。问题：不适用于大型数据集。TopoJSON稍微提高了限制。这也会在页面加载时造成很大的延迟。

2. 使用Mapbox，将所有数据存储在Mapbox的交互式图层中，然后使用Mapbox.js进行显示。效果不错，但要花钱，而且您不能自己托管它。

3. 使用GeoServer访问PostGIS数据库，使用WFS-geojson传单插件从那里访问数据。它可能可以工作，但是似乎不再维护WFS-geojson Leaflet插件。

4. 使用CartoDB，将所有数据存储在CartoDB表中，然后使用CartoDB.js进行显示。效果很好，但价格可能非常昂贵。可以自己托管它，但安装CartoDB并非易事。

所有这些使我认为我必须缺少一些更好的，自由的方法。它是什么？

编辑

也许我太容易注销了WFS-geojson插件。有一个叉子仍然可见一些活动（4个月前）：https : //github.com/johanlahti/azgs-leaflet

好的，我在2中的假设是不正确的。您可以使用mapbox.js。我相信最终结果会有所不同-标记本身将是一个静态栅格图层，但它们将是可单击的。

进行大规模交互工作的规范是https://github.com/mapbox/utfgrid-spec

它是在https://github.com/danzel/Leaflet.utfgrid（传单插件）以及mapbox.js中在客户端实现的 。

在服务器端，它在https://github.com/mapbox/tilelive.js中实现，因此在TileMill中实现， 例如： http://tilemill-server/tile/projectname/7/115/78.grid.json

它还在TileStache中实现，但不是在tilestream或mbtiles-server中实现。UTFgrid数据似乎由TileMill存储在mbtiles文件中，但是被那些忽略。

因此，您不仅不需要mapbox.com，也不需要mapbox.js。为了方便起见，Mapbox.js似乎主要是将东西粘合在一起：实例化地图，获取图块并增加交互性的单个调用。

但是，如果您确实使用mapbox.js，那么我将缺少一个难题，那就是tilejson。您将与地图对应的tilejson文件提供给mapbox.json。

还有一个leaflet-vector-layers插件，它支持postGIS服务 http://jasonsanford.github.io/leaflet-vector-layers/demos/postgis-restful-web-service-framework/

通过它的外观，您可以过滤服务。

我已经将此插件用于ArcGIS服务，它的确很棒。

如果您仍然找不到解决方案，请使用以下解决方案：http : //gis.xyz/leaflet.html#

 var owsrootUrl = 'http://217.8.255.188:8080/geoserver/opengeo/ows';

 var defaultParameters = {
     service : 'WFS',
     version : '2.0',
     request : 'GetFeature',
     typeName : 'opengeo:evernote_geom',
     outputFormat : 'text/javascript',
     format_options : 'callback:getJson',
     SrsName : 'EPSG:4326'
};

var parameters = L.Util.extend(defaultParameters);
var URL = owsrootUrl + L.Util.getParamString(parameters);

var WFSLayer = null;
var ajax = $.ajax({
    url : URL,
    dataType : 'jsonp',
    jsonpCallback : 'getJson',
    success : function (response) {
       WFSLayer = L.geoJson(response, {
            style: function (feature) {
                return {
                    stroke: false,
                    fillColor: 'FFFFFF',
                    fillOpacity: 0
                };
            },
            onEachFeature: function (feature, layer) {
                popupOptions = {maxWidth: 600};
                layer.bindPopup('<h4>'+feature.properties.url+'</h4><br>'+feature.properties.title
                    ,popupOptions);
            }
        }).addTo(map);
    }
});