OpenLayer, 마커 만들기

Web/JavaScript
2021. 11. 9.

OpenLayer, 마커 만들기

마커 만들기

기존 과정을 넘겨, 바로 Marker 생성으로 넘어가 보도록 한다.

2021.11.09 - [Web/JavaScript] - OpenLayer, 지도 이동하기

OpenLayer, 지도 이동하기

OpenLayer, 지도 이동하기 지도 이동하기 map.getView().setCenter('좌표'); 지도 이동하는 방법은 다음과 같다. map을 담고 있는 변수 명의 getView(). setCenter(경도, 위도)를 담으면 이동이 가능하다. 그러..

mollangpiu.tistory.com

이전 글에서 코드를 추가하여 마커 기능을 추가하였다.

소스 공유

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>
        <button onclick='move()'>이동</button>
        <div id='js-map'></div>
    </body>

    <script src="../../assets/js/proj4.js"></script>
    <script src="../../assets/js/ol-debug.js"></script>
    <script src="../../assets/js/ol-debug.js"></script>

    <script src="../../assets/js/jquery.js"></script>
    <script>
        var markerLayer;    //마커 Layer
        var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });


var map = new ol.Map({
    view: new ol.View({
        zoom: 16,
        center: new ol.geom.Point([ 126.97659953, 37.579220423 ]) //처음 중앙에 보여질 경도, 위도 
        .transform('EPSG:4326', 'EPSG:3857') //GPS 좌표계 -> 구글 좌표계
        .getCoordinates(), //포인트의 좌표를 리턴함
    }),
    target: 'js-map',
    layers: [
        new ol.layer.Tile({
            source : new ol.source.XYZ({ //vworld api 사용
            url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png',
            //tileGrid: tileGrid
        })
        }),
        vectorLayer
    ]
});

//이동하기
function move() {

    map.beforeRender(ol.animation.pan({
        source: map.getView().getCenter(),
        duration: 1000
    }));

    map.getView().setCenter(
        new ol.geom.Point([ 126.95659953, 37.578220423]).transform('EPSG:4326', 'EPSG:3857').getCoordinates()
    );

    map.getView().setZoom(parseInt(16));
}

// 마커 레이어에 들어갈 소스 생성
var markerSource = new ol.source.Vector();

addMarker();

//마커 등록하기 함수
function addMarker() {

    //Point 좌표 등록
    var point_feature = new ol.Feature({
        geometry: new ol.geom.Point([126.95659953, 37.578220423]).transform('EPSG:4326', 'EPSG:3857')
    });
    
    
    //markerSource에 등록한 point를 담는다. addFeature를 이용해서, 여러개의 point를 source에 담는다.
    markerSource.addFeature(point_feature);

    //style을 활용해서, point의 style을 변경한다.
    var markerStyle = new ol.style.Style({
	    image: new ol.style.Icon({ //마커 이미지
	        opacity: 1, //투명도 1=100% 
	        scale: 0.1, //크기 1=100%

	        //marker 이미지, 해당 point를 marker로 변경한다.
	        src: './marker04.png'
	    }),
        //html의 css, z-index 기능이다.
	    zindex: 10
	});

    // 마커 레이어 생성
	markerLayer = new ol.layer.Vector({
	    source: markerSource, //마커 feacture들
	    style: markerStyle //마커 스타일
	});

	// 지도에 마커가 그려진 레이어 추가
	map.addLayer(markerLayer);
}

    </script>
</html>

앞서, 오픈레이어의 구조 중 제일 중요한 것을 꼽는다면, Layer가 되겠다.

Layer는 OpenLayer를 다룬다면 반드시 저장해야 할 내용이다.

Layer의 관리에 따라서 OpenLayer의 기능을 추가하기 용이하다.

Marker 만드는 원리

OpenLayer에서 Marker를 만드는 원리는 다음과 같다.

OpenLayer는 Point, LineString, Polygon, Circle로 구성되어 있다. (점, 선, 다각형, 원)

이 중, Marker는 점을 이용한 방법이다.

OpenLayer의 Point는 점이다.2021.10.11 - [Web/JavaScript] - OpenLayer, 스타일 변경하기

OpenLayer, 스타일 변경하기

OpenLayer, 스타일 변경하기 스타일 변경하기 기존의 오픈레이어를 사용하기에는 표시되는 선이 매우 얇다. 지도의 가독성이 떨어지고, 구분이 어려워지는 단점이 있다. 그래서 선의 스타일을 변

mollangpiu.tistory.com

이를, style 함수를 이용해서 꾸민다.

//style을 활용해서, point의 style을 변경한다.
    var markerStyle = new ol.style.Style({
	    image: new ol.style.Icon({ //마커 이미지
	        opacity: 1, //투명도 1=100% 
	        scale: 0.1, //크기 1=100%

	        //marker 이미지, 해당 point를 marker로 변경한다.
	        src: './marker04.png'
	    }),
        //html의 css, z-index 기능이다.
	    zindex: 10
	});

위의 코드 중 style 지정에서 src에 보면, 이미지를 불러오는 경로가 붙어있다.

따라서, marker는 point의 응용이다.

또한 src의 경로를 이용해서, 원하는 marker로 변경이 가능하다.

Layer의 구조

point를 설명하기 앞서, OpenLayer의 간단한 구조를 설명한다.

