Maps 관리자

도면 뷰어를 구현하기 위해 사전 이미지를 타일링하여 웹 서버에 업로드된 상태여야 합니다. Web Dynamic Map 에서 제공하는 "NAVER 그린팩토리 지도 유형"의 경우 0~4 사이의 축소, 확대 정도를 표현할 수 있다. 타일 한 장의 크기는 256픽셀 x 256픽셀로 구성된 예제 입니다. 줌 레벨 기준으로 'ImageMapType' 내 'tileSet' 값을 참조하여 서버에 이미지를 요청이 필요하여 아래처럼 이미지셋이 준비 되어야 합니다. Zoom Level 0 일때 전체 이미지 1개(256x256) Zoom Level 1 일때 2^2=4 타일링된 이미지 4개(각 이미지 사이즈 256x256) 타일좌표계 zyx 기준 : 1/0/0, 1/0,1, 1/1/0, 1/1/1 하나의 지도에서 여러 지도 유형을 사용할 수 있기 때문에, mapTypes 속성에 하나 이상의 지도 유형이 정의된 MapTypeRegistry 객체를 할당하고, mapTypeId 속성으로 어떤 지도 유형을 활성화할지 정의가 필요합니다. 이때, 지도 유형 변경이 필요한 경우 mapTypeControl() 메서드를 통해 변경할 수 있습니다. naver.maps.MapTypeRegistry : https://navermaps.github.io/maps.js.ncp/docs/naver.maps.MapTypeRegistry.html naver.maps. MapTypeControl : https://navermaps.github.io/maps.js.ncp/docs/naver.maps.MapTypeControl.html 타일의 경우 /tiles/gf-1f/{z}/{x}-{y}.png 형식의 URL로 호출할 수 있으며, tileSet 내 url 정보에 {x}, {y}, {z} 표현식으로 넣으면 내부에서 치환하여 호출하게 되므로 http://navermaps.github.io/{z}/{x}/{y} 형태로 입력이 필요합니다. 줌 레벨 0 일 때는 타일 0/0/0 좌표 이미지를 호출합니다. https://navermaps.github.io/maps.js.ncp/docs/tiles/gf-1f/0/0-0.png 줌 레벨 1 일 때는 타일 1/1/0, 1/1/1, 1/0/1, 1/0/0 좌표 이미지를 호출합니다. https://navermaps.github.io/maps.js.ncp/docs/tiles/gf-1f/1/1-0.png https://navermaps.github.io/maps.js.ncp/docs/tiles/gf-1f/1/1-1.png https://navermaps.github.io/maps.js.ncp/docs/tiles/gf-1f/1/0-0.png https://navermaps.github.io/maps.js.ncp/docs/tiles/gf-1f/1/0-0.png 동적으로 `tileSet` 을 변경하고 싶으신 경우, 'ImageMapType' 내 'setMapTypeOptions' 함수 호출로 변경 가능하며, 변경 이 완료된 후엔 Map 객체의 refresh() 메서드를 호출하여 지도를 새로 고침이 필요합니다. https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Map.html https://navermaps.github.io/maps.js.ncp/docs/naver.maps.ImageMapType.html#setMapTypeOptions__anchor 더불어, 지도 유형의 타일은 왜곡이 없는 일반 이미지인 경우 투영을 정의할 때는 단순히 '내가 사용할 좌표의 범위'를 정의하면 됩니다. fromCoordToPoint() 메서드에는 내가 사용할 좌표가 정규화된 평면 지리 좌표의 범위인 0~1 사이의 값으로 변환되도록 지정이 필요하며, 이와 반대의 경우 fromPointToCoord() 메서드를 이용하실 수 있습니다. https://navermaps.github.io/maps.js.ncp/docs/naver.maps.MapSystemProjection.html#fromCoordToPoint__ancho https://navermaps.github.io/maps.js.ncp/docs/naver.maps.MapSystemProjection.html#fromPointToCoord__anchor < 참고 자료> NAVER 그린팩토리 지도 유형 예제 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-8-maptypes-greenfactory.example.html 이미지 타일 지도 유형 예제 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-maptypes-imagemaptype.example.html 네이버 지도 JavaScript API 완벽 가이드 : https://d2.naver.com/helloworld/9121395 Tiled web map : https://en.wikipedia.org/wiki/Tiled_web_map

