openlayers 5 기본기(지도 생성, 마커/팝업 생성)

1. 지도 생성

    // 지도 중심 좌표 (강남역)
    var olCenter = ol.proj.fromLonLat([127.027583,37.497928]);
 
    // 지도 기본 타일 설정
    var olLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
        url: 'http://api.vworld.kr/req/wmts/1.0.0/'+key+'/Base/{z}/{y}/{x}.png'                 // key는 브이월드 인증키이다.
        })
    });
 
    // 지도 기본 뷰 설정
    var olView = new ol.View({
        center: olCenter,
        zoom: 15,
        minZoom : 6,
        maxZoom : 19,
    });
 
    // 팝업 옵션 설정
    var overlay = new ol.Overlay({
        element: container,
        autoPan: true,
        autoPanAnimation: {
        duration: 250
        }
    });
 
    // 지도 생성
    var olMap = new ol.Map({
        layers: [olLayer],
        overlays: [overlay],
        target: 'vMap',                     // html에 존재하는 div영역의 id 이름
        view: olView,
        moveTolerance: 5
    });

2. 지도 클릭(클릭한 곳 좌표 구하기)

    // 지도 클릭 이벤트
    olMap.on('singleclick', function(event) {
 
        // 마우스 커서 아래의 좌표값 구하기
        var coordinate = event.coordinate;
        lon = coordinate[0];
        lat = coordinate[1];
 
        if (olMap.hasFeatureAtPixel(event.pixel) === true) {                                        // 마커를 클릭할 경우
            overlay.setPosition([lon,lat]);                                     // 해당 좌표로 팝업 이동
        }else{
            
            if(checkRoadView){                                                                      // checkRoadView가 true라면 로드뷰 실행 fales라면 마커 생성
                var tansform = ol.proj.transform([lon,lat], 'EPSG:3857', 'EPSG:4326')               // 브이월드 좌표계에서 다음 지도 좌표계로 변환 EPSG:3857=>EPSG:4326
                location.href="https://map.kakao.com/link/roadview/"+tansform[1]+","+tansform[0];   // 로드뷰 불러오기
            }else{
                FindAddress(lon, lat);                                                              // FindAddress 위경도 변수 넘기고 실행
            }
        }
    });

3. 마커 생성

    // 마커,팝업 생성 함수
    function addMarker(lon, lat){                // 파라미터로 위도,경도
        // 마커 feature 설정
        var feature = new ol.Feature({
            geometry: new ol.geom.Point([lon,lat])
        });
 
        // 마커 스타일 설정
        var style = new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 20],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                src: 'http://map.vworld.kr/images/ol3/marker_blue.png'
            }),
        });
        
        // feature에 스타일 설정
        feature.setStyle(style);
 
        // 마커 레이어에 들어갈 소스 생성
        var source = new ol.source.Vector({
            features: [feature]
        });
 
        // 마커 레이어 생성
        var layer = new ol.layer.Vector({
            source: source,
            name: 'MARKER'
        });
 
        // layer의 ZIndex 설정(다른 레이어들 보다 더 앞에 보여주는 기능)
        layer.setZIndex(6);
 
        // 지도에 마커 추가
        olMap.addLayer(layer);
 
        //------------------------------------------팝업-------------------------------------------//
        overlay.setPosition([lon,lat]);
    }