객체명	설명
Feature	좌표, 데이터를 담은 객체이다.
Source	Feature의 집합 객체이다.
Layer	지도에 표시되는 집합 객체이다. 내용은 Source와 Style 등으로 결정된다.

설명을 한다면, Point와 LineString을 결정짓는 것은 Feature의 역할이다.

여러 개의 Feature가 모여서 만들어진 것이 Source이다.이제 사용자에게 표시되는 영역과 control을 도와주는 것이 Layer이다.

이 중, 가장 중요한 것은 다시 한번 설명하자면 Layer이다.

문단 제목

var markerLayer;

var markerSource = new ol.source.Vector();
addMarker();

//마커 등록하기 함수
function addMarker() {

    //Point 좌표 등록
    var point_feature = new ol.Feature({
        geometry: new ol.geom.Point([126.95659953, 37.578220423]).transform('EPSG:4326', 'EPSG:3857')
    });
    
    
    //markerSource에 등록한 point를 담는다. addFeature를 이용해서, 여러개의 point를 source에 담는다.
    markerSource.addFeature(point_feature);

    //style을 활용해서, point의 style을 변경한다.
    var markerStyle = new ol.style.Style({
	    image: new ol.style.Icon({ //마커 이미지
	        opacity: 1, //투명도 1=100% 
	        scale: 0.1, //크기 1=100%

	        //marker 이미지, 해당 point를 marker로 변경한다.
	        src: './marker04.png'
	    }),
        //html의 css, z-index 기능이다.
	    zindex: 10
	});

    // 마커 레이어 생성
	markerLayer = new ol.layer.Vector({
	    source: markerSource, //마커 feacture들
	    style: markerStyle //마커 스타일
	});

	// 지도에 마커가 그려진 레이어 추가
	map.addLayer(markerLayer);
}

설명을 한다면, Layer를 담는 변수는 웬만하면 함수 바깥에 내놓는 것이 좋다.

되도록이면 먼저 읽을 수 있도록 설정할수록 더 좋다.

var point_feature = new ol.Feature({
    geometry: new ol.geom.Point([126.95659953, 37.578220423]).transform('EPSG:4326', 'EPSG:3857')
 });

이제 다시 설명한다면 Feature를 활용해서 Point를 등록한다.

전에 설명했다시피 해당 설명글은 projection(좌표계) 변경이 되어있지 않으므로, transform을 이용해야 한다.

var markerSource = new ol.source.Vector();

//markerSource에 등록한 point를 담는다. addFeature를 이용해서, 여러개의 point를 source에 담는다.
markerSource.addFeature(point_feature);

이를 Source에 Feature를 넣는다.

Source는 Feature의 집합이다.

함수	설명
addFeature()	Feature 한개를 담을 때 사용하는 함수
addFeatures()	Feature를 두개 이상 담을때 사용하는 함수

addFeature()를 활용한 이유는 여러 개의 좌표를 불러올 경우 반복문을 활용하여 add를 통해 Source에 저장할 수 있기 때문이다.

이는 매우 유용한 함수이므로, 알려주기 위해 사용하게 되었다.

//style을 활용해서, point의 style을 변경한다.
    var markerStyle = new ol.style.Style({
	    image: new ol.style.Icon({ //마커 이미지
	        opacity: 1, //투명도 1=100% 
	        scale: 0.1, //크기 1=100%

	        //marker 이미지, 해당 point를 marker로 변경한다.
	        src: './marker04.png'
	    }),
        //html의 css, z-index 기능이다.
	    zindex: 10
});

Layer에 사용할 style을 등록한다.

이 또한 웬만하면 함수 바깥에 있는 것을 추천한다.

// 마커 레이어 생성
	markerLayer = new ol.layer.Vector({
	    source: markerSource, //마커 feacture들
	    style: markerStyle //마커 스타일
	});

모든 과정이 준비되었다면, Layer 객체를 선언과 동시에 source와 style을 적용하였다.

이 또한 add 함수를 통하여 등록이 가능하다. 그러나 이를 설명하자면 복잡해질 수 있어서 생략하게 되었다.

map.addLayer(markerLayer);

이렇게 만들어진 Layer는 addLayer 함수를 이용해서 map에 등록하는 과정으로 끝마치게 되었다.

마무리

다른 Marker 설명 글을 따라 적다 보면 Layer의 설명이 매우 미흡하다는 것을 알게 되었다.

특히 Point를 선언할 때마다 Layer의 객체 선언을 한다는 점에서 초보자가 여기서 기능 구현에 많은 에러 사항이 존재한다는 것을 알게 된다.

해당 Layer의 선언은 웬만하면 딱 한 번만 해야 한다.

이를 어길 경우, 동일 이름의 Layer 명칭이 등록되며 해당 Layer 기능 조작에 이탈이 발생된다.

'Web > JavaScript' 카테고리의 다른 글

OpenLayer, 클릭시 좌표 가져오는 방법 (0)	2021.11.12
JavaScript, CSS의 @keyframes 제어하기 (0)	2021.11.11
OpenLayer, 지도 이동하기 (0)	2021.11.09
OpenLayer, Layer 수정하기 (0)	2021.10.19
OpenLayer, 등록하기, 선택하기 동시 사용하기 (0)	2021.10.19

작은 새의 날개짓