OpenLayers와 Leaflet에서 Feature Clustering

안녕하세요 캡틴개구리입니다. 

OpenLayers3(OL3)와 Leaflet에서 Feature Clustering을 알아보도록 하겠습니다. 

그전에 결과화면부터 보겠습니다.

> 서비스바로가기

Openlayers3 와 Leaflet 라이브러리를 받을 수 있는 곳은 아래와 같습니다. 

OpenLayers3 :  https://openlayers.org/ 

Leaflet : http://leafletjs.com/

VWORLD :  http://map.vworld.kr

leaflet.zip

 첨부파일(.Zip)은 leaflet에서 클러스터링을 진행하기 위해 추가적으로 필요한 자료들입니다. 

1. Openlayers3(이하 OL3)

활용 라이브러리 : ol.format.GeoJSON, ol.source.Vector, ol.loadingstrategy.bbox, ol.source.Cluster, ol.layer.Vector, ol.style.Style, ol.style.Stroke, ol.style.Fill

ol.style.Text, ol.layer.Tile, ol.source.XYZ, ol.Map, ol.View

지난시간에 알려드린 Openlayers3에서 wfs를 올리는 방법에 기초하여 소스 추가를 통해 Feature Clustering을 진행해보겠습니다.

<script></script>부분부터 살펴보도록 하겠습니다.

<script type="text/javascript">
    //Openlayers3
    var distance = 30;
    var format = new ol.format.GeoJSON();
    
    var vectorSource = new ol.source.Vector({
        format : format,
        url: function(extent) {
            return 'http://***.****.***/geoserver/progworks/wfs?service=WFS&' +
                'version=1.1.0&'+
                'request=GetFeature&'+
                'typename=progworks:lptd_ldreg_dogeun_point_info_2&' +
                'outputFormat=application/json&'+
                'srsname=EPSG:3857&' +
                'bbox=' + extent.join(',') + ',EPSG:3857';
        },
        strategy: ol.loadingstrategy.bbox
    })
    
    var clusterSource = new ol.source.Cluster({
        distance: parseInt(distance, 30),
        source: vectorSource
    });
    
    var styleCache = {};
    var clusters = new ol.layer.Vector({
        source: clusterSource,
        style: function(feature) {
            var size = feature.get('features').length;
            var style = styleCache[size];
            if (!style) {
                style = new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 20,
                        stroke: new ol.style.Stroke({
                            color: '#ffffff'
                            
                        }),
                        fill: new ol.style.Fill({
                            color: '#ff9933'
                        })
                    }),
                    text: new ol.style.Text({
                        text: size.toString(),
                        font:'Bold 20px Verdana',
                        fill: new ol.style.Fill({
                            color: '#ffffff'
                            
                            
                        })
                    })
                });
            styleCache[size] = style;
            }
        return style;
        }
    });
    
    var raster = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
        })
    });
    
    var map = new ol.Map({
        
        layers: [raster,clusters],
       
        target: document.getElementById('map'),
       
        view: new ol.View({
          center: [14128579.82, 4512570.74],
          maxZoom: 19,
          zoom: 10
        })
    });
});
</script>

소스가 점점 길어지는거 같습니다... ㅠㅠ 하하하하하 

먼저 Feature Clustering를 위해 데이터는 불러와야합니다. 데이터 출저는 "국가공간정보포털 오픈마켓의 지적도근점 정보를 이용하였습니다.

데이터는 wfs으로 불러와 변수 vectorSource에 담았습니다.

그후 clusterSource에서 wfs방식으로 불러온 데이터를 활용하여 Cluster를 진행하였습니다. 그 이후 스타일 지정 이후 map에서 layers로 스타일이 지정된 변수 clusters를 불러오면 끝입니다. 

<boby></body>부분은 아래와 같습니다.

<div id="map"></div>

2. Leaflet

활용 라이브러리 : L.map, L.tileLayer, L.Util.extend, L.Util.getParamString, L.geoJson, L.markerClusterGroup

<script></script>부분부터 살펴보도록 하겠습니다.

<script type="text/javascript">
//Leaflet
    var leafletMap = L.map('leafletMap').setView([37.52470308242787, 126.9234],10)
    L.tileLayer('http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png').addTo(leafletMap);
    
    var owsrootUrl = 'http://***.****.***/geoserver/progworks/wfs';
    
    var defaultParameters = {
        service : 'WFS',
        version : '1.1.0',
        request : 'GetFeature',
        typeName : 'progworks:lptd_ldreg_dogeun_point_info_2',
        outputFormat : 'application/json',
        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 : 'json',
        jsonpCallback : 'getJson',
        success : function(response){
            markers.addLayer(L.geoJson(response));
        }
    });
    
    var markers = L.markerClusterGroup({
        //Disable all of the defaults:
        spiderfyOnMaxZoom: true, showCoverageOnHover: false, zoomToBoundsOnClick: false
    });
    
    leafletMap.addLayer(markers);
</script>

Leaflet에서도 Openlayers3에서 데이터를 불러왔던 wfs형태로 데이터를 불러오도록 하겠습니다.

Leaflet Feature Clustering에서 가장 중요한 부분은 29행부터 입니다.!!!!!!!!

JQuery ajax를 이용하여 wfs형태의 데이터로 불러온 데이터를 기존에는 바로 " addTo(leafletMap); "  했지만 이번에는 변수 markers에 담아줍니다.

이렇게 " markers.addLayer(L.geoJson(response)); " 이후 L.markerClusterGroup 함수를 이용하여 Clusterring이 진행됩니다.

그리고 그렇게 진행된 markers를 " leafletMap.addLayer(markers); "를 해주시면 끝이납니다.

<boby></body>부분은 아래와 같습니다.

<div id="leafletMap"></div>

결과화면은 아래와 같습니다.

> 서비스바로가기