본문 바로가기
반응형

분류 전체보기706

[JavaScript] 숫자를 문자로, 문자를 숫자로 변환하기 script를 사용하면서 숫자를 문자로 변환 또는 문자를 숫자로 변환하는 경우가 굉장히 많이 생긴다. 숫자를 문자로, 문자를 숫자로 변환하는 여러가지 방법에 대해 알아보자. 개인적으로 무조건 알아둬야 하는 방법이라 생각된다. 1. 숫자를 문자로 변환하는 방법 일반적으로 3가지 방법이 있는데, 아래와 같다. 1) 숫자로 된 변수 뒤에 더블쿼터 혹은 싱글쿼터를 붙이는 방법 2) String 함수를 사용하는 방법 3) toString 함수를 사용하는 방법 각각 어떤식으로 사용하는지 예제를 통해 확인해보자. ▷ 예제 1) 일반적인 3가지 방법을 이용하여 숫자를 문자로 변환하기 var num1 = 10000; var num2 = 50000; var num3 = 100000; var text1 = num1 + ''.. 2020. 8. 19.
[OpenLayers] 좌표 경도(x),위도(y) 의 좌표계 변경하기 (from 4326 to 3857) - x,y 좌표계 변경하기 from EPSG:4326 to EPSG:3857 - API 기능을 통해 x,y 좌표를 받아왔는데 이 좌표를 사용하여 지도를 움직이고자 하는데 좌표계가 맞지않아 바꿔야 하는 상황이다. 이번 역시 결과적으로 매우 간단한 코드가 나와서 다행이다. var center = ol.proj.transform([lon,lat],'EPSG:4326','EPSG:3857') map.getView().setCenter(center); 변환 자체는 ol.proj.transform 한줄이면 끝나고 그걸 사용하여 openlayers의 지도를 이동해주는 코드이다. 변경 전/후를 비교해보면 다음과 같다. 같은 방식으로 다른 x,y 좌표계 역시도 변경할 수 있을것으로 보인다. 2020. 8. 18.
[Kakao API] 주소 검색 API 사용하기 - Maps API (ft. javascript REST API) 주소 검색 API 사용 방법에 대해 알아보자 대체로 API 관련하여 예제가 존재하며, 그것을 가져다 쓰면 손쉽게 사용이 가능했는데 이번에 사용할 주소 검색 API는 예제가 존재하지 않는데 그래서 직접 시행착오를 겪으면서 적용을 해보았다. 우선 kakao developers에 존재하는 주소 검색에 관한 개발가이드이다. https://developers.kakao.com/docs/latest/ko/local/dev-guide#address-coord 주소 검색 API는 REST API 로 제공하며 위와같은 내용뿐이여서 예제없이 처음해봐 매우 난감하였다. 인터넷에 많이 찾아봐도 대부분 서버단에서 처리하는 방법만 나오고 잘 안나왔는데 여기저기 짜집기 하다가 결국 javascript를 사용하여 rest api를 .. 2020. 8. 18.
[OpenLayers] features from GeoJSON import (피처정보 가져오기) - OpenLayers import GeoJSON - 앞서 정리한 글에서 geoJson export를 해봤는데여기서 export한 geojson 즉 json파일을 import해보도록하자(파일로 추출은 안해봤지만 했다는 가정하에 파일을 읽어보도록한다.) geojson으로 추출한 정보가 들어있는 이 .json파일을 가지고 해볼것이다. OpenLayers_MAP Point LineString Polygon Circle None getGeoJSON setGeoJSON importJson() 메소드를 통해서 json 파일을 읽어보려한다. 읽는방법 자체는 간단하다 ol.source.Vector 에서 url 과 format을 설정해주고 vector layer를 생성한 후 maplayer에 넣어주면 된다. 그러면 아래.. 2020. 8. 17.
[OpenLayers] features to GeoJSON export (피처정보 추출하기) - 도형으로 그린 피처 정보 GeoJSON으로 추출하기 -직접 그린 도형들을 geojson 형태로 추출하여 저장해야 하는 경우가 생길수 있다. geojson은 간단하게 json 에서 위치정보를 가진것을 geojson이라 생각하고 넘어가자 다행히 json형태로 정보를 추출하는건 openlayers - extension 에 예제가 존재하기 때문에 보고 가져다 사용하면 된다. https://viglino.github.io/ol-ext/examples/bar/map.control.editionbar.html OpenLayers_MAP Point LineString Polygon Circle None getGeoJSON 이 앞에서 그리기 관련 게시글을 작성했던 소스와 별반 차이는 없지만 마지막에 new ol.fo.. 2020. 8. 17.
[OpenLayers] 마우스로 도형 그리기(Draw) 및 벡터레이어(VectorLayer) 추가 - OpenLayers Draw & VectorLayer -지도 위에 마우스로 가볍게 도형을 그리고 싶을때 Draw를 활용하여 그리는데 그냥 지도위에는 그릴수는 없고 vector layer를 깔아두고 그 위에 그려야한다. OpenLayers_MAP Point LineString Polygon Circle None 코드를 보면 알겠지만 selectbox를 통해서 그리기를 제어할 것이다. ol.layer.Vector 를 통해서 우선 지도에 vector layer를 깔아주고(여기서 wrapX : false 는 같은 좌표에 한해서 그리기게 제한된다-같은좌표 클릭 불가) ol.interaction.Draw를 통해 선택한 type 별로 그리기를 지원해줄것이다. 소스 중간에 removeInteraction()과 ad.. 2020. 8. 17.
[OpenLayers] 스와이프(Swipe) 기능 적용하기 (ft. ON/OFF 제어) - OpenLayers Swipe 기능 적용하기 -이번에도 역시 oplayers-extension 에서 가져온 기능을 사용할것이다. 사실 예제가 아주 잘되어있기에 가져다 쓰기만 하면 된다. https://viglino.github.io/ol-ext/examples/control/map.control.swipe.html 기본 예제에서 추가적으로 ON/OFF 로 제어하는 방법까지 기록해보자.(ON/OFF는 다른방법도 많겠지만 일단 잠깐 맛보기로 적용시켜 본것이다.) OpenLayers_MAP SWIPE OpenLayers extension 에서 제공하는 ol.control.Swipe() 기능을 사용한 것이다. 그저 스와이프 기능만 적용한다면 swipeOn() 메소드에 존재하는 4줄만 가져다 쓰면 사용할 수 .. 2020. 8. 17.
[OW Shredder] 완전 삭제 프로그램 - Data eraser (ft. FREE) - OW Shredder - File, folder and drive eraser무료로 제공하는 완전 삭제 프로그램이며 종류는 많지만 이번 사업에서 처음 접하게되어 기록해둔다.구글에 그냥 OW Shredder라 쳐도 첫번째 검색된 사이트에서 바로 다운로드가 가능하다. https://schiffer.tech/ow-shredder.html 이 사이트를 통해 다운로드를 해보자. 완전 삭제 프로그램이라 그런지 휴지통 이미지가 들어가자마자 보인다. Download라는 버튼이 크게 있어서 따로 표시는 안해두었다. Download 버튼을 클릭해보자. 그러면 아래와 같이 페이지의 하단부로 이동하게되어 Download를 할 수 있게 제공해주고있다. FREE라 쓰여있는거 보아하니 무료인거같고 버튼 클릭하여 받아주자. OW.. 2020. 8. 11.
[OpenLayers] 특정 레이어 추가 및 제거하기 (ft. addLayer, removeLayer) - OpenLayers를 활용한 특정 레이어의 추가 및 삭제 -첫 배경지도로 띄운 map에 특정 레이어를 추가하거나 삭제를 해보자. 복잡한 예제말고 그냥 간단한 상황의 예제를 통해 추가 및 삭제를 진행해보자 OpenLayers_MAP 우선 당연하게도 layer를 추가하거나 삭제하기 위해서는layer를 담아두는 map객체가 존재해야한다.그리고쉽게 접근하기위해 미리 두개의 레이어를 선언해두고map객체에는 Basemap을 표출해놓았다.레어어를 추가하거나 삭제하는 명령어는 간단하다.map객체에서 지원해주는 명령어가 있기때문에(map을 담아둔 변수를 의미한다.) map.addLayer(grayMap);을 사용하여 회색지도를 넣어봤다. 이제 회색지도를 지워보도록하자 추가할때 넣어준 layer변수명을 그대로 사용해주.. 2020. 8. 10.
반응형
TOP

티스토리툴바