지도 폴리곤 배경에 이미지 넣기

지도/로컬 API
#1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

지도 폴리곤 배경에 이미지 넣기가 가능할까요?

어떤 방법이 있을까요?

전국지도사진

#2

@angelsblues

커스텀타일셋을 활용하실 수 있어요
https://apis.map.kakao.com/web/documentation/#Tileset

#3

이게 좀 이해가 안되는데요

폴리곤은 사각형이 아닌데 가능한가요?

#4

타일셋으로 표현하려면 폴리곤에 사진이 들어간 지도로 타일을 제작하는 방법과
폴리곤 이미지만 타일셋으로 표현할 경우 사각 투명 배경위에 폴리곤 모양을 타일로 제작하는 방법이 있습니다.
GroundOverlay로 특정 좌표에 이미지를 고정해서 올리는 방법도 있으니 링크와 코드 참고해 주세요.

  1. 타일셋 위에 GroundOverlay 표시
    커스텀 오버레이를 고정시킬수 있는 방법이 있나요? - lea.ju 님의 게시물 #6

  2. 기본 지도에 GroundOverlay 표시

let mapContainer = document.getElementById('map'), // 지도를 표시할 div

mapOption = {
    center: new kakao.maps.LatLng(37.502, 127.026581), // 지도의 중심좌표
    level: 4 // 지도의 확대 레벨
};

let map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 오버레이로 올릴 이미지의 bounds를 받아 AbstractOverlay 를 생성합니다
// https://devtalk.kakao.com/t/topic/86185/6 답변 코드와 동일한 구현체
function GroundOverlay(bounds, imgSrc) {
    this.bounds = bounds;

    let node = this.node = document.createElement('div');
    node.className = 'node';

    let img = this.img = document.createElement('img');
    img.style.position = 'absolute';
    img.src = imgSrc;

    node.appendChild(img);
}

GroundOverlay.prototype = new kakao.maps.AbstractOverlay;
GroundOverlay.prototype.onAdd = function() {
    let panel = this.getPanels().overlayLayer;
    panel.appendChild(this.node);
};

// 줌인 아웃 시 이미지를 원하는 bounds값에 맞게 표출하기 위해 img style을 정의 및 선언합니다
GroundOverlay.prototype.draw = function() {
    let projection = this.getProjection();
    let ne = projection.pointFromCoords(this.bounds.getNorthEast());
    let sw = projection.pointFromCoords(this.bounds.getSouthWest());

    let width = ne.x - sw.x;
    let height = sw.y - ne.y;

    this.img.style.top = ne.y+'px';
    this.img.style.left = sw.x+'px';
    this.img.style.width = width+'px';
    this.img.style.height = height+'px';
}

GroundOverlay.prototype.onRemove = function() {
    this.node.parentNode.**removeChild**(this.node);
};

let sw = new kakao.maps.LatLng(37.503, 127.022581);
let ne = new kakao.maps.LatLng(37.5, 127.028581);

let bounds = new kakao.maps.LatLngBounds(sw, ne);

let overlay = new GroundOverlay(bounds, 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/roadviewoverlay_img_02.png');

overlay.setMap(map);