이전 글에서 설정한 Static Image 위에 주어진 위치의 아이콘을 표시하는 예제입니다. [OpenLayers] Static Image OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. HTML Script // main.js // 지 hgko-dev.tistory.com OpenLayers 3 버전을 사용하였습니다. Script 기존 코드에서 addVectorLayer 함수와 styles 객체가 추가되었습니다. 먼저 ol.style.Icon 을 이용해서 아이콘 경로를 설정합니다. const styles = { icon:..

OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. HTML Script // main.js // 지도 정보 const mapInfo = { map: null, extent: null, projection: null, setProjection: function (w, h) { this.extent = [0, 0, w, h]; this.projection = new ol.proj.Projection({ code: 'pixel', units: 'pixels', extent: this.extent, }); }, init: funct..

JavaScript 에서 주민등록번호 유효성 검사 방법에 대해 알아보겠습니다. 주민등록번호란 주민등록번호는 “주민의 거주관계를 파악하고 상시로 인구의 동태를 명확히 하여 행정사무의 적정하고 간이 한 처리를 도모함”(1962년 주민등록법) 등을 목적으로 만든 일련번호로서, 개개인의 신원을 명확하게 구분하는 역할을 한다. 나무위키 내국인과 외국인 주민등록번호 유효성을 검사하는 소스코드입니다. 내국인 주민등록번호와 달리 외국인 등록번호는 뒤 7자리 숫자의 첫 숫자가 2000년 이전 출생 외국인에게는 남자는 5, 여자는 6, 2000년 이후 출생 외국인에게는 남자는 7, 여자는 8로 부여하고 있습니다. 내국인 주민등록번호 숫자는 1, 2, 3, 4 로 시작됩니다. 주민등록번호 입력 : - 검증 const Com..

이미지를 Jcrop 라이브러리를 사용하여 자르고 Canvas 영역을 blob 형식으로 바꿔서 a Tag를 생성하여 다운로드를 시도하였습니다. 크롬에서는 잘 동작하였지만 IE에서는 동작하지 않고 에러를 발생하였습니다. 아래 코드처럼 작성하였더니 둘 다 동작하였습니다. 소스 코드 function downloadURI(blob, name) { if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE에서 동작 window.navigator.msSaveBlob(blob, name); } else { // 크롬에서 동작 var link = document.createElement('a'); link.download = name; link.href = U..

서론 [사진 보기], [동영상 보기] 버튼을 클릭 시 모달창이 띄워지면서 사진 또는 동영상이 출력되도록 하는 예제입니다. 사진과 동영상 파일을 images 경로에 저장하여 출력하였고, 실제 구동되는 프로젝트에서는 웹 서버가 실행되는 곳의 특정 경로에 저장하여 URL을 불러와서 출력합니다. html 사진 보기 동영상 보기 사진/동영상 보기 × javascript JQuery를 이용하여 모달창을 생성합니다. // 이미지 출력 모달창 오픈 function openImageModal() { $('#file-viewer').empty(); let img = document.createElement('img'); img.setAttribute('src', 'images/image.jpg'); img.setAttri..

JQuery를 이용해서 select를 제어하는 방법에 대해 알아보겠습니다. 선택된 옵션 값 읽기 $('#nameSelect option:selected').val(); $('select[name=name]').val(); 선택된 옵션 이름 읽기 $('#nameSelect option:selected').text(); 옵션 추가하기 $('#nameSelect').append( $('', { value: 1, text: '테스트', }) ); 값이 변경되었을 때 $('#nameSelect').change(function () { const name = $(this).val(); console.log(name); }); 특정한 값 선택하기 $('#nameSelect').val(1).trigger('change..

UTF-8 인코딩 방식 바이트 길이 구하기 한글 한글자당 3 바이트씩 계산됩니다. // Function const getByteLengthOfString = function(s,b,i,c){ for(b=i=0;c=s.charCodeAt(i++);b+=c>>11?3:c>>7?2:1); return b; }; // Test const test = '테스트'; console.log('length : ', getByteLengthOfString(test), 'Bytes'); # 결과 length : 9 Bytes 한글의 경우 2바이트 계산되도록 아래 함수를 통해 한글 문자열의 바이트 수를 2 바이트로 나오게 할 수 있습니다. // Function String.prototype.getBytes = function..

JQuery 용 테이블 라이브러리인 DataTables 플러그인을 사용하여 개발했을 경우 편리하게 사용하기 위해 구조를 설계하였습니다. DataTables는 데이터를 테이블로 쉽게 구현할 수 있도록 도와주는 라이브러리입니다. 설치와 사용법은 DataTables 공식 사이트에 잘 설명되어 있기 때문에 생략하겠습니다. 초기 설정 여러 곳에서 DataTables로 작업할 때 유용하도록 초기 기본값으로 설정하였습니다. // table.js $.extend($.fn.dataTable.defaults, { autoWidth: false, dom: ``, language: { emptyTable: '데이터가 없습니다.', infoEmpty: '', info: ' _TOTAL_ 개의 데이터가 있습니다.', search..

Geoserver에서 필요한 정보를 가져오기 위해 OpenLayers의 getGetFeatureInfoUrl 함수를 사용하였습니다. feature의 정보 중에 GRAY_INDEX 라는 컬럼의 정보를 가져와야 합니다. 아래 방식으로 image 형태인 layer 를 구성하였습니다. var wmsLayer = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8080/geoserver/img/wms', params: { FORMAT: 'image/png', VERSION: '1.1.1', STYLES: '', }, }), }); getGetFeatureInfoUrl 함수를 사용하여 feature 정보를 불..

영상 레이어 추가 Geoserver에 추가된 영상 레이어를 Cesium 지도에 표출하는 코드입니다. layers 에는 Geoserver에 있는 레이어의 이름을 넣으면 됩니다. let imageryLayer = viewer.imageryLayers.addImageryProvider( new Cesium.WebMapServiceImageryProvider({ url: 'http://localhost:8080/geoserver/img/wms', layers: 'img:GCOMW1_L2_SMC_20120703', parameters: { service: 'WMS', version: '1.1.0', request: 'GetMap', styles: '', srs: 'EPSG:4326', format: 'image/..