diff --git a/packages/common/business_components/src/ui/map/lib/gis.core.js b/packages/common/business_components/src/ui/map/lib/gis.core.js index caa068f76..db58c898f 100644 --- a/packages/common/business_components/src/ui/map/lib/gis.core.js +++ b/packages/common/business_components/src/ui/map/lib/gis.core.js @@ -13,10 +13,12 @@ import { Fill, Stroke, Style } from 'ol/style'; import CircleStyle from 'ol/style/Circle'; import VectorLayer from 'ol/layer/Vector'; import { Point } from 'ol/geom'; -import { boundingExtent } from 'ol/extent'; +import { getTopLeft } from 'ol/extent'; import TileWMTS from 'ol/source/WMTS'; -import WMTS from 'ol/tilegrid/WMTS'; -import { get as getProjection } from 'ol/proj'; +import WMTSTileGrid from 'ol/tilegrid/WMTS'; +// import { get as getProjection } from 'ol/proj'; +import proj4 from 'proj4'; +import { register } from 'ol/proj/proj4'; import olSourceImageWMS from 'ol/source/ImageWMS'; import { GeoJSON } from 'ol/format'; import GisOlEditLayer from './gis.edit'; @@ -43,8 +45,8 @@ GisApp.GOOGLE_HYBRID_URL = `https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}&k 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.NGII_API_KEY = '04trYP9_xwLAfALjwZ-B8g'; // NGII에서 발급받은 API 키 +GisApp.NGII_WMTS_URL = `https://map.ngii.go.kr/openapi/Gettile.do?apikey=${GisApp.NGII_API_KEY}`; GisApp.EMAP_URL = '/emap/'; GisApp.EMAP_SATELLITE_URL = '/emap/satellite/'; @@ -92,9 +94,9 @@ GisApp.core.prototype = { target: '', centerX: 37.2806094, centerY: 127.0032502, - zoom: 11, - minZoom: 5, - maxZoom: 22, + zoom: 12, + minZoom: 6, + maxZoom: 20, }, options: { @@ -121,14 +123,13 @@ GisApp.core.prototype = { 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'); + // 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['base'] = this.getNGIIBaseMap('base','korean_map'); + this.baseLayers['satellite'] = this.getNGIIBaseMap('satellite','satellite_map'); + this.baseMiniMapLayers['base'] = this.getNGIIBaseMap('minimap-base','korean_map'); }, layerType: { point: 'POINT', @@ -142,44 +143,43 @@ GisApp.core.prototype = { 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 - }); + getNGIIBaseMap: function (_id, _layer) { + // EPSG:5179 정의 및 등록이 필요함 (아래에 설명 추가) + proj4.defs([['EPSG:5179','+proj=tmerc +lat_0=38 +lon_0=127.5 +k=0.9996 +x_0=1000000 +y_0=2000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',],]); + register(proj4); + const projection = olProj.get('EPSG:5179'); + projection.setExtent([-200000.0, -28024123.62, 31824123.62, 4000000.0]); + + // 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 matrixIds = ["L05", "L06", "L07", "L08", "L09", "L10", "L11", "L12", "L13", "L14", "L15", "L16", "L17", "L18"]; + const resolutions = [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 matrixIds = ["L06", "L07", "L08", "L09", "L10", "L11", "L12", "L13", "L14", "L15", "L16", "L17", "L18"]; - // WMTS 소스 생성 const wmtsSource = new TileWMTS({ url: GisApp.NGII_WMTS_URL, - layer: layerName, + layer: _layer, matrixSet: 'EPSG:5179', format: 'image/png', projection: projection, - tileGrid: tileGrid, - style: 'default', - crossOrigin: 'anonymous', + style: 'korean', + tileGrid: new WMTSTileGrid({ + origin: getTopLeft(projection.getExtent()), + resolutions: resolutions, + matrixIds: matrixIds, + tileSize: [256, 256] + }), + requestEncoding: 'KVP', + crossOrigin: 'anonymous' }); - // TileLayer 생성 - return new TileLayer({ - source: wmtsSource, + let baseMap = new TileLayer({ + id: _id, visible: true, - zIndex: 0, + type: 'base', + source: wmtsSource, + zIndex: 0 }); + return baseMap; }, getBaseMap: function (_id) { let url = GisApp.VWORLD_URL;