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です。mapbox.jsonには、マップに対応するtilejsonファイルを指定します。

返信が遅くなってすみませんが、postGISサービスhttp://jasonsanford.github.io/leaflet-vector-layers/demos/postgis-restful-web-service-framework/をサポートするleaflet-vector-layersプラグインもあります

その外観により、サービスをフィルタリングできます。

このプラグインを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);
    }
});

これを行う最も簡単な方法はhttps://mangomap.comです。1行のコードを書くことなく、約10分ですべてをセットアップできます。

Node.jsおよびPostgreSQLとPostGISを使用してオンラインWebマッピングを行う方法を紹介するプレゼンテーションがあります。