[카테고리:] OpenLayers

이 글은 클릭된 Feature의 속성 얻기와 매우 비슷한 내용을 담고 있으니, 해당 글도 참고하기 바랍니다.

Vector 류의 Layer는 Feature의 그룹을 데이터셋으로 갖는다. Feature는 공간 데이터의 좌표값을 갖는 Geometry와 속성값을 갖는 Object 타입의 Properties로 이루어져 있다. 아래의 코드는 지도를 구성하는 레이어 중 Vector 류 중 마우스 포인터 위치의 Feature의 속성에 접근하는 것이다.

map.on('pointermove', showInfo);
    
function showInfo(event) {
    var features = map.getFeaturesAtPixel(event.pixel);
    if (!features) {
        // 마우스 위치에 어떠한 Feature도 없음
        return;
    }

    // 마우스 포인터 위치에 존재하는 Feature 중 첫번째(features[0])
    var properties = features[0].getProperties();  
    // properties 객체가 object 타입의 Feature에 대한 속성값임
}

ol에서 폴리라인이나 폴리곤의 외곽선은 Stroke로 지정된 스타일로 그려집니다. 이 글은 하나의 도형에 대해 여러개의 Stroke로 그려주는 방법에 대한 내용을 정리합니다. 하나의 폴리라인에 대해서 3개의 색상으로 표현하는 것을 예로 설명합니다. 먼저 폴리라인의 좌표를 인코딩된 문자열로 다음처럼 표현할 수 있습니다.

var polyline = [
    'hldhx@lnau`BCG_EaC??cFjAwDjF??uBlKMd@}@z@??aC^yk@z_@se@b[wFdE??wFfE}N',
    'fIoGxB_I\\gG}@eHoCyTmPqGaBaHOoD\\??yVrGotA|N??o[N_STiwAtEmHGeHcAkiA}^',
    'aMyBiHOkFNoI`CcVvM??gG^gF_@iJwC??eCcA]OoL}DwFyCaCgCcCwDcGwHsSoX??wI_E',
    'kUFmq@hBiOqBgTwS??iYse@gYq\\cp@ce@{vA}s@csJqaE}{@iRaqE{lBeRoIwd@_T{]_',
    'Ngn@{PmhEwaA{SeF_u@kQuyAw]wQeEgtAsZ}LiCarAkVwI}D??_}RcjEinPspDwSqCgs@',
    'sPua@_OkXaMeT_Nwk@ob@gV}TiYs[uTwXoNmT{Uyb@wNg]{Nqa@oDgNeJu_@_G}YsFw]k',
    'DuZyDmm@i_@uyIJe~@jCg|@nGiv@zUi_BfNqaAvIow@dEed@dCcf@r@qz@Egs@{Acu@mC',
    'um@yIey@gGig@cK_m@aSku@qRil@we@{mAeTej@}Tkz@cLgr@aHko@qOmcEaJw~C{w@ka',
    'i@qBchBq@kmBS{kDnBscBnFu_Dbc@_~QHeU`IuyDrC_}@bByp@fCyoA?qMbD}{AIkeAgB',
    'k_A_A{UsDke@gFej@qH{o@qGgb@qH{`@mMgm@uQus@kL{_@yOmd@ymBgwE}x@ouBwtA__',
    'DuhEgaKuWct@gp@cnBii@mlBa_@}|Asj@qrCg^eaC}L{dAaJ_aAiOyjByH{nAuYu`GsAw',
    'Xyn@ywMyOyqD{_@cfIcDe}@y@aeBJmwA`CkiAbFkhBlTgdDdPyiB`W}xDnSa}DbJyhCrX',
    'itAhT}x@bE}Z_@qW_Kwv@qKaaAiBgXvIm}A~JovAxCqW~WanB`XewBbK{_A`K}fBvAmi@',
    'xBycBeCauBoF}}@qJioAww@gjHaPopA_NurAyJku@uGmi@cDs[eRaiBkQstAsQkcByNma',
    'CsK_uBcJgbEw@gkB_@ypEqDoqSm@eZcDwjBoGw`BoMegBaU_`Ce_@_uBqb@ytBwkFqiT_',
    'fAqfEwe@mfCka@_eC_UmlB}MmaBeWkkDeHwqAoX}~DcBsZmLcxBqOwqE_DkyAuJmrJ\\o',
    '~CfIewG|YibQxBssB?es@qGciA}RorAoVajA_nAodD{[y`AgPqp@mKwr@ms@umEaW{dAm',
    'b@umAw|@ojBwzDaaJsmBwbEgdCsrFqhAihDquAi`Fux@}_Dui@_eB_u@guCuyAuiHukA_',
    'lKszAu|OmaA{wKm}@clHs_A_rEahCssKo\\sgBsSglAqk@yvDcS_wAyTwpBmPc|BwZknF',
    'oFscB_GsaDiZmyMyLgtHgQonHqT{hKaPg}Dqq@m~Hym@c`EuiBudIabB{hF{pWifx@snA',
    'w`GkFyVqf@y~BkoAi}Lel@wtc@}`@oaXi_C}pZsi@eqGsSuqJ|Lqeb@e]kgPcaAu}SkDw',
    'zGhn@gjYh\\qlNZovJieBqja@ed@siO{[ol\\kCmjMe\\isHorCmec@uLebB}EqiBaCg}',
    '@m@qwHrT_vFps@kkI`uAszIrpHuzYxx@e{Crw@kpDhN{wBtQarDy@knFgP_yCu\\wyCwy',
    'A{kHo~@omEoYmoDaEcPiuAosDagD}rO{{AsyEihCayFilLaiUqm@_bAumFo}DgqA_uByi',
    '@swC~AkzDlhA}xEvcBa}Cxk@ql@`rAo|@~bBq{@``Bye@djDww@z_C_cAtn@ye@nfC_eC',
    '|gGahH~s@w}@``Fi~FpnAooC|u@wlEaEedRlYkrPvKerBfYs}Arg@m}AtrCkzElw@gjBb',
    'h@woBhR{gCwGkgCc[wtCuOapAcFoh@uBy[yBgr@c@iq@o@wvEv@sp@`FajBfCaq@fIipA',
    'dy@ewJlUc`ExGuaBdEmbBpBssArAuqBBg}@s@g{AkB{bBif@_bYmC}r@kDgm@sPq_BuJ_',
    's@{X_{AsK_d@eM{d@wVgx@oWcu@??aDmOkNia@wFoSmDyMyCkPiBePwAob@XcQ|@oNdCo',
    'SfFwXhEmOnLi\\lbAulB`X_d@|k@au@bc@oc@bqC}{BhwDgcD`l@ed@??bL{G|a@eTje@',
    'oS~]cLr~Bgh@|b@}Jv}EieAlv@sPluD{z@nzA_]`|KchCtd@sPvb@wSb{@ko@f`RooQ~e',
    '[upZbuIolI|gFafFzu@iq@nMmJ|OeJn^{Qjh@yQhc@uJ~j@iGdd@kAp~BkBxO{@|QsAfY',
    'gEtYiGd]}Jpd@wRhVoNzNeK`j@ce@vgK}cJnSoSzQkVvUm^rSgc@`Uql@xIq\\vIgg@~k',
    'Dyq[nIir@jNoq@xNwc@fYik@tk@su@neB}uBhqEesFjoGeyHtCoD|D}Ed|@ctAbIuOzqB',
    '_}D~NgY`\\um@v[gm@v{Cw`G`w@o{AdjAwzBh{C}`Gpp@ypAxn@}mAfz@{bBbNia@??jI',
    'ab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@',
    'mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJ',
    'uEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m',
    '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL'
].join('');

