[OpenLayers] 새로운 네이버지도 중첩하기 및 항공뷰 보기

[공공칠빵]

[OpenLayers] 새로운 네이버지도 중첩하기 및 항공뷰 보기

이전 게시한 "[OpenLayers] 다음지도/네이버지도 중첩하기 개선2"소스에서

3방식 "ol.layer.Image/ol.source.ImageCanvas"를 사용해 구현을 해보았습니다. 좌표계 보정으로 타일의 가로/세로 조정과 좌표에 따른 각도조정으로 전국의 오차를 상당히 줄였습니다.

이번에는 기존 방식의 서비스가 종료되면서, "새로워진네이버지도"로 전환하여야 했습니다.

네이버 클라우드 플랫폼에서 제공하는 인프라/솔루션 상품을 이용할 수 있도록 지원하는 응용 프로그램 인터페이스(Application Programming Interface, API) 제공하고 있습니다. 본 페이지에서는 NAVER CLOUD PLATFORM API 대한 간략한 설명 및 API 호출하는 방법을 제공합니다.

Tile Map API는 다양한 지도 이미지 타일을 제공하는 REST API입니다. 일반 지도, 위성 지도, 지형도와 같은 지도 유형뿐 아니라 대중교통, 자전거 도로, 실시간 교통 정보 등의 세부 정보를 포함한 지도를 이미지 타일로 제공합니다. Tile Map API는 다음과 같은 특징을 제공합니다. - 이미지의 해상도를 지정할 수 있습니다. - SDK에서 제공하지 않는 다양한 조합의 지도를 요청할 수 있습니다. - 다양한 경로로 입수한 데이터와 쉽게 매시업할 수 있어 지도를 좀 더 전문적으로 응용할 수 있습니다. - OpenLayers, QGIS, ArcGIS, Mapbox 등 다양한 GIS 도구에서 통합 및 응용할 수 있습니다.

메르카토르 투영법(Mercator projection)

Tile Map API는 정규화된 메르카토르 투영법을 사용하여 원형인 지구 위 한 점을 평면에 있는 점으로 매핑해서 얻은 지도 타일을 제공합니다. Google Maps, Bing Maps와 같은 타일 시스템을 사용하며, 자세한 내용은 Mercator projection을 참고하세요. - 기본적으로 전 세계 영역을 표현할 수 있지만, 제공 정책에 따라 표현 가능한 영역이 제한될 수 있습니다. - 경위도 좌표와 타일 인덱스 간 변환이 필요하면 여러 언어로 작성된 변환 코드를 확인하세요.

* 출처 : https://apidocs.ncloud.com/ko/ai-naver/maps_tile_map/raster/

따라서, 이제는 좌표변환 및 보정없이 타 지도와의 토글/중첩이 편리해졌습니다.

이로써 구글/브이월드/네이버 등은 공통 좌표계를 사용하게 되었습니다. 다음지도만 남았네요....

호출URL구조

https://naveropenapi.apigw.ntruss.com/map-tile/v1/raster-cors/styles/basic/{Z}/{X}/{Y}@{Scale}x.

{Format}?mt={SubType}&X-NCP-APIGW-API-KEY-ID={애플리케이션 등록 시 발급받은 client id값}

요청 파라미터: SubType

세부 지도 유형. 마침표(.)을 구분자로 원하는 세부 지도 유형을 조합할 수 있습니다. 이 값을 생략하면 기본값으로

bg.ol.ts.ar.lko 유형의 타일을 반환합니다.
- bg: 해당하는 지도 유형의 배경 표시
- ol: 실폭 도로, 실선 도로, 행정 경계, 공원 상세, 도로시설물, 시설, 역과 같이 세밀한 요소 표현
- ts: 지하철 노선도, 버스 정류장과 같이 대중교통 관련 요소 표현
- pr: 거리뷰, 항공뷰, 수중뷰와 같이 파노라마 촬영 위치 관련 요소 표현
- br: 자전거 관련 요소 표현
- ar: 등산로 관련 요소 표현
- ctt: 혼잡 교통정보 표현. 교통정보는 단시간(약 1~5분) 동안만 유효하다는 점에 유의해야 하며, 클라이언트 응용프로그램은

  이 유형의 타일을 캐시해서는 안 됩니다.
- lko: 한국어 라벨 표현
- len: 영어 라벨 표현
- lzh: 중국어 라벨 표현
- lja: 일본어 라벨 표현

응용, 기존 OpenLayers로 개발중인 프로그램에 접목하였습니다.

* 데모버젼 : "FirstGIS/Professional Education Version 1.0"

