OpenLayer, 마커 만들기 마커 만들기 기존 과정을 넘겨, 바로 Marker 생성으로 넘어가 보도록 한다. 2021.11.09 - [Web/JavaScript] - OpenLayer, 지도 이동하기 OpenLayer, 지도 이동하기 OpenLayer, 지도 이동하기 지도 이동하기 map.getView().setCenter('좌표'); 지도 이동하는 방법은 다음과 같다. map을 담고 있는 변수 명의 getView(). setCenter(경도, 위도)를 담으면 이동이 가능하다. 그러.. mollangpiu.tistory.com 이전 글에서 코드를 추가하여 마커 기능을 추가하였다. 소스 공유 이동 앞서, 오픈레이어의 구조 중 제일 중요한 것을 꼽는다면, Layer가 되겠다. Layer는 OpenLaye..
OpenLayer, 지도 이동하기 지도 이동하기 map.getView().setCenter('좌표'); 지도 이동하는 방법은 다음과 같다. map을 담고 있는 변수 명의 getView(). setCenter(경도, 위도)를 담으면 이동이 가능하다. 그러나 이를 활용하기 위해서는 조금 복잡한 과정을 겪는다. 그냥 된다면 매우 행운스럽겠지만, 안타깝게도 오픈 레이어를 노말로 사용할 확률은 매우 적기 때문이다. 지도를 이용하는 방법 오픈레이어 라이브러리를 가져온 오픈 레이어는 단순하다. 여기서, 이전 글을 살펴보았다면 좌표계의 설정이 안 된 OpenLayer인 것을 확인할 수 있다. 이를 확인하는 방법은, Map에 설정된 View의 설정에서 projection이 존재하는 여부에 따라 결정된다. 여기서는 존재하..
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({ //지도에 대한 ..
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..