logo
Tutorials Examples naver map js api v3 네이버 지도 API ImageMapType

Class: naver.maps.ImageMapType

naver.maps. ImageMapType

ImageMapType 클래스는 이미지 타일을 렌더링할 수 있는 이미지 지도 유형을 정의하는 데 필요한 MapType 인터페이스를 정의합니다.

new naver.maps.ImageMapType(imageMapTypeOptions)

Parameters
Name Type Description
imageMapTypeOptions ImageMapTypeOptions

이미지 타일 지도 유형 옵션

Implements
Tutorials

Methods

getMapTypeOptions()

이미지 타일 지도 유형의 옵션을 반환합니다.

Returns
Type Description
ImageMapTypeOptions

이미지 타일 지도 유형 옵션

getMaxZoom()

지도 유형의 최대 줌 레벨을 반환합니다.

Returns
Type Description
number

최대 줌 레벨

getMinZoom()

지도 유형의 최소 줌 레벨을 반환합니다.

Returns
Type Description
number

최소 줌 레벨

getName()

지도 유형의 이름을 반환합니다.

Returns
Type Description
string

지도 유형의 이름

getTile(x, y, z)

전달된 타일의 인덱스와 줌 레벨에 해당하는 ImageTile 객체를 반환합니다.

새로운 타일이 필요할 때마다 이 메서드를 호출합니다. 이때, 이 메서드는 getTileUrls 메서드를 호출합니다.

Parameters
Name Type Description
x number

x 축의 인덱스

y number

y 축의 인덱스

z number

줌 레벨

Implements
Returns
Type Description
naver.maps.ImageTile

이미지 타일 객체

getTileUrls(x, y, z)

전달된 타일의 인덱스와 줌 레벨에 해당하는 타일 URL을 반환합니다.

새 타일을 지도에 표시해야 한다고 NAVER 지도 API v3가 판단할 때, getTile의 tileSet 속성을 사용하거나 getTileUrl 메서드를 호출합니다.

Parameters
Name Type Description
x number

x 축의 인덱스

y number

y 축의 인덱스

z number

줌 레벨

Returns
Type Description
Array.<string>

타일 URL 목록

setMapTypeOptions(imageMapTypeOptions)

이미지 타일 지도 유형의 옵션을 설정합니다.

Parameters
Name Type Description
imageMapTypeOptions ImageMapTypeOptions

이미지 타일 지도 유형 옵션

Type Definitions


ImageMapTypeOptions

ImageMapTypeOptions 객체는 ImageMapType을 정의하는 옵션을 나타냅니다.

Type:
Properties
Name Type Argument Default Description
name string

지도 유형 컨트롤 등에서 표시할 지도 유형의 이름입니다.

maxZoom number

지도 유형의 최대 줌 레벨입니다.

minZoom number

지도 유형의 최소 줌 레벨입니다.

projection naver.maps.Projection

지도 유형의 투영입니다. 자세한 설명은 Projection 객체를 참고합니다.

tileSize naver.maps.Size | SizeLiteral <optional>
(256,256)

지도 유형의 타일 크기입니다.

repeatX boolean <optional>
false

현재 줌 레벨에서 표현할 수 있는 타일 인덱스의 영역을 벗어나면 수평축으로 타일을 반복할 것인지 여부입니다.

세계 지도 투영을 사용하는 이미지 타일 지도 유형에서 사용하기에 적합합니다.

vendor string <optional>

지도 유형의 제작자 이름입니다.

provider MapDataProvider <optional>

지도 유형의 데이터 제공자 정보입니다.

uid string <optional>

지도 유형을 유일하게 구분할 수 있는 id를 지정할 수 있습니다.

darktheme boolean <optional>
false

지도 유형이 전체적으로 어두운 이미지를 사용하는지를 지정합니다.

이 값이 true이면 지도 위 텍스트를 표시하는 기본 컨트롤의 텍스트 색상이 흰색으로 표시됩니다.

getTileUrl function <optional>

전달된 타일의 인덱스와 줌 레벨에 해당하는 타일 URL을 반환합니다.

새 타일을 지도에 표시해야 한다고 NAVER 지도 API v3가 판단할 때마다 이 메서드를 호출합니다.

tileSet string | Array.<string> <optional>

지도의 타일 이미지 URL 또는 URL의 목록을 지정할 수 있습니다.

URL 문자열 내 {x},{y},{z}는 타일 인덱스와 줌 레벨로 치환됩니다. 타일 인덱스는 왼쪽 위 기준이며, 타일 인덱스를 반대로 적용하려면 {-x},{-y}와 같이 -를 함께 사용합니다.

getTileUrl 메서드가 설정되면 이 속성은 무시됩니다.

Example
var imageMapTypeOptions = {
    minZoom: 0,
    maxZoom: 22,
    projection: naver.maps.EPSG3857,
    name: '세계 지도',
    tileSize: new naver.maps.Size(256, 256),
    repeatX: true,
    vendor: 'MyCorp.',
    provider: [{
        title: "내 지도 ver 1.0"
    }, {
        title: "OpenStreetMap",
        link: "http://www.openstreetmap.org/copyright"
    }, {
        title: "/인천광역시",
        bounds: new naver.maps.LatLngBounds(
            new naver.maps.LatLng(36.915887, 125.690716),
            new naver.maps.LatLng(37.687529, 126.853252))
    }],
    tileSet: [
        "http://mymap1.com/tiles/world/{z}/{x}/{y}.png",
        "http://mymap2.com/tiles/world/{z}/{x}/{y}.png",
        "http://mymap3.com/tiles/world/{z}/{x}/{y}.png",
        "http://mymap4.com/tiles/world/{z}/{x}/{y}.png"
    ]
};

var imageMapType = new naver.maps.ImageMapType(imageMapTypeOptions);

MapDataProvider

MapDataProvider 객체는 등록한 지도 유형의 데이터 제공자 정보를 나타냅니다.

Type:
Properties
Name Type Description
title string

표시될 텍스트의 내용입니다. 빈 칸/Unicode 모두 허용하나, HTML Entity는 변환되지 않습니다.

link string

표시될 텍스트를 클릭했을 때 이동할 주소입니다. 이 값이 없으면 클릭할 수 없는 요소로 생성됩니다.

bounds Bounds | BoundsLiteral | ArrayOfBounds | ArrayOfBoundsLiteral

해당 텍스트를 표시할 좌표 경계입니다. 지도 화면에 해당 좌표 경계가 들어오면 텍스트를 표시합니다. 이 값이 없으면 항상 텍스트를 표시합니다.

Example
var mapTypeOptions = {
//...
    provider: [{
            title: " 국토교통부",
        }, {
            title: ",OpenStreetMap",
            link: "http://www.openstreetmap.org/copyright"
        }, {
            title: ",Natural Earth",
            link: "http://www.naturalearthdata.com/",
            bounds:  NLatLngBounds(
                NLatLng(36.915887, 125.690716),
                NLatLng(37.687529, 126.853252))
        }, {
            title: " \u2573 \xa9 UNICODE ALSO OK",
            bounds: [
                NLatLngBounds(
                    NLatLng(36.9604682, 126.7654746),
                    NLatLng(38.1834428, 127.8062689)), // 서울,경기
                NLatLngBounds(
                    NLatLng(33.1940984, 126.1631646),
                    NLatLng(33.5666617, 126.9448023)) // 제주
            ]
      }]
};