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..
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. 해당 사이트에서 필요한 정보를 가져온다. 우리는..