Leaflet을 사용하여 대규모 데이터 세트의 일부를 효율적으로 표시하는 방법은 무엇입니까?

비 GIS 웹 개발자 가이 문제를 겪고있는 것을 계속 보았으며 솔루션이 무엇인지 잘 모르겠습니다.

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 서비스를 지원하는 leaflet-vector-layers 플러그인도 있습니다 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);
    }
});