대표 계정으로 대표 계정을 신청할 수 없는 경우에는 공문 제출을 통해 변경할 수 있습니다. 방식 : 고객(주로 회사) 명의로 작성되고 직인이 날인된 공문(개별 부서 명의이거나 부서장 명의는 불가능) 내용 : 사업자 번호 요청 사항 : 고객의 대표 계정을 어느 계정에서 어느 계정으로 변경 요청한다는 내용 요청 사유 변경에 따른 책임은 고객에게 있음을 확약

콘솔>Services >AI NAVER API 에서 대표 계정이 ‘아닌’ 경우 안내를 드리고 있습니다.대표 계정이 아닌 경우, Maps API 이용 신청 시 팝업을 통해 '무료이용량 미제공' 계정임이 표시됩니다.AI NAVER API 콘솔에서 대표 계정 정보를 확인 할 수 있습니다.

변경 가능합니다. 대표 계정 변경을 원하시는 경우, 'Maps 대표 계정 변경 신청서'를 작성하고 대표 계정을 통해 네이버 클라우드 고객센터에 문의사항을 남겨주세요. 변경 사항은 20일 이전에 신청하는 경우 당월 적용되며, 20일 이후에 신청하는 경우 익월부터 적용됩니다. Maps_대표계정 변경 신청서.xlsx

Maps API 무료이용량이 적용되는 '대표 계정'에 대해 안내드립니다. 대표계정이 정해지는 방법 동일한 전화번호(개인 회원) 또는 동일한 사업자번호(사업자 회원)로 여러개의 계정이 있는 경우, Maps API의 최초 등록일이 가장 빠른 계정이 '대표 계정'이 됩니다. 예시) 사업자 번호 123-456에 두개의 계정 A, B 등록 A가 먼저 Maps API 이용 → 대표 계정, 무료이용량 적용 B는 무료이용량 적용 불가

Maps 사용 시 호출되는 호스트 도메인은 아래와 같습니다. http(s)://openapi.map.naver.com (~23.12.31까지만 유효) --> [변경] https://oapi.map.naver.com https://naveropenapi.apigw.ntruss.com (ncp geocode-js, reversegeocode-js) http://nrbe.map.naver.net (tile server) https://nrbe.pstatic.net (tile server) http://static.naver.net (static image) https://ssl.pstatic.net (static image) https://map.pstatic.net (static image) http://rts1.map.naver.net (traffic layer) https://ssl.map.naver.com (traffic layer) http(s)://apis.naver.com (panorama api) https://panorama.pstatic.net (panorama image) 정확한 IP 확인을 위해서는 고객님 환경에서 NSLOOKUP 등을 통해 IP를 확인을 해주셔야 합니다.

현재 Maps API는 한국어만 지원하며, 다국어는 지원하지 않습니다.

Static Map의 경우 최대 20개까지 생성이 가능합니다. 상세 내용은 아래 가이드 참고 부탁드립니다. https://api.ncloud-docs.com/docs/ai-naver-mapsstaticmap-raster

입체뷰는 현재 지원되지 않고 있습니다.

위치 오버레이를 보여주거나 숨기려면 가시성을 변경해야 합니다. 위치 오버레이의 가시성은 기본적으로 false로 지정되어 있습니다. 가시성을 true로 변경하면 지도에 위치 오버레이가 나타납니다. 자세한 정보와 구현 예제는 아래 자료를 참고해 주세요. Android: https://navermaps.github.io/android-map-sdk/guide-ko/5-5.html iOS: https://navermaps.github.io/ios-map-sdk/guide-ko/5-5.html

도로의 종별 및 실제 통행 속도 정보를 이용해 추정한 혼잡도 분류 코드 입니다, 코드 0 : 교통량이 적은 도로에서 해당 값이 수집되지 않아서 나타나는 값입니다. 코드 1 : 교통량이 원활한 경우 나타나는 값입니다. 코드 2 : 교통량이 서행중인 경우 나타나는 값입니다. 코드 3 : 교통량이 혼잡한 경우 나타나는 값입니다. 혼잡도를 기준으로 도로 종별 통행속도는 아래와 같이 분류 됩니다. 원활 : 일반도로(30 이상), 국도(40 이상), 도시고속(60 이상), 고속도로(70 이상) 서행 : 일반도로(15~30), 국도(20~40), 도시고속(30~60), 고속도로(40~70) 혼잡 : 일반도로(15 미만), 국도(20 미만), 도시고속(30 미만), 고속도로(40 미만)

