전체 글 140

leaflet - #6 커스텀 마커 추가하기

leaflet에서 마커를 생성하면 파란색 핀모양의 마커가 지도에 표시됩니다. 이 파란색 마커도 괜찮지만 내가 원하는 이미지로 마커를 생성하고 싶으면 아래 방법으로 하시면 됩니다. 기본 파란색 마커를 자세히 보시면 파란색 핀모양의 이미지와 그림자가 함께 표시되는 것을 확인 할 수 있습니다. 물론 커스텀 이미지를 만들 때, 그림자 이미지 없이 마커 이미지만으로 만들어도 됩니다. 하지만 그림자가 없으면 입체감이 조금 떨어질 수 있습니다. 디테일을 중요시 하는 분이라면 그림자까지 만들어 주시면 됩니다. 올해가 임인년 호랑이 해를 맞이하여 예제 마커를 호랑이 아이콘으로 해보겠습니다. tiger와 tiger_shadow라는 2개의 png 파일을 만들어줬습니다. See the Pen leaflet tutorial #..

leaflet - #5 내 위치 찾기

이번 글에서는 지도에서 내 위치를 표시하는 기능을 만들어 보겠습니다. leaflet은 모바일 친화적인 지도 라이브러리라고 소개되어 있는데, 정말 손쉽게 내 위치를 확인하고 지도에 표시할 수 있게 만들어 놨습니다. 물론 PC에서도 내 위치 표시는 됩니다. 웹 표준이 계속해서 발전하면서 Location에 대한 표준도 정리되었습니다. leaflet은 이러한 웹표준 API를 몰라도 손쉽게 지도상에 위치를 표시할 수 있습니다. See the Pen leaflet tutorial #5 by yogin (@yogin) on CodePen. 이 코드를 실행하면 아래와 같이 표시됩니다. 자바스크립트 코드는 아래와 같습니다. var hanRiverPos = [37.5118, 126.9745]; var map = L.map..

leaflet - #4 WFS 활용하기

