웹 Geolocation 사용방법 -OL3

웹에서 현재위치 GSP 기능을 구현할 일이 있어, navigator.geolocation 객체를 사용해 보았다.
MDN – 지오로케이션 사용하기

특별히 어려운 점은 없는데

단, 2016년4월부터 바뀐 사항이 있어 유의해야 한다.

브라우저의 Geolocation을 이용하기 위해서는 HTTP가 아닌 HTTPS로 설정되어야 합니다.
이렇게 바뀐게 2016년4월부터라네요.
This change is effective as of Chrome 50 (12PM PST April 20 2016).

즉, 인터넷에서 쉽게 찾을 수 있는 geolocation 관련 코드들은 unsecure 모드인 HTTP에서 작동되는 것을 간주하고 작성되었다.

앞으로는 HTTPS에서만 navigator.geolocation 객체를 이용할 수 있다.
다만, 기존 if(geolocation” in navigator) 으로는 정상작동을 확인할 수 없고
getPosition()으로 값을 가져오는 시도를 해봐야 error를 통해 가능여부를 알 수 있다.

AWS EC2 기준으로 SSL을 적용하는 방법이다.

AWS Certificate Manager(ACM) 서울리전 오픈 및 ELB에 적용하기

HTTPS 접속이 되었다고 치고
Openlayers의 ol.Geolocation을 이용하면 손쉽게 기능을 이용할 수 있다.
http://openlayers.org/en/latest/examples/geolocation.html

소스를 까보면 ‘navigator.geolocation.watchPosition()’를 이용하고 있다.
github-ol3-geolocation_%ec%ba%a1%ec%b2%98

** OL3 소스 상의 Change 이벤트의 대상
https://github.com/openlayers/ol3/blob/v3.20.1/src/ol/geolocation.js#L119

일단은 작동을 시켜봐야 GPS 사용이 가능한지 알 수 있으므로 코드를 다음과 같이 작성했다.


// 현재위치 Geolocation : 가능여부
var gpsSupport = false;

// 현재위치 Geolocation : 스위치 토글
var gpsSwitch = function(){

    // GPS 사용이 불가능하면 그냥 경고 띄우고 탈출
    if( !gpsSupport ){
        alert("Browser doesn't support Geolocation or doesn't connect by HTTPS");
        return;
    }

    if( $("#gpsSwitch").hasClass('off') ){
        setGPS( true );
        $("#gpsSwitch").removeClass('off');
    }
    else{
        setGPS( false );
        $("#gpsSwitch").addClass('off');
    }
};
var setGPS = function( tracking ){

    console.log( "GPS Switch is set ["+tracking+"]" );
    if( tracking ){
        viewMain.setZoom( 15 );
    }

    gpsLayer.setVisible( tracking );
    geolocation.setTracking( tracking );
};

// 현재위치 Geolocation : 기능 설정
$(document).ready(function(){ 

    /* HTTPS가 아니더라도 그냥 통과가 된다 */
    if( navigator.geolocation ){
        console.log("geolocation can be functional");

        // update the HTML page when the position changes.
        geolocation.on('change', function(){
            //GPS 사용 가능한 것으로 판별
            gpsSupport = true;

            var coordinates = geolocation.getPosition();
            viewMain.setCenter( coordinates );
            // var pos = ol.proj.transform( coordinates, srsName, 'EPSG:4326');
            // console.log( "Geolocation: lon="+pos[0]+", lat="+pos[1] );
        });
        geolocation.on('change:accuracyGeometry', function() {
            accuracyFeature.setGeometry( geolocation.getAccuracyGeometry() );
        });
        geolocation.on('change:position', function() {
            var coordinates = geolocation.getPosition();
            positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null);
        });
        // handle geolocation error.
        geolocation.on('error', function(error) {
            console.log( "Geolocation Error: "+error.message );
            //GPS 사용이 불가능한 것으로 판별
            gpsSupport = false;
        });

        // 일단 GPS를 켜보고 오류 나면 작동불가 시키는 것으로
        geolocation.setTracking( true );
    }
    /* 지오로케이션 사용 불가능 */
    else{
        console.log("Browser doesn't support Geolocation or doesn't connect by HTTPS");
        gpsSupport = false;
    } 

});

이에 대한 Live Demo 이다.
* 사용시 유의
1) 안전한 인증서가 아니라고 나올 것이다. 걍 무시하고 진행할 것 <== Chrome에서만 가능
2) 현재위치를 전송을 허용하시겠습니까? 라고 물으면 승인

demo-ol3-geolocation_%ec%ba%a1%ec%b2%98

Accuracy Feature 와 Position Feature 두개가 현재 위치를 표현하는데
Accuracy는 정확도가 높을 수록 반경으로 좁아지고, 부정확할 수록 반경이 넓어진다. 즐~

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: