Class: naver.maps.CanvasMapType

Methods

getMapTypeOptions()

캔버스 타일 지도 유형의 옵션을 반환합니다.

Returns

Type	Description
CanvasMapTypeOptions	이미지 타일 지도 유형 옵션

getMaxZoom()

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

Returns

Type	Description
number	최대 줌 레벨

getMinZoom()

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

Returns

Type	Description
number	최소 줌 레벨

getName()

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

Returns

Type	Description
string	지도 유형의 이름

getTile(x, y, z)

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

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

Parameters

Name	Type	Description
x	number	x축의 인덱스
y	number	y축의 인덱스
z	number	줌 레벨

Implements

• naver.maps.MapType#getTile

Returns

Type	Description
naver.maps.CanvasTile	캔버스 타일 객체

getTileData(x, y, z)

전달된 타일의 인덱스와 줌 레벨에 해당하는 캔버스의 픽셀 데이터를 반환합니다.

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

Parameters

Name	Type	Description
x	number	x축의 인덱스
y	number	y축의 인덱스
z	number	줌 레벨

Returns

Type	Description
ImageData	요소 영역의 픽셀 데이터

setMapTypeOptions(canvasMapTypeOptions)

캔버스 타일 지도 유형의 옵션을 설정합니다.

Parameters

Name	Type	Description
canvasMapTypeOptions	CanvasMapTypeOptions	캔버스 타일 지도 유형 옵션

Type Definitions

---

CanvasMapTypeOptions

CanvasMapTypeOptions 객체는 CanvasMapType을 정의하는 옵션을 나타냅니다.

Type:

• object

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)	지도 유형의 타일 크기입니다.
tileDuration	number	<optional>		타일의 fadeIn 효과 지속 시간 (밀리초 단위)
repeatX	boolean	<optional>	false	현재 줌 레벨에서 표현할 수 있는 타일 인덱스의 영역을 벗어나면 수평축으로 타일을 반복할 것인지 여부입니다. 세계 지도 투영을 사용하는 이미지 타일 지도 유형에서 사용하기에 적합합니다.
vendor	string	<optional>		지도 유형의 제작자 이름입니다.
provider	MapDataProvider	<optional>		지도 유형의 데이터 제공자 정보입니다.
uid	string	<optional>		지도 유형을 유일하게 구분할 수 있는 id를 지정할 수 있습니다.
darktheme	boolean	<optional>	false	지도 유형이 전체적으로 어두운 픽셀 데이터를 사용하는지를 지정합니다. 이 값이 true이면 지도 위 텍스트를 표시하는 기본 컨트롤의 텍스트 색상이 흰색으로 표시됩니다.
getTileData	function	<optional>		전달된 타일의 인덱스와 줌 레벨에 해당하는 캔버스의 픽셀 데이터를 반환합니다. 새 타일을 지도에 표시해야 한다고 NAVER 지도 API v3가 판단할 때마다 이 메서드를 호출합니다.

Example

var CanvasMapTypeOptions = {
    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))
    }],
    getTileData: function(x, y, z) {
        var canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d');

        ... (생략) ...

         canvas.width = w;
         canvas.height = h;

         ... (생략) ...

         var imageData = ctx.getImageData(0, 0, w, h);

         return imageData.data;
    }
};

var CanvasMapType = new naver.maps.CanvasMapType(canvasMapTypeOptions);

---

MapDataProvider

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

Type:

• object

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)) // 제주
            ]
      }]
};