[OpenLayers] 국토교통부 토지이음지도 중첩하기

[공공칠빵]

OL] 국토교통부 토지이음지도 중첩하기

데모실행 : https://pro.aicon.city/

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

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

이번에는 OL의 XYZ소스와 proj4.js만을 사용하여 국토교통부 토지이음지도을 중첩하였습니다.

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

(카카오/다음지도는 "EPSG:5181"을 사용합니다, 본 카페의 글을 참조하세요)

(1) 토지이음지도는 토지/부동산 개발시 인허가 및 규제정보를 담고있어 많이 사용합니다.

http://www.eum.go.kr/web/mp/mpMapDet.jsp

(2) 토지이음지도는 "EPSG:5179"을 사용하는 중입니다.

TMS방식으로 전체영역(extent)의 MinY부터 tilerow번호 부여.

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

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

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

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

응용, 기존 OpenLayers로 개발중인 프로그램에 접목하였습니다.

//토지이음 좌표계 및 파라메터 설정
var server = 'http://119.196.18.3:8004/MapPlan/MapPlan?';
var resolutions = [4096, 2048, 1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1, 0.5, 0.25, 0.125];
var Emap_extent = [90000, 1100000, 2180000, 2760000];
var projection = new ol.proj.Projection({
code: 'EPSG:5179',
extent: Emap_extent,
units: 'm',
axisOrientation: 'neu'
});
var Emap_tileGrid = new ol.tilegrid.TileGrid({
origin: [Emap_extent[0], Emap_extent[1]],
resolutions: resolutions,
tileSize: [256, 256],
matrixIds: params['TILEMATRIX']
});

//토지이음 맵소스 생성
function constructSourceEmap(version) {
var source = new ol.source.XYZ({
tileUrlFunction: function(tileCoord) {
var _level = tileCoord[0];
var tile = 'tile' + (_level>10?'1':'0');
return ProxyPHPurl + url_replace(
server +'req=timg&timg='+version+'/'+tile +'/' +
_level.toString() +'/'+ tileCoord[1].toString() +'_'+(-tileCoord[2]-1).toString()+'.png'
);
},
tileSize: 256,
tilePixelRatio: 2,
imageSmoothing: false,
projection: projection,
tileGrid: Emap_tileGrid,
crossOrigin: 'anonymous',
});
return source;
}

//토지이음 레이어 생성
var emap_Baselayer = new ol.layer.Tile({
id: "emap_Baselayer",
name: "emap_Baselayer",
layerName: "emap_Baselayer",
source: constructSourceEmap('20230710'),
opacity: 0.8,
visible: false,
});