OpenLayer, Layer 수정하기 수정하기 해당 글은 이전의 글을 이어가는 과정이다. 글을 나눈 이유는 수정하기가 생각보다 어렵지 않기 때문이다. 그러나 헷갈릴 수 있으므로, 글을 나누어 추가하는 과정을 통해 응용하길 바라는 마음으로 나누게 되었다. 1. Vector에 수정권한 넣기 VectorLayer에 editable을 추가하였다. 이는 true일 경우 해당 Layer를 수정할 수 있는 권한을 준다는 의미이다. 2. 수정할 Layer의 값 불러오기 수정하기는 interaction의 기능 중 하나이다. 여기서 포인트는 수정하기 위해서는 수정할 대상의 VectorLayer가 존재해야 한다는 것이다. 그러나 해당 소스는 불러오는 Source가 따로 없고 만들어진 Source를 수정하는 과정이므로 선택..
OpenLayer, 등록하기, 선택하기 동시 사용하기 화면 구성 Draw or Select Interaction: Draw Select html의 화면은 다음과 같다. Select박스의 공간과 map을 표시하는 div의 공간이 전부이다. 등록하기 이전에도 설명한 글이지만, 중요한 부분이므로 다시 작성하게 되었다. 음식을 담기 위해서는 반드시 그릇이 필요하다. 마찬가지로 데이터를 저장하기 위해서는 반드시 Object가 필요하다. OpenLayer에서 좌표를 받기 위해서는 Vector의 Layer가 필요하다. 이를 map 선언 시 다음과 같이 입력해야 한다. 후에 map.addLayer를 이용하여 추가할 수 있지만, Layer가 다수로 나뉘어서 관리하기 어렵다는 단점이 있다. 따라서 하나로 관리할 수 있도록..
OpenLayer, 데이터 저장하기와 불러오기 데이터 저장하기 기존의 글을 이어서 데이터 저장하기 기능부터 만들었다. 저장하는 방법은 다음과 같다. var vectorLayer1 = new ol.layer.Vector({ source: new ol.source.Vector() }); $('#map_value').on('click', function(e) { var json = new ol.format.GeoJSON().writeFeatures(vectorLayer1.getSource().getFeatures()); console.log(json); }); 2021.10.08 - [Web/JavaScript] - OpenLayer, 좌표 등록하기 OpenLayer, 좌표 등록하기 OpenLayer, 좌표 ..
JavaScript, addEventListner 알아보기 addEventListner 다른 사람의 JavaScript 문구를 본다면, addEventListner를 종종 볼 수 있다. 이를 사용하는 이유, 기존 function와 무슨 차이가 있는지에 대해 알아보는 시간을 갖도록 하겠다. Draw Select 시작은 바로 addEventListner를 사용하여, 간단한 예시를 들었다. 의 id='js-select'를 빌려서 select 변경 시 발생되는 event를 작성하였다. 실행 시, alert창이 발생되는 것을 확인할 수 있다. 여기서 의문을 갖게 된다. 그렇다면 왜? function을 사용하지 않고 addEventListner를 사용하게 될까? 이의 해답은 아래에서 쉽게 찾아 볼 수 있다. 보통 ..
OpenLayer, 스타일 변경하기 스타일 변경하기 기존의 오픈레이어를 사용하기에는 표시되는 선이 매우 얇다. 지도의 가독성이 떨어지고, 구분이 어려워지는 단점이 있다. 그래서 선의 스타일을 변경하려고 한다. 기존의 좌측모습에서, 변경된 우측으로 바꿀 예정이다. Style 적용방법 drawControl = new ol.interaction.Draw({ type: geometryType, //Point, LineString, Polygon, Circle source: vectorLayer1.getSource(), //vectorLayer1.getSource(); //클릭 했을 때 선 스타일 변경하기 style: [ new ol.style.Style({ stroke: new ol.style.Stroke({ ..
OpenLayer, 좌표계 변환하기 좌표계 변환하기 전의 글 사진을 인용을 해보았다. 오픈 레이어를 처음 사용한 사람이라면, 모르겠지만 카카오 API로부터 지도 API를 처음 접한 나의 입장에서는 좌표의 위치가 다르다는 것을 알 수 있다. 흔히, 우리나라의 아픈 추억으로 일컫는 북위 38선.그래서 우리나라의 수도의 위도의 좌표는 대략 37.5 정도로 나온다. 그러나 저 위의 코드로는 수도, 경복궁이 중심임에도 37이라는 숫자는 어디서도 찾을 수가 없다.이는 오픈 레이어가 표시하는 좌표가 우리나라 지도 API에서 제공하는 좌표계가 달라서 생겨나는 이유이다. 만약, 오픈레이어만 사용한다면 이런 문제점에 대해서 그냥 지나칠 수 있지만다른 곳에서 가져온 좌표를 오픈 레이어에 적용을 한다면, 좌표에서 벗어난 값이..
OpenLayer, 한국에 익숙한 Layer 소개 OpenLayer의 VWORLD 소개 https://www.vworld.kr/dev/v4api.do 공간정보 오픈플랫폼 오픈API 오픈 API 누구나 사용할 수 있는 지도 오픈플랫폼의 오픈 API 서비스는 국가 공간정보의 개방, 공유, 참여를 통해 공간정보의 자율적이고 창조적인 다양한 애플리케이션을 개발할 수 있도록 기술 www.vworld.kr 오픈레이어를 공부하는 도중, 재밋는 사이트를 알게되었습니다. 저희가 사용하는 오픈레이어에 대해 '한국 주소'에 대한 정보가 담겨 있는 오픈레이어 api 입니다. 오픈레이어의 최대 단점은 '주소검색' 입니다. 기본적인 오픈레이어 사용방법으로는 카카오, 네이버, 구글 API처럼 주소검색기능이 없습니다. 그러나 위의 ..
OpenLayer, 좌표 등록하기 OpenLayer의 Vector 이전 글에 대해서 외부 WEB을 통해서 불러오는 연습을 하였다 이번에는 외부 WEB의 도움 없이 좌표를 등록하는 과정을 갖도록 한다. MAP에 대한 구조는 생각보다 단순하다. MAP의 OBJECT가 VECTOR과 TILE을 필요로 한다. 그중 우리가 알아야 할 것은 Vector이다.Vector은 좌표를 저장하는 역할을 하기 때문에, 이의 도움을 받아야 좌표를 등록할 수 있다. //좌표를 저장할 Object(공간)을 생성한다. var vectorLayer1 = new ol.layer.Vector({ source: new ol.source.Vector() }); //Map을 호출한다. var map = new ol.Map({ //지도에 대한 ..
@RequestParam 활용하기 RequestParam Spring Controller에서 @RequestParam은 매우 유용한 기능입니다. jsp를 배웠다면 request.getParameter의 기능이라고 생각하시면 됩니다. requestParam은 jsp에서 보낸 request값을 효율적으로 받기 위해 사용합니다. 기본적인 정의입니다. @Controller public class TestController { //테스트 입니다. @RequestMapping(value="/test/Test_edit.do", method= {RequestMethod.GET}) public String Test_edit(Model model, @RequestParam(value="mod") String mod) th..
Display 감추기, 보이기 CSS, dsipaly 감추고 보이게 하기 display의 기본은 다음과 같습니다. //display의 기본값 //display 감추기 기본적으로 block와 none를 사용합니다. block는 display의 가장 기본값이므로 display설정 안 할 경우, 자동적으로 주어지는 값입니다. none는 display의 숨길 때 가장 대표적으로 사용하는 명령어로, 해당 영역을 숨길때 사용하게 됩니다. 이제 위의 명령어를 활용하여 javascript를 통해 변경하도록 하겠습니다. JavaScript에서 변경하기 만약 위에처럼 html에 해당 영역이 있다고 가정하였을 경우에 대해 살펴보겠습니다. JavaScript에서 변경하기 //display 보이게 하기 document.getE..
OpenLayer, Vector 적용하기 Vector 적용하기 OpenLayer에서 Vector란, 지도의 좌표를 저장하는 Object입니다. 저장하거나 불러오거나 할 때 Vector을 사용합니다. 지금은 연습삼아서 GEOJOSN.IO를 통해서 해당 지도만의 Vector파일을 만들도록 하겠습니다. 저장 방식은 JSON 방식을 사용하고 있습니다. 지도 위에 마커, 선, 도형 등 그릴 수 있게 해주는 기능입니다. 우리는 먼저, 이 기능을 사용하기 위해서 이 사이트의 도움을 받도록 하겠습니다. https://geojson.io/ geojson.io geojson.io 해당 사이트에 접속하셔서, 지도 위에 아무렇게나 그려주시면 됩니다. 그리고 Save - GeoJSON을 통하여 기능을 저장하도록 합니다. 저장되..
OpenLayers 지도 설정하는 방법 OpenLayers 지도 설정하기 지도의 설정은 다음과 같습니다. 지도의 설정이 필요할 경우 View에서 설정을 변경하시면 됩니다. 지도가 시계방향으로 돌아간 것을 확인할 수 있게 됩니다. 또한 maxZoom과 minZoom이 설정이 되어있어서, zoom에도 변화가 생긴 것을 확일 할 수 있게 됩니다. 좌표 알아내기 지도를 클릭하면 console.. log가 나타나도록 설정하였습니다. console.log를 통해서 클릭한 곳의 좌표가 검색되었습니다. 검색된 좌표 0과 1을 Map의 Center에 주입하고 새로고침을 해보겠습니다. 검색 된 곳을 기준으로 map의 중심 위치를 변경할 수 있게 됩니다. 지도 API에 대해 검색하기 https://openlayers.org..
OpenLayers 지도 불러오기 OpenLayers 지도 불러오기 전 포스팅 내용대로 진행이 되었다면, 지도 불러오는 과정은 매우 심플합니다. 먼저, html에서 id를 설정을 합니다. css는 별도로 정의하지 않았습니다. 지도에 필요한 JavaScript 설정을 불러옵니다. 각 필요한 부분에 대해서는 주석으로 첨부하였습니다. 결과 보기 성공적으로 지도가 출력된 것을 확인할 수 있습니다. 이전 글 확인하기 2021.08.25 - [Computer/기타] - OpenLayers 시작하기 이전 글을 참고하여, Libary를 참조하도록 합니다.
OpenLayers 시작하기 OpenLayers 란? 지도 api 중 하나이며, 기본적으로 js 기반으로 만들어진 api입니다. 별도로 key등록은 없으며, 무료로 지도 정보를 제공받을 수 있습니다. OpenLayers 시작하기 OpenLayears를 시작하기 위해서는 아래의 주소를 클릭해주세요. https://openlayers.org/ OpenLayers - Welcome A high-performance, feature-packed library for all your mapping needs. openlayers.org 해당 사이트를 접속하시게 된다면 아래의 위치를 클릭하셔서 host를 가져옵니다. 01. 사이트에서 Version을 클릭한다. 02. 해당 사이트에서 필요한 정보를 가져온다. 우리는..
파일 업로드 설정하기 목차 MultipartHttpServletRequest Spring에서 파일을 업로드, 사진을 등록하기 위해서 작업 과정에는 반드시 MultipartHttpServletRequest가 필요합니다. 기존 HttpServletRequest보다 좀 더 상위 호환?이라고 쉽게 이해하시면 되는데요. 기존 request값을 담고 있으면서, input의 file 또한 담아서 파일을 공유할 수 있게 됩니다. 사용하기 위해 필요한 조치 1. pom.xml 리포지토리 설정. 2. DispatcherServlet에 Multipart 설정하기 3. enctype를 multipart로 설정하기 4. Controller에서 MultipartHttpServletRequest 사용하기 위의 3가지를 숙지 하셨다..