숫자 입력 시 콤마(,) 또는 %나 특정 기호를 붙여줘야 할 때가 있다.



$( object ).keyup(function(e){
      // 현재 입력값에서 공백 떼고, % 떼고 , if) 1 %5 > 15
      var oldValue = $(this).val().replace(/\s/g, '').replace(/\%/g, '');
      var rate;
      
      // back space
      if(e.which == 8){
           // if) 15 > 1
           rate = oldValue.substr(0, oldValue.length - 1);
      }
      else {
           rate = oldValue;
      }
      
      rate = (rate == '')         // if) 5 %에서 백스페이스 누른 경우 rate 값은 빈 string
                 ? ''             // 화면에 공백 보여주고
                 : rate + ' %';   // if) 15 %에서 백스페이스 누른 경우 rate 값은 1이므로 % 붙여준다.
      
      $(this).val(rate);
});

'Web > 스크립트 일반' 카테고리의 다른 글

숫자 뒤 % 붙이기.  (0) 2017.11.30
숫자 외 몇몇 키 만 입력받기  (0) 2017.11.30
String to Date  (0) 2017.11.29
Object to XML  (0) 2013.11.07
자바스크립트 Array remove  (0) 2013.08.28

numbers, -, home, end, left arrow, right arrow, backspace 등 특정 키만 입력받기..



$( object ).keypress(function(e){
      var key = e.which;              // 누른 key code 
      if((key >= 48 && key <= 57) ||  // 숫자열 0 ~ 9 : 48 ~ 57    
           key == 45 ||               // -
           key == 8 ||                // BackSpace
           key == 46 ||               // Delete
           key == 37 ||               // 좌 화살표
           key == 39 ||               // 우 화살표
           key == 35 ||               // End 키
           key == 36 ||               // Home 키
           key == 9 ){                // Tab 키
           
      }else {
           return false;
      }      
});

'Web > 스크립트 일반' 카테고리의 다른 글

숫자 뒤 % 붙이기.  (0) 2017.11.30
숫자 외 몇몇 키 만 입력받기  (0) 2017.11.30
String to Date  (0) 2017.11.29
Object to XML  (0) 2013.11.07
자바스크립트 Array remove  (0) 2013.08.28

자바스크립트에서 String을 Date로 바꾸는 코드는 크게 2가지가 있다.

1번

var src = '2018-11-29'; var values = src.split('-'); var date1 = new Date(values[0], Number(values[1])-1, values[2]); console.log( date1.toISOString() ); // 2018-11-28T15:00:00.000Z console.log( date1 ); // Sat Nov 29 2018 00:00:00 GMT+0900


2번
var src = '2018-11-29';
var date2 = new Date(Date.parse(src));
console.log( date2.toISOString() );         // 2018-11-29T00:00:00.000Z
console.log( date2 );                       // Thu Nov 29 2018 09:00:00 GMT+0900

위 두가지 모두 Date 객체로 변환되는데 얼핏 보면 두 값 모두 같을 것 같다.
하지만 밀리세컨드로 값을 표시하면?

date1.getTime();        // 1543417200000
date2.getTime();        // 1543449600000

값이 다르다.

1번의 경우 GMT 기준으로 변환(parse) 한다. 
그래서 GMT 기준으로 출력하게 되면 값이 제대로 나오는데 ISO표준으로 출력하게 되면 GMT를 무시한 값을 출력한다. 
그래서 출력값이 29일이 아닌 28일이 되어버린다. (GMT 9시간 빼버림)

2번의 경우 GMT 기준이 아닌 애초에 UTC (GMT + 0) 기준으로 변환 해버린다.
그래서 ISO표준으로 출력하게 되면 애초에 GMT 무시한 값이기 때문에 29일이라고 나온다.

date1과 date2의 차이는 32400000인데 이 값은 (60 * 60 * 9 * 1000) 와 같다.


국가간 시스템에서 GMT 계산하느냐 안하냐느냐는 큰 문제이므로 통일해서 사용한다.