(위 링크를 PC용[IE에서는 흑백모드버튼 제거됨]이고, 모바일에서 실행하셔야 모바일용 UI모드로 실행합니다.

 단, 모바일 기종에 따라 WebGL 사용한 함수지원여부로 브이월드3D가 구동 안될수도있습니다)

1) 기존 지도와 비교화면: 조금 연해지고, POI 라벨링이 줄어들었습니다. (좌측상단의 지도모드선택으로 비교해보세요)

   실제 PC버전의 네이버지도 서비스에서는 POI 라벨링을 동적으로 쿼리해서 이미지와 할로 스트링으로 선명하게

   표시중이며, 배경지도를 위 파라미터로 조정이 가능해젔습니다.

----------------------------------------------------------------------------------------------------------------- 

2번째 주제로는 네이버의 거리뷰/항공뷰/수중뷰 사용하기

- 다음지도는 자주바뀌는 서비스라 싫어하지만, 해상도가 좋은 항공사진과 로드뷰를 구글 처럼 아주 비슷하게 API로

  서비스하기 때문에 꾸준히 프로그램에 적용해서 사용합니다.

- 네이버지도에서도 거리뷰가 있었지만 API도 부실하고 응용하기 곤란하게 서비스하고 있었습니다.

  그런데 항공뷰는 정말 활용성이 좋은 서비스라 생각됩니다.

- 일단 네이버의 이서비스는 API가 쫌 그래서 API사용보다는 네이버의 지도 서비스창을 띄우는 방식으로 활용.

- 항공뷰는 보안상 서비스하지 않는 곳이 많으므로 일단 거리뷰로 가서 호출하는 방식을 사용해보았습니다.

- PC버전에서는 조회 좌표의 가까운 지점의 파노라마 ID를 구한후 새네이버지도를 띄우는 동시에 거리뷰를 호출합니다

  그리고 새로운 거리뷰창의 우측의 비행기 버튼을 클릭하여 항공뷰를 볼 수 있습니다 (항공뷰는 보안상 서비스하지 않는 곳이 많으므로 비행기 버튼이 없을 수도 있습니다)

function naver_panorama_URL(_coordinate, LongLatOk){

  try{

    var _LonLat = LongLatOk?_coordinate:ol.proj.toLonLat(_coordinate);

    var url = 'https://map.naver.com/v5/api/v2/nearby/'+ _LonLat[0] +'/'+ _LonLat[1] +'/3';

    var xhr = null;  

    if(window.XMLHttpRequest){

      xhr = new XMLHttpRequest();

    }else{

      xhr = new ActiveXObject("Microsoft.XMLHTTP");  

    }

    xhr.open('GET', url);

    var xxonError = function() {

      naver_map_URL(_coordinate);

    }

    xhr.xxonerror = xxonError;

    xhr.xxonload = function() {

      if (xhr.status == 200) {

        var _Json = JSON.parse(xhr.responseText);

        var _features = _Json.features;

        if(_features && _features.length > 0){

          var _feature = _features[0];

          var Call_url = GetNaver_URL(_coordinate) + "&p=" + _feature.properties.id + ",0,0,Float";

          window.open(Call_url, '_blank');

        }else{

          naver_map_URL(_coordinate);

        }

      } else {

        naver_map_URL(_coordinate);

      }

    }

    xhr.send();

  }catch (e){

    naver_map_URL(_coordinate);

  }

  function GetNaver_URL(_XY){

    return "https://map.naver.com/v5/?"

       +"c=" + _XY[0] + "," + _XY[1] + ",15,0,0,0,dha";

       //+"&p=" + "myZZsoP4p3y6OD-IlKL1DA,0,0,Float";

  }

  function naver_map_URL(_XY){

    var Call_url = GetNaver_URL(_XY);

    window.open(Call_url, '_blank');

  }

}

- 아직 모바일의 새지도 서비스는 기능이 없어서 기존방식의 네이버의 지도 서비스창을 띄우는 방식으로 활용.

  기존 모비일버전인 네이버 거리뷰창을 호출합니다. 그리고 하늘에 위치한 비행기를 클릭하여 항공뷰를 봅니다.

  (항공뷰는 보안상 서비스하지 않는 곳이 많으므로 비행기 버튼이 없을 수도 있습니다)

function naver_panorama_URL(_coordinate, LongLatOk){

  var _LonLat = LongLatOk?_coordinate:ol.proj.toLonLat(_coordinate);

  var Call_url = 'https://m.map.naver.com/viewer/panorama.nhn?lng='+ _LonLat[0] +'&lat=' + _LonLat[1];

  window.open(Call_url, '_blank');

}