이번 글에서는 WFS를 활용하는 방법에 대해서 설명드리겠습니다. WFS는 Web Feature Service의 약자로 웹에서 지도에 표현하는 객체의 정보를 서비스하는 표준 스펙입니다. 역시 OGC(개방형 공간정보 컨소시엄)에서 만든 것이고, WMS(Web Map Service)와 함께 ArcGIS Server, Geoserver, Mapserver 등 대부분의 웹 서버 엔진에 구현되어있습니다. WMS 서비스와 WFS 서비스의 가장 큰 차이점은 응답 형태에 있습니다. WMS는 웹 요청에 대한 응답으로 이미지(png, jpeg 등)를 제공하고, WFS는 응답으로 텍스트 파일(gml, kml, geojson 등)을 제공합니다. WFS에서 응답으로 보내주는 텍스트 파일에는 요청한 지도 위치에 있는 객체의 기하(..

leaflet - #3 WMS 레이어 추가하기

이번 글에서는 WMS 레이어를 지도에 추가해 보겠습니다. WMS는 Web Map Service의 약자로 웹에서 지도를 표시하는 표준 서비스 스펙입니다. OGC(개방형 공간정보 컨소시엄) 라는 기구에서 만든 기준입니다. WMS와 비슷한 서비스 표준으로는 WFS, WCS, WPS, WMTS 등이 있습니다. 이런 서비스들을 OWS(OGC Web Services)라고 부릅니다. 이런 표준이 있으면 좋은 점은 특정 제품이나 회사에 지도 프로그램을 쓰다가 다른 프로그램으로 교체가 가능하다는 것이겠죠. 물론 표준이란 것이 필수적인 항목에 대해서만 통일되서 구현되어 있고 벤더마다 특별한 기능들이 추가로 구현되어 있어, 1:1로 교체가 되지는 않습니다. 그래도 없는것보다 낫다는 것이겠죠. 이번에도 서두가 길었는데, 아래..

leaflet - #2 레이어 컨트롤 추가하기

지난 글에서 처음으로 leaflet을 이용한 지도를 만들어봤습니다. 이번에는 지난 번에 만들었던 지도에 여러 개의 레이어를 추가하고, 레이어를 보이거나 감추는 컨트롤을 추가해 보겠습니다. Leaflet은 맵에 추가된 레이어의 목록을 확인하고 on/off 할 수있는 컨트롤을 제공합니다. 아래 실행화면 오른편에 보이는 아이콘이 바로 레이어 컨트롤입니다. See the Pen leaflet tutorial #2 by yogin (@yogin) on CodePen. 자바스크립트 코드 부분을 설명 드리면 var hanRiverPos = [37.5118, 126.9745]; var map = L.map('map').setView(hanRiverPos, 12); var osmLayer = L.tileLayer('ht..

leaflet - #1 가벼운 웹 지도 만들기

leaflet은 오픈소스 지도 라이브러리 중에 모바일 친화적이고, openlayers와 더불어 오래된 Javascript 라이브러리입니다. 홈페이지에는 이렇게 소개 되어 있습니다. 그리고, 위키백과에는 이렇게 소개되어 있습니다. 리플릿(Leaflet)은 웹 매핑 애플리케이션을 빌드하기 위해 사용되는 오픈 소스 자바스크립트 라이브러리이다. 2011년 처음 출시되었으며,[2] HTML5와 CSS3를 지원하고 대부분의 모바일 및 데스크톱 플랫폼을 지원한다. 사용 고객으로는 포스퀘어, 핀터레스트, 플리커가 있다. Lealfet이 지원하는 데스크톱, 모바일 웹 브라우저는 아래와 같습니다. Desktop: Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11, Edge 등 Mobile..

한줄 팁 - 여러 개의 shp 파일을 하나로 합치기

GDAL 명령어 중에 ogr2ogr 이라는 명령어가 있습니다. 주로 벡터 데이터를 가공, 변환, 추출하는데 많이 쓰이는 command line 명령어입니다. 이 명령어로 할 수 있는 것 중에 하나로, 여러 개의 shp 파일을 하나로 합치는 기능입니다. 예를 들어, 전국 200개가 넘는 시군구 데이터 파일이 시군구 별로 나눠져 있는데 이걸 하나로 합치고 싶다면 아래 명령어로 해결이 가능합니다. 한줄은 아니지만 합치고 싶은만큼 반복하며 됩니다. ogr2ogr mergeAll.shp shp-001.shp ogr2ogr -update -append mergeAll.shp shp-002.shp -nln merged ogr2ogr -update -append mergeAll.shp shp-003.shp -nls m..

QGIS - 아파트 단지 배치도를 지도에 올려보기

아파트 청약 안내 전단지나 홈페이지에 보면 앞으로 지어질 아파트의 단지 배치도를 보여줍니다. 대부분 사람들은 이렇게 제공된 단지 배치도를 기존 지도에 올려서 중첩해 보면 좋겠다고 생각합니다. 그래야 주변의 교통, 마트, 병원, 학교, 학원 위치를 파악하기 쉽기 때문이죠. QGIS를 통해 간단(?)하게 확인하는 방법을 소개해 드리겠습니다. 대략의 순서는 다음과 같습니다. QGIS를 다운로드 받습니다. QGIS에서 TMS for Korea 플러그인을 설치합니다. 아파트 단지 배치도를 불러옵니다. 단지배치도와 지도의 동일한 특정 위치들을 1:1로 맵핑시킵니다. 매핑 완료한 단지배치도를 지도사진(래스터)로 변환합니다. 기존 지도에 중첩된 단지 배치도를 확인합니다. 1. QGIS 홈페이지에서 다운로드 받습니다. ..

한줄 팁 - 좌표 입힌 GeoTiff 파일 만들기

공간정보는 크게 벡터형식과 래스터 형식으로 나뉩니다. 벡터 형식은 수학적 기하모형으로 물체의 위치와 형태를 좌표로 계산해 저장해 놓은 것이고, 래스터 형식은 사진과 같은 픽셀 단위로 위치와 형태를 저장합니다. GeoTiff는 래스터 형식중 가장 많이 쓰이는 공간정보 저장을 위한 파일 포맷입니다. 다른 래스터 파일 포맷으로는 ecw, img, jpeg2000 등이 있습니다. GeoTiff 같은 래스터 파일과 일반 사진파일의 가장 큰 차이점은 픽셀 단위로 위치정보가 저장되어 있다는 것입니다. 일반 사진에 위치정보가 저장되어 있는 경우는 사진이 찍힌 위치에 대한 Point 위치정보(EXIF GPS Tags)지만, GeoTiff의 경우에는 각 픽셀이 정확히 어느 위치인지 확인이 가능합니다. 일반 사진이나 tif..

한줄 팁 - ESRI Shapefile을 GeoJSON으로 변환하기

예전부터 벡터 공간정보 저장을 위한 Shapefile(쉐이프 파일)은 ESRI社에서 만든 포맷입니다. 이 파일은 하나의 파일이 아니라, *.shp, *.shx, *.dbf, *.prj 파일들로 구성되어 있습니다. 예를 들어 world 쉐이프 파일을 메일로 보내달라고 하면, world.shp 파일과 함께 world.shx, world.dbf, world.prj 파일을 함께 보내야 받는 쪽에서 내용을 확인 할 수 있습니다. 간단히 설명하자면 shp 파일에는 기하정보(Geometry), dbf 파일에는 속성정보(Attribute), shx 파일은 shp과 dbf간의 관계 맵핑정보가, prj 파일에는 좌표계 정보가 담겨있습니다. 이러한 ESRI Shapefile은 데스크톱 응용 프로그램에서 많이 사용하지만, 웹..