Comment utiliser Leaflet pour afficher efficacement des parties d'un ensemble de données massif?

13

Je continue de voir des développeurs Web non SIG rencontrer ce problème et je ne suis pas sûr de la solution.

  1. Il existe un ensemble de données de milliers d'éléments.
  2. Nous voulons montrer une carte à l'utilisateur, avec le sous-ensemble visible d'eux comme éléments interactifs et cliquables.

Quelles méthodes existe-t-il pour ce faire?

Je peux penser à ceux-ci, mais ils ne sont pas très satisfaisants, alors je me demande ce qu'il y a d'autre:

  1. Stockez toutes les données dans un fichier GeoJSON, transférez-les dans le navigateur et laissez Leaflet les afficher. Problème: ne fonctionne pas vraiment avec de grands ensembles de données. TopoJSON relève un peu la limite. Cela provoque également un gros retard au chargement de la page.

  2. Utilisez Mapbox, stockez toutes les données dans une couche interactive sur Mapbox et utilisez Mapbox.js pour les afficher. Fonctionne très bien, mais coûte de l'argent, et vous ne pouvez pas l'héberger vous-même.

  3. Utilisez GeoServer pour accéder à une base de données PostGIS, utilisez le plugin de brochure WFS-geojson pour accéder aux données à partir de là. Cela fonctionne probablement, mais le plugin WFS-geojson Leaflet ne semble plus être maintenu.

  4. Utilisez CartoDB, stockez toutes les données dans une table CartoDB et utilisez CartoDB.js pour les afficher. Fonctionne très bien, mais peut coûter très cher. Il est possible de l'héberger vous-même, mais l'installation de CartoDB n'est pas anodine.

Tout cela me fait penser qu'il doit y avoir un moyen bien meilleur et gratuit que je manque. Qu'Est-ce que c'est?

ÉDITER

J'ai peut-être trop facilement supprimé le plugin WFS-geojson. Il y a une fourchette qui voit toujours une certaine activité (il y a 4 mois): https://github.com/johanlahti/azgs-leaflet

Steve Bennett
la source
1
demandez simplement au geoserver wfs pour json?
Ian Turton
Eh bien, si je comprends bien, si vous codez en dur une demande de JSON, vous lui dites essentiellement de transférer l'intégralité de l'ensemble de données en un seul blob JSON - tout comme la solution 1. Vous avez besoin de WFS réel pour obtenir des demandes limitées à la fenêtre actuelle, non?
Steve Bennett
filtrer la demande wfs par les limites de la carte (le dépliant ne le fait-il pas automatiquement?)
Ian Turton
Pour ce faire, il faudrait parler WFS, non? Et un afaik qui n'existe que dans le plugin WFS-geojson (non maintenu)?
Steve Bennett
1
WFS n'est pas si difficile - peut-être que la brochure est le problème>
Ian Turton

Réponses:

4

D'accord, mes hypothèses en 2 étaient incorrectes. Vous pouvez utiliser mapbox.js. Le résultat final sera un peu différent, je pense - les marqueurs eux-mêmes seront une couche raster statique, mais ils seront cliquables.

La spécification qui fait fonctionner l'interactivité à grande échelle est https://github.com/mapbox/utfgrid-spec

Il est implémenté côté client dans https://github.com/danzel/Leaflet.utfgrid (plugin de dépliant) et aussi mapbox.js.

Côté serveur, il est implémenté dans https://github.com/mapbox/tilelive.js et donc TileMill, par exemple: http://tilemill-server/tile/projectname/7/115/78.grid.json

Il est également implémenté dans TileStache, mais pas tilestream ou mbtiles-server. Les données UTFgrid semblent être stockées dans le fichier mbtiles par TileMill, mais sont ignorées par ceux-ci.

Donc non seulement vous n'avez pas besoin de mapbox.com, vous n'avez pas non plus besoin de mapbox.js. Mapbox.js semble principalement coller des éléments ensemble pour plus de commodité: un seul appel qui instancie une carte, récupère des tuiles et ajoute de l'interactivité.

Mais si vous utilisez mapbox.js, il y a un morceau du puzzle qui me manque, et c'est tilejson. Vous donnez à mapbox.json le fichier tilejson correspondant à votre carte.

Steve Bennett
la source
0

Si vous ne trouvez pas encore la solution, en voici une: 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);
    }
});
Tamas Kosa
la source
Je ne vois pas comment cela limite la demande à la fenêtre actuelle?
alphabetasoup