'Web > 스크립트 일반' 카테고리의 다른 글

숫자 뒤 % 붙이기.  (0) 2017.11.30
숫자 외 몇몇 키 만 입력받기  (0) 2017.11.30
String to Date  (0) 2017.11.29
Object to XML  (0) 2013.11.07
자바스크립트 Array remove  (0) 2013.08.28

Market에서 SVN을 설치한 후 restart 하면 Connector 설치 창이 떴었는데 Oxygen 부터는 그게 안뜨더라..


[Window - Preferences - SVN - SVN Connector] 에서 connector 설치가 가능한데 문제는...


오류로 창이 닫힌다는 것...


마켓 플레이스에서 확인해 보니 이클립스 버그이고... 

This is the official info from the Subversive team regarding the installation problem that happens on Oxygen.

The problem happens due to the issues in Eclipse Installation Wizard. We've reported the corresponding but to Eclipse platfom: https://bugs.eclipse.org/bugs/show_bug.cgi?id=519284#c5


저 링크에 들어가면 해결법이 있다....


[Help - install new software] 에서 아래 주소를 입력하면 connector 설치가 가능하다.

    > http://community.polarion.com/projects/subversive/download/eclipse/6.0/update-site/


아침부터 이것 때문에 2시간 날림...


  1. nn 2017.11.20 11:35 신고

    감사합니다.

  2. phg17 2017.11.20 14:48 신고

    좋은정보 공유해주셔서 감사합니다

  3. MrLee 2017.11.21 14:36 신고

    옥시젠 문제가 많아요~ㅠ

  4. louisiaru 2017.11.22 11:14 신고

    정말 감사합니다ㅠ 덕분에 해결했습니다

  5. jk 2017.12.26 11:42 신고

    감사합니다 저도 이것때문에 해메고 있었어요

  6. json 2018.02.13 09:58 신고

    팩폭배님 덕분에 20분 해메고 끝냈습니다.
    감사합니다~


(왜.. 자동 배포가 꺼져있는지 아리송... 매일 새벽에 자동배포 되게끔 되어 있는데.. 음... )



위/경도를 미리 설정하여 마커를 표시하는건 간단하다.

국가(또는 지역)의 정중앙에 마커를 표시하게 되면 따로 마커를 설정할 필요가 없어서 시도해보았다.

결과를 보면 절반의 성공이다....

위도 계산이 안맞다;; 경도는 어찌해서 맞추었는데 위도는 못맞추겠다..

그리고.. 이게 부질없다고 느끼게 한 나라는.. 프랑스(FR)이다

프랑스는 남아메리카에도 영토가 있다;; 
프랑스 정중앙에 마커를 표시하면 대서양에 마커가 찍힌다.. 

고로.. 그냥 마커로 표시하는게 좋을듯하다는게 결론...

국가코드에 KR, US, FR, CA, CN, RU, JP, AU 등등... 

Result


Style
 
body{
	font-size: medium;
}
.jvm-legend {
	line-height: 2em;
	margin-top: 5px;
}
.jvm-legend span {
	vertical-align: middle;
}
.jvm-legend-item {
	width: 2em;
	height: 2em;
	display: inline-block;
	border-style : solid;
	border-color : black;
	border-width : 1px; 
}

.jvm-legend-item-15 {
	background: red;
}
.jvm-legend-item-10 {
	background: orange;
}
.jvm-legend-item-5 {
	background: yellow;
}
.jvm-legend-item-0 {
	background: white;
}

table .td-legend{
	padding-left: 10px
} 

Source
 
var jMap = null;
function numberFormatComma(n) {
	var reg = /(^[+-]?\d+)(\d{3})/;   // 정규식
	n += '';                          // 숫자를 문자열로 변환
	while (reg.test(n)){
		n = n.replace(reg, '$1' + ',' + '$2');
	}
	return n;
}

var countryData = []; 
//for each country, set the code and value
$.each(data.countries, function() {
    countryData[this.code] = this.pGdp;
});

