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

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

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.

Il existe également le plugin leaflet-vector-couches qui prend en charge les services postGIS http://jasonsanford.github.io/leaflet-vector-layers/demos/postgis-restful-web-service-framework/

De par son apparence, vous pouvez filtrer le service.

J'ai utilisé ce plugin pour les services ArcGIS et ça a été vraiment bien.

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