ngii 설정 추가

packages/common/business_components/src/ui/map/lib/gis.core.js

@@ -14,6 +14,9 @@ import CircleStyle from 'ol/style/Circle';
 import VectorLayer from 'ol/layer/Vector';
 import { Point } from 'ol/geom';
 import { boundingExtent } from 'ol/extent';
+import TileWMTS from 'ol/source/WMTS';
+import WMTS from 'ol/tilegrid/WMTS';
+import { get as getProjection } from 'ol/proj';
 import olSourceImageWMS from 'ol/source/ImageWMS';
 import { GeoJSON } from 'ol/format';
 import GisOlEditLayer from './gis.edit';
@@ -32,20 +35,26 @@ GisApp.GEOSERVER_URL = '/geoserver/hasudo/ows';
 GisApp.GEOSERVER_WMS_URL = '/geoserver/hasudo/wms';
 
 //맵 정보
-GisApp.EMAP_URL = '/emap/';
-GisApp.EMAP_SATELLITE_URL = '/emap/satellite/';
-GisApp.VWORLD_URL = 'https://xdworld.vworld.kr/2d/Base/service/{z}/{x}/{y}.png';
-GisApp.VWORLD_SATELLITE_URL = 'https://xdworld.vworld.kr/2d/Satellite/service/{z}/{x}/{y}.jpeg';
 GisApp.GOOGLE_API_KEY = 'AIzaSyCf1sgeELFalfPuqlykRKBMj6X9u_DQH6M';
 GisApp.GOOGLE_ROADMAP_URL = `https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&key=${GisApp.GOOGLE_API_KEY}`;
 GisApp.GOOGLE_SATELLITE_URL = `https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}&key=${GisApp.GOOGLE_API_KEY}`;
 GisApp.GOOGLE_HYBRID_URL = `https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}&key=${GisApp.GOOGLE_API_KEY}`;
 GisApp.GOOGLE_3D_URL = `https://tile.googleapis.com/v1/3dtiles/root.json?key=${GisApp.GOOGLE_API_KEY}`;
+
+// TODO: NGII 정보	
+GisApp.NGII_API_KEY = '305CC242F2920F46BB93BCC13A52DD8A'; // NGII에서 발급받은 API 키
+GisApp.NGII_WMTS_URL = `http://map.ngii.go.kr/openapi/wmts_ngiiMap.js?apikey=${GisApp.NGII_API_KEY}`;
+
+GisApp.EMAP_URL = '/emap/';
+GisApp.EMAP_SATELLITE_URL = '/emap/satellite/';
+GisApp.VWORLD_URL = 'https://xdworld.vworld.kr/2d/Base/service/{z}/{x}/{y}.png';
+GisApp.VWORLD_SATELLITE_URL = 'https://xdworld.vworld.kr/2d/Satellite/service/{z}/{x}/{y}.jpeg';
 GisApp.OPENSTREET_URL = '//tile.openstreetmap.org/{z}/{x}/{y}.png';
 GisApp.BASE_MAP_TYPES = [];
 
 GisApp.FROM_PROJ = 'EPSG:4326';
-GisApp.TO_PROJ = 'EPSG:3857';
+// GisApp.TO_PROJ = 'EPSG:3857';
+GisApp.TO_PROJ = 'EPSG:5179'; //ngii 좌표계
 GisApp.TO_DATA_PROJ = 'EPSG:4326';
 GisApp.CONTEXT_LAYER_PATH = '/images/map/layericon/';
 GisApp.layerCode = {};
@@ -86,6 +95,7 @@ GisApp.core.prototype = {
 		minZoom: 5,
 		maxZoom: 22,
 	},
+
 	options: {
 		/*1: { zoom: 16, minZoom: 10, maxZoom: 22, centerX: 35.3227711, centerY: 129.1836202, dataProj: 'EPSG:5186' },
 		4: { zoom: 16, minZoom: 10, maxZoom: 22, centerX: 35.0140499, centerY: 126.7110757, dataProj: 'EPSG:5186' },
@@ -109,11 +119,15 @@ GisApp.core.prototype = {
 		GisApp.Module.core = this;
 		GisApp.Module.layer = new GisOlLayer(this.defaults);
 		GisApp.Module.edit = new GisOlEditLayer(this.defaults);
-
+		// TODO: vworld layer 정보 (getNGIIbaseMap)활성화 하면 ngii base map으로 변경됨
 		this.baseMiniMapLayers['base'] = this.getBaseMap('minimap-base');
 		this.baseLayers['base'] = this.getBaseMap('base');
 		this.baseLayers['satellite'] = this.getBaseMap('satellite');
 		this.baseLayers['3d'] = this.getBaseMap('3d');
+		// this.baseLayers['3d'] = this.getNGIIBaseMap('3d');
+		// this.baseMiniMapLayers['base'] = this.getNGIIBaseMap('minimap-base');
+		// this.baseLayers['base'] = this.getNGIIBaseMap('base');
+		// this.baseLayers['satellite'] = this.getNGIIBaseMap('satellite');
 	},
 	layerType: {
 		point: 'POINT',
@@ -126,6 +140,46 @@ GisApp.core.prototype = {
 		this.setCenter(Number(this.defaults.centerX), Number(this.defaults.centerY));
 		this.setZoom(15);
 	},
+	// NGII Base Map
+	getNGIIBaseMap: function (_id) {
+		const layers = {
+			base: 'korean_map', // 일반지도
+			satellite: 'satellite_map', // 위성지도
+			night: 'night_map', // 야간지도
+		};
+		// 선택된 레이어
+		const layerName = layers[_id] || layers.base;
+		// EPSG:5179 좌표계 설정
+		const projection = getProjection('EPSG:5179');
+		const extent = [705680.0000, 1349270.0000,1388291.0000, 2581448.0000]; // NGII 좌표계 범위
+		const 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,
+		];
+		const tileGrid = new WMTS({
+			extent: extent,
+			resolutions: resolutions,
+			matrixIds: resolutions.map((_, index) => index.toString()), // WMTS matrix IDs
+		});
+
+		// WMTS 소스 생성
+		const wmtsSource = new TileWMTS({
+			url: GisApp.NGII_WMTS_URL,
+			layer: layerName,
+			matrixSet: 'EPSG:5179',
+			format: 'image/png',
+			projection: projection,
+			tileGrid: tileGrid,
+			style: 'default',
+			crossOrigin: 'anonymous',
+		});
+
+		// TileLayer 생성
+		return new TileLayer({
+			source: wmtsSource,
+			visible: true,
+			zIndex: 0,
+		});
+	},
 	getBaseMap: function (_id) {
 		let url = GisApp.VWORLD_URL;
 		if (_id === 'satellite') {
@@ -182,7 +236,7 @@ GisApp.core.prototype = {
 	setCenter: function (x, y, transYn) {
 		if (!x || !y) return;
 		let view = this.map.getView();
-		
+
 		if (!transYn) {
 			// 값이 없으면
 			let center = olProj.transform([Number(y), Number(x)], GisApp.FROM_PROJ, GisApp.TO_PROJ);
@@ -553,7 +607,7 @@ GisApp.core.prototype = {
 	 */
 	convertLayerInfosToLayerCode: function (array, key, parentName) {
 		let initialValue = {};
-		
+
 		for (let i = 0; i < array.length; i++) {
 			let item = {};
 			Object.assign(item, array[i]);