VWORLD 8

TerriaJS로 만드는 강력한 웹 기반 공간정보 플랫폼

TerriaJS는 호주 정부의 Data61(CSIRO의 디지털 연구 부문)에서 개발한 오픈소스 공간정보 플랫폼입니다. 2D와 3D 지도 시각화를 위한 웹 기반 프레임워크로, 다양한 공간 데이터를 통합하고 시각화할 수 있습니다.TerriaJS의 주요 특징강력한 데이터 통합WMS, WFS, GeoJSON, KML 등 다양한 공간데이터 포맷 지원CSV 파일의 위치 정보 매핑 기능실시간 데이터 스트리밍 지원사용자 친화적 인터페이스직관적인 드래그 앤 드롭 방식의 데이터 추가레이어 투명도 조절 및 스타일링 기능시계열 데이터 애니메이션 지원고급 분석 도구공간 분석 및 차트 생성 기능3D 지형 가시화사용자 정의 분석 도구 추가 가능TerriaJS 기반 주요 프로젝트NationalMap (호주)호주 정부의 공식 공간정보..

MapLibre - #5 내 위치 공시지가 확인 코딩 1편

이번 글은 내가 지도에서 터치한 곳의 공시지가를 확인하는 코드입니다. 이번 글도 이전 MapLibre 강좌와 이어집니다. 공시지가를 확인 하는 방법은 여러가지가 있겠지만, 국토교통부 브이월드 서비스에서 제공하는 OpenAPI를 활용하는 방법으로 코드를 작성했습니다. 가져오는 내용은 선택위치의 지번주소와 공시지가, 공시지가 기준월을 브이월드 WFS 서비스를 통해 가져옵니다. 주요 코드부분은 맵이 준비가 되면(onMapReady), 맵 클릭 이벤트 핸들러를 등록해 줍니다. 맵 클릭 이벤트에서 해당 포인트의 경위도 좌표를 획득하고 브이월드 WFS 요청 URL을 생성합니다. 브이월드 WFS URL 요청문 설명 페이지를 참고하셔서 해당 구문을 작성하시면 됩니다. 이 예제에서는 filter 구문을 활용해 WFS U..

MapLibre - #3 나만의 맵 앱 만들기 3편

이번 글에서는 국토교통부에서 구축해서 브이월드를 통해 제공하는 연속지적도를 지도에 올려보겠습니다. 브이월드에서 제공하는 연속지적도 이미지는 WMS로 제공하고 있습니다. 지난 글에서 작성한 AddWMTSLayer와 유사한 메소드를 작성해서 맵에 추가해 보도록 하겠습니다. 개발환경 설정 및 브이월드 배경지도 추가 방법은 지난 MapLibre #1, #2 강좌를 참고하시면 됩니다. 이번 글에서는 곧바로 추가적인 코드를 설명드리겠습니다. 261번째 라인부터 AddLpPaCbndLayer라는 메소드를 정의했습니다. 브이월드 WMS 호출 URL은 여기를 참고하시면 됩니다. 요청 URL중에 layers 부분에 가져오고 싶은 레이어 이름을 영문으로 적어줍니다. 여기서는 연속지적 본번, 부번 레이어를 동시에 가져왔습니다..

MapLibre - #1 나만의 맵 앱 만들기 1편

MapLibre는 iOS, Android 및 기타 플랫폼 용 지도 SDK입니다. MapLibre - Open Maps SDKs Open-source JavaScript and Android / iOS SDKs for building web and mobile apps maplibre.org 모태가 되는 오픈 소스는 Mapbox 인데, 이 Mapbox가 2.0부터 더이상 오픈 소스가 아닌 상용 소프트웨어가 됐습니다. MapLibre는 Mapbox 오픈소스 버전을 계속해서 유지하고 있고 mapbox와 거의 유사하게 코드가 구성되어 있습니다. 오픈소스는 MapTiler라는 회사가 지원하는 것으로 보입니다. MapLibre 포함 Mapbox GL 관련 내용은 여기에 자세히 나와 있으니 관심있으신 분들은 확인해 ..

leaflet - #8 거리와 면적 측정하기 2편

지난 글에서 소개해 드린 거리와 면적 측정 기능에 평을 추가하는 방법을 알려드리겠습니다. 어느 때부터인가 평을 공식적으로 쓰지 못하게(?) 되어서 네이버나 카카오 맵에서 평을 확인하려면 번거로운데 여전히 평을 많이 사용하는 환경에서 굳이 기능을 숨겨야 하는지 잘 모르겠습니다. 아래처럼 옵션을 주시면 기존 제곱미터(평방미터) 옆에 평으로 환산된 면적이 표시됩니다. See the Pen leaflet tutorial #8 by yogin (@yogin) on CodePen. 주요 코드를 설명 드리면 var options = { primaryLengthUnit: 'meters', secondaryLengthUnit: 'kilometers', primaryAreaUnit: 'sqmeters', secondary..

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로 교체가 되지는 않습니다. 그래도 없는것보다 낫다는 것이겠죠. 이번에도 서두가 길었는데, 아래..