위의 좌표는 Geometry 중 Polyline으로 객체화되어야 하는데 아래와 같습니다.

var route = (new Polyline({
    factor: 1e6
}).readGeometry(polyline, {
    dataProjection: 'EPSG:4326',
    featureProjection: 'EPSG:3857'
}));

이제 Polyline 객체는 Feature로 객체화되어야 벡터 레이어의 구성요소가 될 수 있는데, Feature 객체화를 위한 코드는 아래와 같습니다.

var routeFeature = new Feature({
    geometry: route
});

벡터 레이어의 구성 요소인 Feature 객체를 그릴때 사용하는 스타일로 3개의 서로 다른 굵기와 색상에 대한 객체는 아래와 같습니다.

var style = [
    new Style({
        stroke: new Stroke({
            color: 'black',
            width: 6
        })
    }),
    new Style({
        stroke: new Stroke({
        color: 'white',
        width: 4
        })
    }),
    new Style({
        stroke: new Stroke({
        color: 'red',
        width: 2
        })
    })
];

이제 아래처럼 벡터 레이어 객체를 생성할 수 있습니다.

var vectorLayer = new VectorLayer({
    source: new VectorSource({
        features: [routeFeature]
    }),
    style: style
});

최종적으로 위의 레이어로 구성되는 지도 객체를 생성합니다.

var map = new Map({
    target: document.getElementById('map'),
    view: new View({
        center: [-5639523.95, -3501274.52],
        zoom: 10,
        minZoom: 2,
        maxZoom: 19
    }),
    layers: [
        new TileLayer({ source: new OSM() }),
        vectorLayer
    ]
});

실행해 보면 아래와 같은 결과를 볼 수 있습니다.