openLayers Vworld / EPSG : 3857 관련

Vworld

- Vworld는 EPSG:3857 좌표계를 사용 

- 다른 좌표계를 사용한다면 지도가 눌리는 현상이 발생할 수 있음. 

 

EPSG : 4326이 아닌 다른 좌표계를 사용한다면 두가지 방법을 사용할 수 있다. 

1) 클라이언트에서 (ol.geom.POINT([127.0150, 37.5300 ]).transform("EPSG:4326", "EPSG:3857");)

   transform을 사용하여 EPSG : 4326 좌표계를 EPSG : 3857 좌표계로 변경한다. 

var mapProjection = "EPSG:3857";
var dataProjection = "EPSG:4326";

$(window).load(function() { //모든 include 되는 프레임들과 object들, 이미지까지 로드된 이후에 실행됩니다.

	initMap();
	selectSgg();
});

/**
 * 지도 첫 셋팅
 */
function initMap(){
	
    //아래 내용에 해당 
	var center = new ol.geom.Point([127.0150, 37.5300]).transform(dataProjection, mapProjection);

	map = new ol.Map({
		target : 'map',
/*		기본
 * 		layers : [ new ol.layer.Tile({
			source : new ol.source.OSM()
		}) ],*/
		
		layers : [ //강제로 WKT형식의 Vworld로 변경하면 지도의 이미지가 눌린다.
			new ol.layer.Tile({
				source : new ol.source.XYZ({//Vworld Tile 변경
					url : 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
				})
			})
		],
		view : new ol.View({
			projection : mapProjection,
			center : center.getCoordinates(),
			zoom : 9.5
		}),
	});
	
	//map.getTransformXY(127.0150,37.5300,"EPSG:4326","EPSG:3857");
	
 //WKT 지오메트리 형태를 openlayers에서 인식할 수 있는 지오메트리 형태로 변경 시켜준다.
	for(var v in _SIG_WKT){
		var geom = wktFormat.readGeometry(_SIG_WKT[v].GEOM);
		geom.transform(dataProjection, mapProjection);
		feature = new ol.Feature({
			geometry : geom,
			sgg_code : v,
		    name : _SIG_WKT[v].NAME
		});
		
		SIG_FEATURES[v] = feature;
		
		//feature.setStyle(style); 
		//feature에 style을 줄 경우 하드코딩으로 박혀 나중에 style을 change 하지 못한다.
		//그래서 layer에서 style 주는 경우가 많다.
		features.push(feature);
	}
	
	vectorSource = new ol.source.Vector({
		features : features
	});
	
	style = new ol.style.Style({
		stroke : new ol.style.Stroke({
			color : '#0000000',   //'#3399CC'
			width : 1.0
		})
	})
	
	vectorLayer = new ol.layer.Vector({
		name : layerName,
		source : vectorSource,
		style : style
	});
		
	map.addLayer(vectorLayer);
	
	mapClickEvent();

}

function mapClickEvent(){
	
	/**
	 * OpenLayers Select Features 예제  
	 */
    var select = null;  // ref to currently selected interaction

    /**
     * 클릭 했을 때 
     */
    selectClick = new ol.interaction.Select({
      condition: ol.events.condition.click,
      style : myStyleFuncion(feature)
   
    });
    
    select = selectClick;
    map.addInteraction(select);
}

function myStyleFuncion(feature){
	
	var style =  new ol.style.Style({
	    	
    	  fill : new ol.style.Fill ({
    		  color : "rgb(255, 255, 255, 0.7)"
    	  }),
    	  
    	  stroke : new ol.style.Stroke({
    		  color : "#004CAA",
    	      width : 2
    	  }),
    	  
    	  text : new ol.style.Text({
    		text : feature.get('name'),
    		fill : "#333",
    		scale : 1,
    		stroke : 1
    	  })
      })
	return style;
}


/**
 * 시군 이동 선택에 따라 해당 시군만 표현
 */
function selectSgg(){
	
	jQuery('.sigCodeSelect').on('change', function(){
		
		var sggCode = jQuery(this).val();
		sggCode = sggCode.substr(0, sggCode.length -1);

		var sggGeom = wktFormat.readGeometry(_SIG_WKT[sggCode].GEOM);
				
		sggGeom.transform(dataProjection, mapProjection);
		
		//view.fit 주어진지도 크기와 경계를 기준으로 주어진 지오메트리 또는 범위를 맞 춥니 다. 크기는 범위에 맞는 상자의 픽셀 크기입니다. 
		//대부분의 경우지도 크기, 즉을 사용하려고합니다 map.getSize(). 지도 각도를 관리합니다.
		//view.fit(geometry, map.getSize());
		map.getView().fit(sggGeom, map.getSize());
		
		var sigCode = jQuery('#sigCode').val();
		changeMoveSggSelect(sigCode);
	});
}


//시군이동
function changeMoveSggSelect(el) {
	
	if(el.value == "") {
		mapMaskOff();
	} else {
		var sigCode = el.substring(0, 4);
		var maskGeom = _SIG_MASK_WKT[sigCode];
		var maskGeomExtent = _SIG_EXTENT_WKT[sigCode];
		
		mapMaskOn(maskGeom, maskGeomExtent);
	}
}

function mapMaskOn(geom, extent) {
	var style = new ol.style.Style({
		fill : new ol.style.Fill({
			color : 'rgba(0, 0, 0, 0.6)'
		}),
		stroke : new ol.style.Stroke({
			color : '#274894'
		})
	});
	
	var feature = map.createFeature(geom, null, null, true);
	
	if(extent) {
		map.setZoomToExtent(extent);
	}

	map.setVectorLayer("MASK_LAYER", null, null, function(){
		return style
	}, null, null, null, null, 1000000);
	
	map.addFeatures("MASK_LAYER", [feature]);
}

 

2) DB에 저장시 EPSG:3857의 좌표계를 저장하거나,

   SELECT 할 때 ST_TRANSFORM(ST_GEOMFROMTEXT('POINT(127 37)', 4326), 3857) 로 SELECT 하여 사용

select ST_TRANSFORM(ST_GEOMFROMTEXT('POINT(127 37)', 4326), 3857)