Directions API 에서 전달된 좌표를 기준으로 가장 가까운 도로를 출발지/경유지/목적지로 설정하여 생성된 경로 결과를 내려주고 있어 고속도로 좌표를 출발지/경유지/목적지로 설정 시 기대대로 고속도로가 출발지/경유지/목적지로 설정됩니다.

Directions 15 API의 경우 최대 15개의 경유지를 제공하고 있어 그 이상의 경유지에 대한 경로를 얻기 위해서는 1~15, 15~30 ... 경유지에 대한 경로를 각각 요청하여 응답된 결과들을 이어서 사용이 필요합니다.

infoWindow는 Marker와 다르게 1개의 객체만 생성이 가능합니다. 여러 마커에서 동시에 InfoWindow를 보여주는 기능은 제공하지 않아 customOverlay를 활용하여 별도 구현이 필요합니다. 사용자 정의 오버레이 표시하기 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-custom-overlay.example.html

마커의 경우 돔객체로서, 캐쉬는 영향이 없으나 돔 특성상 추가 및 삭제 시 성능 영향이 있습니다. 마커 개수가 200개가 넘으면 현저히 느려지기 때문에 현재 보이는 영역에만 오버레이를 추가하도록 코드를 작성하셔야 성능상 문제가 없습니다. 마커 관련 예제는 아래 링크 참고 부탁드립니다. 마커 클러스터화 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-marker-cluster.example.html 보이는 지도 영역의 마커만 표시하기 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-marker-viewport.example.html

클러스터링 기능은 빌트인으로 제공하지 않습니다. 직접 구현하시거나 별도 서드파티 라이브러리를 통해 구현해주시기 바랍니다.

<NaverMap> (iOS의 경우 {NMFMapView}) 의 속성을 지정하면 카메라가 이동할 수 있는 영역과 최소 및 최대 줌 레벨을 제한할 수 있습니다. 최소 및 최대 줌 레벨: {minZoom} 및 {maxZoom} 속성을 지정해 줌 레벨을 제한합니다(iOS의 경우 {minZoomLevel} 및 {maxZoomLevel}). 카메라 영역 제한: {extent} 속성을 지정하면 카메라의 대상 지점을 영역 내로 제한할 수 있습니다. 카메라가 제한 영역을 벗어나도록 API를 호출하더라도 대상 지점이 영역 내로 조정됩니다.

네이버 지도 SDK는 사용자의 위치를 추적하고 지도에 표현하는 기능을 손쉽게 구현할 수 있도록 위치 오버레이와 실시간 위치 추적 기능을 제공합니다. 자세한 정보와 구현 예제는 아래 SDK 가이드를 참고해주세요. Android: https://navermaps.github.io/android-map-sdk/guide-ko/4-2.html iOS: https://navermaps.github.io/ios-map-sdk/guide-ko/4-2.html

파노라마 생성을 위해서는 NAVER 지도 API v3에서 제공하는 파노라마 서브 모듈을 사용해야 합니다. 지정한 DOM 요소에 파노라마 이미지를 표시할 수 있는 뷰어를 삽입하여 거리뷰 등의 서비스를 제공할 수 있습니다. 자세한 정보와 구현 예제는 아래 자료를 참고해주세요. 파노라마 생성 및 기본 동작: https://navermaps.github.io/maps.js.ncp/docs/tutorial-Panorama.html 파노라마 예제 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-digest.example.html#%ED%8C%8C%EB%85%B8%EB%9D%BC%EB%A7%88

마커는 지도의 한 지점을 나타내는 오버레이이므로 지도를 축소하면 여러 마커가 겹쳐지게 됩니다. 이 경우 기본적으로 화면의 아래쪽에 가까이 있는 마커가 멀리 있는 마커를 덮지만, {globalZIndex} 및 {zIndex} 속성을 이용하면 어떤 마커가 상위에 노출되어야 하는지를 의미하는 Z 인덱스를 지정할 수 있습니다. 여러 마커가 겹치면 Z 인덱스가 큰 마커가 작은 마커를 덮습니다. 마커 관련 자세한 사항은 "네이버 지도>마커 가이드"를 확인해주세요.

