OpenLayer, Vector 적용하기

OpenLayer, Vector 적용하기

 

 

  Vector 적용하기

OpenLayer에서 Vector란, 지도의 좌표를 저장하는 Object입니다.

저장하거나 불러오거나 할 때 Vector을 사용합니다.

 

지금은 연습삼아서 GEOJOSN.IO를 통해서 해당 지도만의 Vector파일을 만들도록 하겠습니다.

저장 방식은 JSON 방식을 사용하고 있습니다.

 

지도에 마커, 선, 도형등 그릴 수 있다.

지도 위에 마커, 선, 도형 등 그릴 수 있게 해주는 기능입니다.

우리는 먼저, 이 기능을 사용하기 위해서 이 사이트의 도움을 받도록 하겠습니다.

 

 

https://geojson.io/

geojson.io

해당 사이트에 접속하셔서, 지도 위에 아무렇게나 그려주시면 됩니다.

 

 

해당 도형을 저장한다.

그리고 Save - GeoJSON을 통하여 기능을 저장하도록 합니다.

 

저장되는 내용, JSON

저장되는 내용은 사이트의 우측 프레임에 나타내는 그대로입니다.

저희는 이 내용을 우리가 만든 지도 위에  불러오도록 하겠습니다.

 

 

  JavaScript에 Vector 추가하기

Vector을 추가한다.

 JS에 해당 내용을 추가하도록 합니다.

기존의 JS 하단에 추가하며, 지도 먼저 생성 한 뒤, Vector을 그 뒤에 소환하도록 합니다.

 

여기서, url이란, 방금 전에 저장한 json 파일명을 뜻합니다.

 

저장된 geojson 파일을 경로에 맞춰 저장하신 후, url로 호출하면 됩니다.

 

 

 

//윈도우가 켜질때 자동으로 켜진다.
window.onload = init;

function init() {
    const map = new ol.Map({
        view : new ol.View({
            //지도 중심 좌표
            center : [14133660.310169345, 4513254.475042423],
            //지도 zoom 단계
            zoom : 5,
            //줌 확대 최대 단계
            maxZoom : 20,

        }),
    
        //  layers : [
        //      // 뷰, style 등을 관리하기 위해 설정한다.
        //      new ol.layer.Tile({
        //          source : new ol.source.OSM()
        //      })
        //  ],

        //지도를 표시할 대상의 id
        target : 'map'
    })

    // Basemaps Layers
    const openStreetMapStandard = new ol.layer.Tile({
        source : new ol.source.OSM(),
        visible : true,
        title : 'OSMStandard'
    })

    const openStreetMapHumanitarian = new ol.layer.Tile({
        source : new ol.source.OSM({
            url : 'https://{a-c}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'
        }),
        visible : false,
        title : 'OSMHumanitarian'
    })

    const stamenTerrain = new ol.layer.Tile({
        source : new ol.source.XYZ({
            url : 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg',
            attribuions : 'Map tiles by <a href="http://steman.com">Stamen Design</a>, under < a href="http://www.opensteetmap.org/copyright">ODbL</a>.'
        }),

        visible : false,
        title : 'StamenTerrain'
    })

    //map.addLayer(stamenTerrain);

    //Layer Group
    const baseLayerGroup = new ol.layer.Group({
        layers : [
            openStreetMapStandard, openStreetMapHumanitarian, stamenTerrain
        ]
    })

    map.addLayer(baseLayerGroup);



    // Layer Switcher Logic for Basemaps
    const baseLayerElements = document.querySelectorAll('.sidebar > input[type=radio]');
    //console.log(baseLayerElements);

    for(let baseLayerElement of baseLayerElements) {
        //console.log(baseLayerElement);

        //radio 버튼이 변경 될때 이벤트가 발생된다.
        baseLayerElement.addEventListener('change', function() {
            //console.log(this.value);

            //선택한 radio의 value를 가져온다.
            let baseLayerElementValue = this.value;
            //console.log(baseLayerElementValue);

            console.log('=================');
            baseLayerGroup.getLayers().forEach(function (element, index, array) {

                //radio 선택했을 때 해당 title를 가져오기 위해 선택한다.
                //이를 적용하기 위해서는 위의 Layer를 true로 적용시켜야 한다.
                let baseLayerTitle = element.get('title');

                element.setVisible(baseLayerTitle === baseLayerElementValue);

                //console.log('baseLayerTitle : '+ baseLayerTitle, 'baseLayerElementValue : '+ baseLayerElementValue);

                console.log(element.get('title'), element.get('visible'));
            })
        })
    }


    // Vector Layers
    const EUCountriesGeoJSON = new ol.layer.VectorImage({
        source : new ol.source.Vector({
            url: 'data/vector_data/test.geojson',
            format: new ol.format.GeoJSON()
        }),

        visible : true,
        title : 'EUCountriesGeoJSON'

    })

    map.addLayer(EUCountriesGeoJSON);
}

 

 

  결과 확인하기

지도 위에 Marker가 그려졌다.

 제가 만든 지도에 아까 전의 사이트에서 그려진 그림들이 그대로 불러오는 것을 확인할 수 있게 됩니다.

 

 

OpenLayear.zip

1.22MB

 

  주의할 점

 VisualStudio Code 사용하는 자에 한하여, 실행 시 Live Server로 실행을 하셔야 됩니다.