[OpenLayers] 다음지도(카카오맵) 및 국토정보플랫폼 바로e맵 중첩하기

[공공칠빵]

[OL]다음지도(카카오맵) 및 국토지리정보원 바로e맵 중첩하기

데모실행 : http://www.gisapplication.kr/ol/NgiiMap/fgis/

국토지리정보원 바로e맵은 약 2021년01월부터 현재 3월까지도 백지도로 서비스중입니다.

​안녕하세요 국토정보플랫폼입니다.
제공하고 있던 일반지도의 보안 문제로 인하여 현재 교육용 백지도로 제공하고 있습니다
현재 보안 처리 작업 중에 있습니다. 최대한 빠른 시일 내에 조치하도록 하겠습니다.
070-7167-2171 로 유선 문의 주시기 바랍니다.
이용에 불편을 드려 죄송합니다.
감사합니다.

OpenLayers 응용개발로 네이버와 다음, 브이월드 등을 배경지도로 중첩하는것부터 시작하였습니다.

기존에는 좌표변환 및 이미지 회전 등을 수식으로 코딩하면서 제작하였습니다.

이번에는 OL의 XYZ소스와 proj4.js만을 사용하여 다음지도(카카오맵) 및 국토정보플랫폼 바로e맵을 중첩하였습니다.

구글/브이월드/네이버 등은 공통 좌표계EPSG:3857(900913)를 사용하게 되었습니다.

(1) 다음지도는 "EPSG:5181"을 사용하는 중입니다.

(2) 공간정보산업진흥원 브이월드에서 요즘 타일지도를 공공기관에 잘 지원을 안해주는지, 번거러워서인지, 국토지리정보원 국토정보플랫폼(http://map.ngii.go.kr/mn/mainPage.do)으로 문의하라고 하는지 늦장인지 모르지만 사업문의하다보면 "국토정보맵,바로e맵"을 받아 오는데가 많은거 같다. 하여간 성가시지만 중첩해주는 경우가 생겨 소스를 정리해본다. 어짜피 둘은 원도가 같은지라 점점 타일맵 스타일도 위성영상도 동일합니다. 단지 서비스 좌표계나 언어별 및 여러 스타일맵 서비스가 다르고 갱신 주기가 다르지만요...완전 통합하든지...

- "국토정보맵,바로e맵"은 과거 네이버지도처럼 좌표계를 "EPSG:5179"을 사용한다

- "바로e맵"이라고 불러질때는 과거 네이버처럼 TMS방식으로 전체영역(extent)의 MinY부터 tilerow번호를

부여했으나 서비스가 종료되었다. 과거 국토지리정보원에서 받았다면 이방식을 사용해야한다.

- 최신 서비스중인 "국토정보맵"에서는 WMTS로 전체영역(extent)의 MaxY부터 tilerow번호를 부여하여야

한다. 최근 국토지리정보원에서 받았다면 이방식을 사용해야한다. 개선점은 행정망에서도 가능해졌다.

단, 위성영상에 중첩할 하이브리드맵은 없는거 같습니다.

그리고 차라리 언어별로 만들거면 하이브리드만 만들고 백지도로 중첩하여사용하게 하던지.

언어별 라벨링도 이쁘지도 않으면서 고생스럽게 매번 언어별 타일을 만드는거 같습니다.

✪ 타 좌표계인 배경지도 타일맵 중첩하기가 왜 필요한가?

- 일부 및 특정지역에 대한 해상도와 최신성, DMZ/주요시설 부근을 모자이크처리 등 상이하므로

타 포털지도 중첩 비교 필요. 한/영/중/일 언어별 및 특정 테마 지도 중첩

- 동일 화면상의 변화없이 현 좌표계에서 브이월드/구글 /다음/네이버지도/바로e맵 등 중첩 토글로 편리성 필요

응용, 기존 OpenLayers로 개발중인 프로그램에 접목하였습니다. (본 서비스는 주기적으로만 공개하고있으므로 사용하지 못할때가 있습니다. 개발중 공통기능은 본시스템에 업데이트하게 되므로 서비스 공유가 불규칙합니다)

* 데모버젼 : "FirstGIS/Professional 2020"

var Daum_resolutions = [2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25];
var Daum_extent = [-30000, -60000, 494288, 988576];
DaumMap_layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: DaumMapURL,
tileSize: 256,
projection: new ol.proj.Projection({
code: 'EPSG:5181',
extent: Daum_extent,
units: 'm'
}),
tileGrid: new ol.tilegrid.TileGrid({
origin: [Daum_extent[0], Daum_extent[1]],
resolutions: Daum_resolutions,
tileSize: [256, 256],
}),
tileUrlFunction: function(tileCoord) {
var s = Math.floor(Math.random() * 4); // 0 ~ 3
var _level = Daum_resolutions.length - tileCoord[0];
return DaumMapURL.replace('{0-3}', s)
.replace('{z}', _level.toString())
.replace('{x}', tileCoord[1].toString())
.replace('{y}', (-tileCoord[2]-1).toString());
},
}),
visible: false,
});

var resolutions = [ 2088.96,1044.48,522.24000000000001,261.12,130.56,65.280000000000001,32.640000000000001,
16.32,8.1600000000000001,4.0800000000000001,2.04,1.02,0.51000000000000001,0.255];
var extent = [-200000, -28024123.62, 31824123.62, 4000000];
NgiiMap_layer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: NgiiMapURL,
projection: new ol.proj.Projection({
code: 'EPSG:5179',
extent: extent,
units: 'm'
}),
tileGrid: new ol.tilegrid.TileGrid({
origin: [extent[0], extent[3]],
resolutions: resolutions,
tileSize: [256, 256],
}),
tileUrlFunction: function(tileCoord) {
var _level = tileCoord[0]+5;
return NgiiMapURL.replace('{zz}', numberPad(_level,2))
.replace('{z}', _level.toString())
.replace('{x}', tileCoord[1].toString())
.replace('{y}', tileCoord[2].toString());
},
}),
visible: false,
});

function InitCoord(){
proj4.defs('EPSG:5179', '+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +units=m +no_defs');
//proj4.defs('EPSG:5181', '+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +units=m +no_defs');
proj4.defs("EPSG:5181","+proj=tmerc +lat_0=38 +lon_0=127 +k=1 +x_0=200000 +y_0=500000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
ol.proj.proj4.register(proj4);
}


function numberPad(n, width) {
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
}