네이버 지도의 경우 기기 환경에 따라 벡터 지도로 서비스를 제공하고 있습니다. 벡터 지도는 소수점 단위로도 이동이 가능합니다. Web Dynamic Map의 WEB SDK의 경우 줌 레벨은 정수 단위의 이동만 지원하고 있습니다.

Static Map의 경우 레벨당 픽셀의 길이 혹은 축적의 경우, 20레벨의 경우 축적은 1:250 이고, pixel 당 0.0745m 입니다. (Static Map에서 20 레벨로 조회 시, 참고 사이트에서의 21레벨 기준으로 축척을 계산합니다. ) https://wiki.openstreetmap.org/wiki/Zoom_levels Mobile Dynamic Map의 경우 Projection.getMetersPerDp() 또는 getMetersPerPixel()으로 구할 수 있습니다. https://navermaps.github.io/android-map-sdk/reference/com/naver/maps/map/Projection.html#getMetersPerDp(double,double) Web Dynamic Map의 경우 축적을 통해서 계산하시거나 1px 의 거리를 통해서 원하시는 계산 결과를 도출하실 수 있습니다. ```code var map = new naver.maps.Map(""map"", { padding: { left: 0, top: 0 } }); function checkDistance() { var p1 = new naver.maps.Point(0, 0), p2 = new naver.maps.Point(1, 0), p3 = new naver.maps.Point(50, 0), proj = map.getProjection(), c1 = proj.fromOffsetToCoord(p1), c2 = proj.fromOffsetToCoord(p2), c3 = proj.fromOffsetToCoord(p3), dist1px = proj.getDistance(c1, c2), dist50px = proj.getDistance(c1, c3); console.log('1px:', dist1px, 'meter'); console.log('50px:', dist50px, 'meter'); } map.addListener('zoom_changed', function(zoom) { checkDistance(); }); checkDistance(); ``` https://navermaps.github.io/maps.js.ncp/docs/naver.maps.MapSystemProjection.html https://navermaps.github.io/maps.js.ncp/docs/tutorial-Projection.html https://navermaps.github.io/maps.js.ncp/docs/tutorial-shape-measures.example.html

Web Dynamic Map 은 기울기/회전 기능을 지원하지 않습니다. 2D 정북방향 모드만 제공합니다. Mobile Dynamic Map의 경우 기기 화면 건너편의 지도를 카메라로 바라보는 방식으로 지도를 표현합니다. 카메라를 이동, 확대 및 축소, 기울임, 회전시킴으로써 화면에 보이는 지도를 자유자재로 움직일 수 있습니다. Follow 모드에서는 가로/세로 회전 여부와 무관하게 UI상 상단 방향을 기준으로 방위를 가리키도록 되어 있습니다. 카메라와 투영 : https://navermaps.github.io/android-map-sdk/guide-ko/3-1.html 위치 : https://navermaps.github.io/android-map-sdk/guide-ko/4-2.html

Web Dynamic Map에선 지하철 노선의 비활성화, 고속도로 선 색상의 변경과 같은 사용자 정의 스타일 지도는 제공 하고 있지 않습니다.

네이버 지도 SDK가 지원하는 레이어 그룹을 이용해 지하철 노선과 등산로를 비활성화 할 수 있습니다. {setLayerGroupEnabled()} (iOS의 경우 {-setLayerGroup:isEnabled:}) 메서드를 사용하면 바닥 지도 위에 부가적인 정보를 나타내는 레이어 그룹을 노출할 수 있습니다. 사용 가능한 레이어 그룹은 NaverMap 클래스에 상수로 정의되어 있습니다. {LAYER_GROUP_TRANSIT}: 대중교통 그룹입니다. 비활성화할 경우 철도, 지하철 노선, 버스정류장 등 대중교통과 관련된 요소가 삭제됩니다. (iOS의 경우 {NMF_LAYER_GROUP_TRANSIT}). {LAYER_GROUP_MOUNTAIN}: 등산로 그룹입니다. 비활성화할 경우 등산로, 등고선 등 등산과 관련된 요소가 삭제됩니다. (iOS의 경우 {NMF_LAYER_GROUP_MOUNTAIN}).