Leafletを使用して大規模なデータセットの一部を効率的に表示する方法は?


13

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


1
ジオサーバーのwfsにjsonを尋ねるだけですか?
イアンタートン

私が正しく理解していれば、JSONのリクエストをハードコーディングすると、ソリューション1のように、データセット全体を単一のJSON BLOBとして転送するように指示することになります-バインドされたリクエストを取得するには、実際のWFSが必要です現在のビューポートに、いや?
スティーブベネット14

マップの境界によってwfs要求をフィルター処理します(リーフレットは自動的にそれを行いませんか?)
イアンタートン

そのためには、WFSを話す必要がありますか?(メンテナンスされていない)WFS-geojsonプラグインのみに存在するafaik?
スティーブベネット14

1
WFSはそれほど難しいものではありません-リーフレットが問題になるかもしれません>
Ian Turton

回答:


4

わかりました、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ファイルを指定します。



0

解決策が見つからない場合は、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);
    }
});

これによりリクエストが現在のビューポートにどのように制限されるかわかりませんか?
alphabetasoup

0

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


1
興味深いことに、私はそれについて聞いたことがありませんでした。しかし、$ 29 / moで、それは間違いなく愛好家、またはほとんどの小さな研究プロジェクトの価格範囲外です。
スティーブベネット14

4
これは質問に実際には答えず、広告のように表示されます。質問者は、大きなデータセットの効率的な表示を促進する方法を望んでいるようです。製品を提供するだけで、なぜそれがより効率的であるかを説明するだけでは不十分のようです。
コナー14

1
OPは問題を提示し、可能な解決策を提示しました。この問題のすべての解決策には、時間とお金のいずれかでコストがかかります。
ChrisInCambo 14

@Conorこの投稿は質問に答えているように見えますが、ソリューションの性質とポスターと製品との関係については完全に前もって記載されていますが、推奨される理由を詳しく説明することでメリットが得られます。
whuber

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.