[카테고리:] OpenLayers

ol3에서 지도 상의 특정한 좌표 지점에 팝업창을 표시하여 해당 지점과 관련된 정보를 표시하는 기능에 대한 API를 살펴 보겠습니다. 먼저 아래의 웹 페이지에 표시된 지도를 클릭하면 클릭된 지점에 대한 경위도 좌표계를 도분초로 표시하는데요. 한번 확인해 보시기 바랍니다.

위의 지도 상의 팝업에 대한 기능을 구현하는 코드를 하나 하나 살펴 보겠습니다. 먼저 필요한 외부 CSS와 스크립트를 아래처럼 추가합니다.

다음은 필요한 UI에 대한 태그인데요. ol3에서는 팝업창에 대한 구체적인 UI에 대해 ol3 엔진단에서 제공하는 것이 아니고 개발자가 직접 제공해야 합니다. 팝업창을 구성하는 닫기 버튼이라든지, 실제 내용이 표시되는 div 영역이라든지 말입니다. 아래는 UI에 대한 태그입니다.

id가 map인 div에 지도가 표시됩니다. 그리고 id가 popup인 div가 실제 팝업창인데요. 이 div 내부에는 다시 id가 popup-closer이라는 a 태그가 있고, id가 popup-content인 div가 있습니다. popup-closer인 a 태그는 팝업을 닫는 버튼으로 사용되고, popup-content인 div는 팝업의 내용을 채울 컨테이너로 사용됩니다. 이제 각 UI에 대한 지정된 스타일에 대한 코드를 살펴 봅시다.

자, 이제 위의 지도 페이지에 대한 코드를 살펴보겠습니다. 먼저 필요한 CSS와 js 라이브러리를 포함하는 코드입니다.




다음으로 UI에 대한 코드를 살펴 보겠습니다. 지도가 표시되는 div가 있고, 이 div에 대한 크기를 css로 지정하고 있습니다.



    



이제 다음은 스크립트 코드에 대해 살펴볼텐데요. 먼저 웹 페이지의 모든 css 및 외부 라이브러리 로딩과 UI가 준비되었을 때 호출되는 jQuery의 ready 이벤트를 아래처럼 만들어 둡니다.


위의 코드 중 … 부분에 앞으로 더 많은 코드를 추가할 것인데요. Feature를 추가할 수 있는 레이어를 위한 데이터 소스는 ol.source.Vector입니다. 또한 이 소스를 통해 생성할 수 있는 레이어는 ol.layer.Vector이구요. 아래의 코드처럼 필요한 벡터 소스와 레이어에 대한 객체를 생성합니다.
var vectorSource = new ol.source.Vector();
var vectorLayer = new ol.layer.Vector({ source: vectorSource });

위에서 생성한 레이어는 지도에 추가되어야 합니다. 아래 코드의 6번째 줄을 보면 앞서 생성해 둔 레이어 객체 변수가 보입니다.
var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        vectorLayer
    ],
    
    target: 'map',
    
    controls: ol.control.defaults({
        attributionOptions: ({
            collapsible: false
        })
    }),

    view: new ol.View({
        center: [14827315, 4785815],
        zoom: 5
    })
});

위의 코드를 좀더 살펴보면, 지도 객체의 생성을 위해 ol.Map의 생성자를 호출하고 있는데요. 이 생성자에서 받는 옵션 객체를 보면 layers 키 값으로 Open Street Map 레이어와 앞서 만들어 둔 벡터 레이어를 지정해 레이어를 구성하고 있습니다. 그리고 9번의 target은 지도 표시될 div의 id이구요. 17번은 초기에 지도가 표시될 좌표와 줌 레벨값을 지정하고 있습니다.
다음으로 4개의 Feature를 추가하는 사용자 정의 함수를 어래처럼 호출합니다.
addImagePoint(vectorSource);
addTextPoint(vectorSource);
addPolyline(vectorSource);
addPolygon(vectorSource);

