국토정보플렛폼 배경 지도 적용
This commit is contained in:
yschoi
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user