[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
저희가 따로 개발한 커스텀 지도 위에 로드뷰 정보가 담긴 도로를 추가해서 도로 클릭 시 로드뷰가 호출되게 만드려는데,
이런 방식으로 카카오맵API를 사용해도 되는지 문의드립니다.
또 구현이 가능한 건지도 궁금하네요.
생성한 지도를 Tileset 객체를 이용해서 표시하면 로드뷰 API와 함께 활용 가능합니다.
https://apis.map.kakao.com/web/documentation/#Tileset
https://apis.map.kakao.com/web/documentation/#Roadview
답변 감사합니다 lea.ju님
혹시 항공사진 타일셋을 추가할 때 항공사진을 불러오는 api를 타일셋 설정 함수 내부에 추가하여 불러오면서 카카오맵 위에 띄우는 방식으로는 사용이 불가한 걸까요?
로컬에 저장된 이미지를 타일셋에 추가해서 부르는 방식만 가능한 건가요?
타일셋은 getTile에서 반환된 타일의 이미지, 요소를 카카오 지도 위에 올리는 방식으로
로컬 이미지뿐만 아니라 서버에 올라간 이미지 정보를 불러서 올릴 수 있습니다.
getTile 함수에서 항공사진을 가져오는 API를 호출해서 타일 이미지를 리턴해주시면 됩니다.
getTile: function(x, y, z) {
//getTile 함수에서 x, y, z값을 이용해서 각 타일을 불러와주세요.
let img =document.createElement(‘img’);
img.src = return 'http://return.tile.image.url/' + z + '/' + y + '/' + x + '.png';
return img;
}
function initConfig() {
LAYER_OPT = {
air: {
name: '항공영상',
visible: false,
source: {
url: urls.emapAir,
crossOrigin: "*",
projection: "EPSG:5179",
wrapX: true,
layer: "AIRPHOTO",
format: "image/jpg",
matrixSet: "NGIS_AIR",
tileGrid: new ol.tilegrid.WMTS({
matrixIds: [
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
],
resolutions: [
2088.96, 1044.48, 522.24, 261.12, 130.56, 65.28, 32.64, 16.32, 8.16,
4.08, 2.04, 1.02, 0.51, 0.255,
],
origin: [-200000, 4000000],
}),
tileLoadFunction: function (imageTile, src) {
imageTile.getImage().src = urls.emapAirProxy + '?apikey=' + config.EMAP_KEY + "&URL=" + encodeURIComponent(src);
}
}
}
}
function createGroup() {
return new ol.layer.Group({
title: '배경지도',
name: 'baseLayers',
zIndex: 0,
layers: [
createLayer('air')
],
isDefault: true
});
}
function createLayer(name) {
let opt = LAYER_OPT[name];
return new ol.layer.Tile({
name: opt.name,
title: name,
visible: opt.visible,
extent: config.extent,
source: new ol.source.WMTS(opt.source),
});
}
항공사진을 불러올 때 이런식으로 불러오는데 아래와 같이 카카오맵 타일셋 방식으로 리턴하면 x,y값은 반환되는데 z값인 TileMatrix값이 0으로 잡힙니다.
return ‘https://map.ngii.go.kr/openapi/proxy/proxyTile.jsp?apikey={API키}&URL=http://210.117.198.120:8081/o2map/services?layer=AIRPHOTO&tilematrixset=NGIS_AIR&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fjpg&TileMatrix=’ + z + ‘&TileCol=’ + x +‘&TileRow=’ + y;
이렇게 하면 initConfig 함수 내부 설정들은 적용이 안되는데 혹시 다른 방법이 있을까요?
첨부주신 코드는 openlayers를 이용한 방식이라
카카오 지도 SDK로 지도를 표시하고 지도 위에 kakao.maps.Tileset객체로 타일셋을 올리는 방식이 맞는지 확인 부탁드립니다.
타일 정보를 표시하는 타일셋 예제를 보면 x, y, z를 확인할 수 있는데요.
JS SDK를 사용할 경우 x, y, z 정보에 맞게 이미지를 만들어야 합니다.
작업은 카카오 지도 SDK를 사용해서 진행하고 있습니다. 제가 보내드린 코드는 ‘카카오맵 api를 사용하기 전에’ 제가 만든 자체 지도에 openlayers로 항공사진을 불러오던 api인데, 이 항공사진 api를 카카오 지도의 타일셋에 적용하고 싶습니다.
즉 api로 불러오는 항공사진을 커스텀 타일셋에 적용해서 사용하고 싶습니다.
그 아래 보내드린 return URL값은 항공사진 api를 getTile URL에 적용시켜보려다 잘 되지 않아서 여쭤보고 싶어 올린 거에요.
말씀해주신 'getTile 함수에서 항공사진을 가져오는 API를 호출해서 타일 이미지를 리턴해주시면 됩니다.'와
맞지 않는 방식일까요…??
getTile 파라미터 x, y, z와 사용하고 있는 API의 matrix, col, row의 값을 비교해보면
불러오는 타일 이미지와 카카오 지도 타일 체계가 달라서 이미지를 못 가져오고 있는 걸로 보입니다.
getTile의 x, y, z를 활용해서 레벨과 위치에 맞는 matrix, col, row를 계산해서 주소를 불러올 수 있게 하거나
geTile에서 반환하는 x, y, z 정보에 맞게 이미지를 생성해서 불러오는 방법을 고려해주세요.
알려주신 내용을 내용을 토대로 잘 활용해보겠습니다. 끝까지 친절하게 답장해주셔서 정말 감사합니다 좋은 하루 되세요!