먼저 addImagePoint 함수를 살펴보면 다음과 같습니다.
function addImagePoint(/* ol.source.Vector */ src) {
    var feature = new ol.Feature(
        {
            geometry: new ol.geom.Point([14827315, 4785815])
        }
    );

    var style = new ol.style.Style({
        image: new ol.style.Icon({
            src: 'http://www.gisdeveloper.co.kr/images/kochu.png',
            scale: 0.7,
        })
    });

    feature.setStyle(style);
    feature.set('name', '이미지 포인트 Feature');

    src.addFeature(feature);
}

Feature의 정의는 3가지가 필요합니다. 하나는 도형, 즉 지오메트리(Geometry)의 좌표값이고 이 도형을 그리기 위한 스타일이며, 마지막으로 속성값의 지정입니다. 2-6번 코드가 포인트 지오메트리의 좌표값을 지정하는 코드이며, 8~13번은 해당 포인트를 화면에 표시할때 이미지 스타일 객체를 생성하는 코드입니다. 그리고 15번의 setStyle을 통해 스타일을 지정합니다. 그리고 16번은 속성을 key 값과 value 값을 통해 지정합니다. 이렇게 생성된 피쳐는 벡터 레이어의 소스에 addFeature 함수를 통해 18번 코드처럼 추가됩니다.
나머지 3개에 대한 함수에 대한 코드는 아래와 같습니다.
function addPolygon(/* ol.source.Vector */ src) {
    var feature = new ol.Feature({
        geometry: new ol.geom.Polygon(
            [
                [
                    [13768449, 4871327],
                    [14556056, 5287144],
                    [14445986, 4166883],
                    [13995925, 3861135],
                    [13768449, 4871327],
                ]
            ]
        )
    });

    var style = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'blue',
            width: 3
        }),
        fill: new ol.style.Fill({
            color: 'rgba(0,0,255,0.6)'
        })
    });

    feature.setStyle(style);
    feature.set('name', '폴리곤 Feature');

    src.addFeature(feature);
}

function addPolyline(/* ol.source.Vector */ src) {
    var feature = new ol.Feature({
        geometry: new ol.geom.LineString([
            [16030985, 5565986],
            [15480638, 4318534],
            [14384837, 3780417],                            
        ])
    });

    var style = new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 4
        })
    });

    feature.setStyle(style);
    feature.set('name', '폴리라인 Feature');

    src.addFeature(feature);
}

function addTextPoint(/* ol.source.Vector */ src) {
    var feature = new ol.Feature({
        geometry: new ol.geom.Point([13778283, 4331832])
    });

    var style = new ol.style.Style({
        text: new ol.style.Text({
            text: "ol3",
            scale: 2,
            offsetY: 0,
            stroke: new ol.style.Stroke({
                color: 'black',
                width: 1
            }),
            fill: new ol.style.Fill({
                color: 'yellow'
            })
        })
    });

    feature.setStyle(style);
    feature.set('name', '텍스트 포인트 Feature');

    src.addFeature(feature);
}

각 함수를 보면 도형의 형태에 따른 지오메트리의 타입과 해당 좌표값의 지정에 대한 형태만 다르고 스타일이나 속성값을 지정하는 형태는 유사합니다. 여기서는 지오메트리에 대해 Point과 Polyline에 대한 LineString 그리고 Polygon 만을 언급하였는데요. 이외에도 MultiLineString, MultiPolygon, MultiPoint 등도 있습니다.
이제 끝으로 피쳐를 마우스로 클릭하면 해당 피쳐에 대한 속성값을 표시하는 코드를 살펴 보겠습니다.
map.on('singleclick', function (evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
        return feature;
    });

    if (feature) {
        alert(feature.get('name'));
    }
});

지도에 대한 singleclick 이벤트를 등록했고, 이 이벤트를 통해 클릭한 피쳐와 피쳐의 소속 레이어를 얻을 수 있는 forEachFeatureAtPixel 함수를 이용하고 있습니다. 앞서 피쳐를 생성할때 name이라는 키값으로 속성값을 저장해 두었는데요. 위의 코드에서 사용하고 있는 것을 볼 수 있습니다.
아래는 위에서 설명한 전체 코드에 대한 다운로드입니다.