var markers = [ ];

$(document).ready(function(){
	// map
	jMap = $('#jvm_worldMap').vectorMap({
		map : 'world_mill_en',
		series : {
			regions : [ {
				values : countryData,
				scale : [ '#C8EEFF', '#0071A4' ],	// two colors: for minimum and maximum values 
				normalizeFunction : 'polynomial'
			} ]
			,
			markers: [{
	            attribute: 'fill',
	            scale: ['#1B77E0', '#E01B1B'],
	            min: 0,
	            max: 1
	        }]
		},
		//-----------------------------------------------
        // changed to onRegionLabelShow from onLabelShow
        //-----------------------------------------------
        onRegionLabelShow: function(e, el, code) {
            //search through data to find the selected country by it's code
            var country = $.grep(data.countries, function(obj, index) {
                return obj.code == code;
            })[0]; //snag the first one
            //only if selected country was found in dataC
            if (country != undefined) { 
                el.html(el.html() + 
                        "
Code: " +country.code + "
Name: " + country.name + "
GDP/Person: $ " + numberFormatComma(country.pGdp)+ "
Population: "+ numberFormatComma(Math.round(Number(country.pop)/10000))+" 만명"); } } ,markerStyle : { initial : { fill : '#F8E23B', stroke : '#383f47' } }, markers : markers }); $('#countryCode').bind({ keyup : function(e){ switch(e.which){ case 13: var code = e.target.value; var mapObj = jMap.vectorMap('get', 'mapObject'); if(mapObj.regions[code] != undefined){ var bbox = mapObj.regions[code].element.getBBox(); var scale = mapObj.scale; // var centroid = [ (bbox.x * scale) + (bbox.width * scale)/2 + mapObj.transX, (bbox.y * scale) + (bbox.height * scale)/2 + mapObj.transY ]; // var centroid = [ ((bbox.x + bbox.width) * scale)/2 + mapObj.transX, ((bbox.y + bbox.height) * scale)/2 + mapObj.transY ]; // var latLng = mapObj.pointToLatLng( (bbox.x * scale) + (bbox.width * scale)/2 + mapObj.transX, (bbox.y * scale) + (bbox.height * scale)/2 + mapObj.transY ); var zoomMax = (mapObj.params.zoomMax * mapObj.baseScale); var widthPerZoom = bbox.width / zoomMax; var heightPerZoom = bbox.height / zoomMax; var scaleWidth = (scale * widthPerZoom); var scaleHeight = (scale * heightPerZoom); var test = [bbox.x + bbox.width/2, bbox.y + bbox.height/2]; // console.log(test); var latLng = mapObj.pointToLatLng(test[0] * scale, test[1] * scale) // console.log(latLng); var mk = { latLng : [latLng.lat, latLng.lng], name : code, style: {r: 5} } mapObj.addMarkers([mk], []); mapObj.onResize(); }else{ alert('invalid code!!'); } break; } } }) });


HTML
	
국가코드 :



var nodeName = '';
function makeXml(element, str) {
	$.each(element, function(key, sub){
		if( sub instanceof Object){
			if ( sub instanceof Array ){
				$.each(sub, function(idx, data){
					str += makeXml(data, '');
					str += '';
				});
			}
			else{
				nodeName = '<'+key+'>';
				str += makeXml(sub, nodeName);
				str += '';
			}
		}
		else{
			var value = sub;
			if(key == 'text'){
				str += (value==null)?'':value;
			}
		}
	});
	return str;
}


	var headerSet = {};
	headerSet.staticsticKind = {text:'복합기후요소'};
	headerSet.staticsticDate = {text:'년도별: 2010 ~ 2012년'};
	headerSet.stn = {text:'강릉(105), 대관령(100), 동해(106), 북강릉(104), 속초(90), 영월(121), 원주(114), 인제(211), 정선군(217), 철원(95), 춘천(101), 태백(216), 홍천(212)'};
	headerSet.staticsticEtcCondition = {text:''};
	headerSet.staticsticPrintColumn = {text:'평균기온,최고기온,최저기온'};
	$.each(chartUploadFilePath, function(idx, path){
		headerSet[staticsticChartPath+(idx+1)] = {text:path};
	});
	headerSet.lastTitleVal = {text:'복합요소 통계보고서'};
	headerSet.firstColumn = {text:'지점번호'};
	headerSet.secondColumn = {text:'요소'};

	var resultData = {};
	resultData.headerSet = headerSet;

	var source = {};
	source.resultData = resultData;
	var xml = '';
	var result = makeXml(source, xml);
	console.log(result);


v

'Web > 스크립트 일반' 카테고리의 다른 글

숫자 뒤 % 붙이기.  (0) 2017.11.30
숫자 외 몇몇 키 만 입력받기  (0) 2017.11.30
String to Date  (0) 2017.11.29
Object to XML  (0) 2013.11.07
자바스크립트 Array remove  (0) 2013.08.28

Shape 파일을 열어서 해안선이 실측지도 처럼 나타나는 상황에서 jVectorMap으로 변환할 경우
IE8 이하에서 스크립트 엔진이 멈출 수 있다.


아래는 실측 해안선 일 경우 QGIS에서 확인한 폴리곤 포인트이다.  


위 처럼 포인트가 많을 경우 SVG로 변환할 Path도 많아지므로 VML로 그리다가 멈춘다.

이를 위해 포인트를 정리해주어야 하는데.. 

주위 GIS 개발자에게 물어본 결과 ArcGIS를 이용하여 단순화 할 수 있다고 한다.
그러나 너무 어렵다! 어디 들어가야하는지도 모르겠거니와... 방법도 모르겠고...


구글에서 찾다보니 아래 사이트가 있다.

mapshaper

 저 사이트가 날 살렸다.

웹상에서 슬라이더 조작만으로 포인트를 줄일 수 있다. 

아래처럼....



위 포인트는 눈으로 셀 수 있을만큼 줄어들었다.

실측 지도를 jVectorMap으로 변환하였을때는 17M
간략하게 만든 후 변환하였을때는 396 K

몇배 차이냐....   


● 값으로 지우기
Array.prototype.removeByValue = function() {
	if(!Array.prototype.indexOf) {
	    Array.prototype.indexOf = function(what, i) {
	        i = i || 0;
	        var L = this.length;
	        while (i < L) {
	            if(this[i] === what) return i;
	            ++i;
	        }
	        return -1;
	    };
	}
    var what, a = arguments, L = a.length, ax;
    while (L && this.length) {
        what = a[--L];
        while ((ax = this.indexOf(what)) !== -1) {
            this.splice(ax, 1);
        }
    }
    return this;
};


● 인덱스로 지우기
Array.prototype.removeByIdx = function(idx) {
    return (idx<0 || idx>this.length) ? this : this.slice(0, idx).concat(this.slice(idx+1, this.length));
};

'Web > 스크립트 일반' 카테고리의 다른 글

숫자 뒤 % 붙이기.  (0) 2017.11.30
숫자 외 몇몇 키 만 입력받기  (0) 2017.11.30
String to Date  (0) 2017.11.29
Object to XML  (0) 2013.11.07
자바스크립트 Array remove  (0) 2013.08.28

한반도 각 시/군/구 또는 광역시도의 데이터는 지역(Region)에 표시하고 특별한 지점(위/경도)도 표시하는 샘플..

티스토리 본문 창이 작은걸 감안하지 않고 페이지를 만들어서 범례가 짤리므로 새창으로 보는걸 추천...

시간이 없어서 복합 데이터 표출을 못한건 안자랑...
그러나 기존 유료 컴퍼넌트를 대체한건 자랑 


Result


Style

body{
	font-size: medium;
}
.jvm-legend {
	line-height: 2em;
	margin-top: 5px;
}
.jvm-legend span {
	vertical-align: middle;
}
.jvm-legend-item {
	width: 2em;
	height: 2em;
	display: inline-block;
	border-style : solid;
	border-color : black;
	border-width : 1px; 
}

.jvm-legend-item-15 {
	background: red;
}
.jvm-legend-item-10 {
	background: orange;
}
.jvm-legend-item-5 {
	background: yellow;
}
.jvm-legend-item-0 {
	background: white;
}

table .td-legend{
	padding-left: 10px
} 

Source

	function numberFormatComma(n) {
		var reg = /(^[+-]?\d+)(\d{3})/;   // 정규식
		n += '';                          // 숫자를 문자열로 변환
		while (reg.test(n)){
			n = n.replace(reg, '$1' + ',' + '$2');
		}
		return n;
	}

	var jMap = null;
	function convert(latitude, longitude) {
		// lat : 위도, long : 경도
		
		// QGIS > SVG 플러그인 속성에 적은 가로-세로
		var width = 823;
		var height = 823;

		// QGIS > SVG 플러그인 속성에서 SET 된 각 한계선
		var eastLong = 132.054062;		// 우측 한계선
		var westLong = 124.410858;		// 좌측 한계선
		var northLat = 39.686848;		// 상측 한계선
		var southLat = 32.043644;		// 하측 한계선
		
		// 경도 -> x
		var longDiff = eastLong - westLong;
		var lon = (longitude - westLong) * (width / longDiff);
		
		// 위도 -> y
		var latDiff = northLat - southLat;
		var lat = (northLat - latitude) * (height / latDiff);
		
		return [ lon, lat];
	}
	
	var sourceData = [
	                  {stnId : '105',	stnNm : '강릉',		lati : '37.75147',	lngt : '128.89098', heatWave : 10},
	                  {stnId : '295',	stnNm : '남해',		lati : '34.81663',	lngt : '127.92641', heatWave : 11},
	                  {stnId : '104',	stnNm : '북강릉',		lati : '37.80456',	lngt : '128.85535', heatWave : 11},
	                  {stnId : '255',	stnNm : '북창원',		lati : '35.2264',	lngt : '128.6725',  heatWave : 16},
	                  {stnId : '121',	stnNm : '영월',		lati : '37.18126',	lngt : '128.45743', heatWave : 18},
	                  {stnId : '211',	stnNm : '인제',		lati : '38.05987',	lngt : '128.16713', heatWave : 7},
	                  {stnId : '192',	stnNm : '진주',		lati : '35.16379',	lngt : '128.04002', heatWave : 14},
	                  {stnId : '155',	stnNm : '창원',		lati : '35.1702',	lngt : '128.57285', heatWave : 16},
	                  {stnId : '95',	stnNm : '철원',		lati : '38.14788',	lngt : '127.3042',   heatWave : 8},
	                  {stnId : '216',	stnNm : '태백',		lati : '37.17031',	lngt : '128.98928', heatWave : 1},
	                  {stnId : '162',	stnNm : '통영',		lati : '34.84546',	lngt : '128.4356',   heatWave : 3}
                  ];
	var markers = [];
	jQuery.each(sourceData, function(){
		var obj = {};
		var color = '';
		obj.coords = convert(this.lati, this.lngt);
		obj.stnNm = this.stnNm;
		obj.stnId = this.stnId;
		obj.heatWave = this.heatWave;
		obj.style = {};
		var val = Number(obj.heatWave);
		if(val >= 15){
			color = 'red';
		}
		else if(val >= 10){
			color = 'orange';
		}
		else if(val >= 5){
			color = 'yellow';
		}
		else {
			color = 'white';
		}
		
		obj.style.fill = color;
		obj.style.r = 5;
		markers.push(obj);
	});
	
	var countryData = []; 
	// 진주시
	countryData['38030'] = 339445;
	countryData['38050'] = 144017;
	countryData['38060'] = 116688;
	countryData['38070'] = 523177;
	countryData['38080'] = 110516;
	countryData['38090'] = 241711;
	countryData['38100'] = 270933;
	countryData['38310'] = 30728;
	countryData['38320'] = 70100;
	countryData['38330'] = 63766;
	countryData['38340'] = 58902;
	
	countryData['11010'] = 143089;
	countryData['11020'] = 143089;
	countryData['11030'] = 256614;
	countryData['11040'] = 307801;
	countryData['11050'] = 385874;
	countryData['11060'] = 377467;
	countryData['11070'] = 425101;
	countryData['11080'] = 492429;
	countryData['11090'] = 347817;
	countryData['11100'] = 365404;
	countryData['11110'] = 605521;
	countryData['11120'] = 506691;
	countryData['11130'] = 321183;
	countryData['11140'] = 395754;
	countryData['11150'] = 501855;
	countryData['11160'] = 574777;
	countryData['11170'] = 456694;
	countryData['11180'] = 262228;
	countryData['11190'] = 430516;
	countryData['11200'] = 414415;
	countryData['11210'] = 543477;
	countryData['11220'] = 441645;
	countryData['11230'] = 568685;
	countryData['11240'] = 686472;
	countryData['11250'] = 494186;

	$(document).ready(function() {
		width = $('#jvm_worldMap').width();

		jMap = $('#jvm_worldMap').vectorMap({
			map : 'korea_mill_en',
			markerStyle : {
				initial : {
					fill : '#F8E23B',
					stroke : '#383f47'
				}
			},
			series : {
				regions : [ {
					values : countryData,
					scale : [ '#C8EEFF', '#0071A4' ],	// two colors: for minimum and maximum values 
					normalizeFunction : 'polynomial'
				} ]
			},
			markers : markers,
			markerStyle : {
				hover: {
					stroke: 'black',
					r : 10
				},
			},
            onMarkerLabelShow: function(e, el, idx) {
           		var msg = el.html();
            	var source = markers[idx];
            	var mapObject = jMap.vectorMap('get', 'mapObject');
            	msg += ""+source.stnNm+"";
            	msg += "
지점ID : "+source.stnId+""; msg += "
폭염일수 : "+source.heatWave+""; // 맵 다시 그리기.. mapObject.onResize(); el.html(msg); }, //----------------------------------------------- // changed to onRegionLabelShow from onLabelShow //----------------------------------------------- onRegionLabelShow: function(e, el, code) { jQuery.each(countryData, function(name, value){ if(name == code && value != undefined){ el.html(el.html() + "
인구 : "+ numberFormatComma(Number(value))); return; } }); } }); var map = $('#jvm_worldMap').vectorMap('get', 'mapObject'); var range = [50000, 100000, 300000, 500000]; jQuery(range).each(function(idx, value){ color = map.series.regions[0].scale.getValue(value); var span = jQuery('').addClass('jvm-legend-item').css('background', color); var valSpan = jQuery('').append(' '+numberFormatComma(value)); jQuery('#regionDiv').append(span).append(valSpan).append('
'); }); });


HTML
	
지점 범례
> 15
> 10
> 5
> 0

지역 범례

  1. 츤데레 2013.11.25 12:18 신고

    안녕하세요. JVectorMap을 이용하고 있는데요..

    마커를 찍고있는데요...

    스위스라는 글이 적히면 스위스에 마커를 표시해야하는데

    lat과 lng를...알아내는 함수가 혹시 존재하나요..?

    • 안녕하세요.
      어떤 맵을 사용하시는지요..?
      기본적인 world-map 사용하시면 lati, lngt로 지점을 표시하실 수 있어요.
      그리고 마우스 동작이 아닌 이벤트로 마커를 표시하는건 구현되어 있지 않을겁니다.

      귀찮아서 저도 못한다고 그러고 넘어갔네요.. ;;

  2. 츤데레 2013.11.25 16:10 신고

    안녕하세요.

    빠른 답변 감사합니다.;

    jquery-jvectormap-1.2.2.min.js 요것을 사용중이구요..

    좀 더 자세히 설명드리면 맵이 로드될 때 해당 나라에 대한 글이 있으면 해당 나라에 마커를 찍어줘야하는데

    도저희 좌표를 알 방법이 없어서.. 이거 일일이 구현해줘야하나요? 따로 API가 존재하는지가 궁금했었습니다..

    이벤트라기 보다는 맵이 로딩될 때 마커를 그려줘야해요..

    현재 스위스에 글을 적으면 객체가 생성되며 이 객체는 국가 코드를 가지고 있고요... JVectorMap에도 regions안에 국가 코드가 있잖아요? 여기서 이 두 코드를 if문 처리하여 true가 반환될 때, 해당 국가에 마커를 그리고 싶은데..ㅠㅠ 좌표가없어서 그리질못하고 있습니당..

    좌표를 첨에 강제적으로 박아주는 방법뿐이 없나요? 그것이 싫어서 이렇게 고생하고 있습니다...

    • 방법이 없으면 그냥 그리면 됩니다...;;

      오늘 작업해볼게요...

      세계지도를 기준으로 국가의 중앙에 마커를 표시하는 샘플을 만들어 올릴테니 참고하시면 될거 같네요..

  3. 츤데레 2013.11.25 18:26 신고

    헉 감사합니다... 현재 point까지 구했는데 map.pointToLatLng 이놈이 자꾸 없는 함수라고 나오네요 크흑..감사합니다. ㅠ

  4. 츤데레 2013.11.26 09:40 신고

    저는 포인트는 구했어요

    https://github.com/bjornd/jvectormap/issues/146 에 있습니다. map의 이름이 달랐어요 ㅠㅠ 저는 mapObject로 설정했는데 ㅠㅠ뻘짓...

  5. 츤데레 2013.11.26 11:52 신고

    좌표가 올바른 좌표가 아니네요...그래도 컨버팅하는 방법은 저것이 맞습니다..

    • 위 계산식으로 하면 좌표가 안찍혀요 ~

      지금 계산한거가... 경도는 맞는데 위도가 안맞네요..
      일단 오늘 저녁에 웹에 올릴게요 -


Shape 형식의 맵을 jVectorMap으로 변환할 경우 생겼던 문제점과 해결법을 정리해보면..

1. jvm 기본 컨버터를 이용해서 변환할 경우 구멍이 숭숭 뚫리는 경우가 발생한다.
2. 이를 방지하고자 QGIS 프로그램을 이용하여 SHP -> SVG로 변환하여 홈페이지에서 스크립트를 생성하였다.
3. QGIS SVG 플러그인은 SHP 파일의 속성을 SVG로 변환하지 못하기 때문에 id와 title이 id0, name0 이렇게 나오는 문제가
발생.
4. 누군가가 id와 name을 입력하겠지 했지만 다른 사이트를 찾아 이를 해결..
5. http://indiemapper.com/app/ 에서 shp -> svg 를 보다 깔끔하고 속성까지 같이 SVG로 변환해 준다.
   -> 관련글 http://www.yeory.com/275
6. 변환된 SVG를 홈페이지에서 스크립트로 생성하니 id와 name 모두 제대로 표시가 된다.
7. 영문 표기된 각 도시와 구/군 이름은 누군가 한글로 바꾸겠지 하고 패스

이로써 지도에 관련된 개발/변환 작업은 모두 끝이리라 생각했지만... 발주처인 기상청은 甲 이었다.

세종시까지 표현된.. 그리고 시/구/군명이 한글인 Shape 파일을 내게 넘기었다.

Shape 파일을 위 방식대로 변환을 시도하니 (5)의 사이트에서 한글이 깨져버린다.
외쿡 사이트여서 한글 지원이 안되나보다.... 
시간이 없다.. 그래서 아래 방법대로 복잡하지만 변환에 성공하였다... 

1. QGIS 에서 플러그인을 이용하여 한글 속성 지우기

   SVG에 속성을 포함시키는 변환법은 indiemapper 사이트를 이용하는 수 밖에 없는데 한글이 안되므로.. 빼야한다.. 
 QGIS의 플러그인을 이용하여 제거할 수 있다. ( Plug-in : Table Manager)
 


한글 속성인 SIGUNGU_NM을 선택하고 우측의 Delete를 눌러서 지운다.

아래 Save를 눌러 저장을 하고 백업을 묻는 대화상자가 나타날 경우 꼭 Yes를 누르자..
(나중에 엑셀에서 데이터 추출할때 필요하다. )


저장이 되었다면 지도를 SHP로 다시 저장한다. (한글 속성을 제외했으므로)

< 레이어 창에서 우클릭  >

< 탐색을 눌러 이름을 지정하고 아래 OK를 눌러 저장한다. >

 

 
2. 내가 표시하고자 하는 사이즈에 지도를 맞추어주기.
   http://indiemapper.com/app/ 에서 (1)에서 작업한 shp 파일을 불러와 작업을 해야한다.
   

페이지를 누르게 되면 지도 크기를 조절할 수 있는데
크기를 조절 한후 왼쪽 상단의 지구본 모양을 누르면 자동으로 지도가 맞춰진다.

[##_http://www.yeory.com/script/powerEditor/pages/1C%7Ccfile21.uf@256B8A4151FB4AD2307A74.png%7Cwidth=%22683%22%20height=%22454%22%20alt=%22%22%20filename=%22%EC%9D%B4%EB%AF%B8%EC%A7%80%2016.png%22%20filemime=%22image/jpeg%22%7C_##]

그리고 레이아웃 창에서 꼭 격자를 해제하여 나타나지 않도록 해준다.

지도 크기에 그려진 맵을 맞추었으면 export를 눌러 지도 사이즈와 옵션을 확인한다.

[##_http://www.yeory.com/script/powerEditor/pages/1C%7Ccfile22.uf@2254714051FB4B3A1CED9C.png%7Cwidth=%22504%22%20height=%2241%22%20alt=%22%22%20filename=%22%EC%9D%B4%EB%AF%B8%EC%A7%80%209.png%22%20filemime=%22image/jpeg%22%7C_##]

 

[##_http://www.yeory.com/script/powerEditor/pages/1C%7Ccfile10.uf@2140C63D51FB4B6333B073.png%7Cwidth=%22283%22%20height=%22414%22%20alt=%22%22%20filename=%22%EC%9D%B4%EB%AF%B8%EC%A7%80%2018.png%22%20filemime=%22image/jpeg%22%7C_##]
SVG 파일 이름을 지정하고 생성 -> 다운로드


3. 변환한 SVG 파일을 열어 상위, 하위 g 태그를 지워야 한다. (그리드 및 페이지 테두리 태그임)

 파일 내용 중 빨간색 박스의 태그는 삭제.. 

 
4. 엑셀에서 백업한 dbf 파일 작업하기

QGIS에서 백업한 DBF 파일을 읽어들여 1 행을 삭제한다.
(아래에선 SIGUN ~~ ) 

 

삭제한 후 파일-> 다른이름으로 저장 -> 텍스트 (탭으로 구분) 형식으로 저장.

5. SVG 파일과 텍스트 파일을 자바에서 읽어들여 SIGUNGU_NM을 SVG의 각 path 속성으로 추가하기.
   -> Web에서 가능하게 제작중...

6. 변환이 완료된 SVG 파일을 에디터로 열어 복사한 후 jvm 사이트에서 스크립트로 생성해준다.    



 
 위 작업을 알아내기까지 정말 삽질의 연속이었다.

능력이 미천하여 indiemapper 사이트처럼 만들지도 못하니 복잡하게 해야지..

한글 속성을 가진 Shape 파일을 jVectorMap으로 만들기 위해선 어쩔 수 없는 듯하다...

위 시군구를 표시한 지도는 아래 링크에 결과가 있다.

http://www.yeory.com/274 

+ Recent posts