요긴소프트

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

아래 화면은 Leaflet.js와 Turf.js 라이브러리를 사용하여 대화형 지도를 생성하고 다각형 버퍼 연산을 수행하는 예제입니다.  코드를 단계별로 설명하겠습니다:1. 지도 초기화var map = L.map("map").setView([-26, 128], 5);호주 중심부 근처(-26° 위도, 128° 경도)에 지도를 생성줌 레벨은 5로 설정2. 지도 타일 레이어 추가L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {...})Carto의 밝은 색상 지도 타일을 사용지도 데이터 출처 표시3. 기본 다각형 생성var polygon = turf.polygon([...])호주 내부에 직사각형 모양의 다각형을 생성좌표점들을 ..

이 코드는 지도상에 다각형을 그리고, 버퍼 영역을 생성한 후 그 경계선을 따라 일정한 간격으로 포인트를 배치하는 방법을 보여줍니다.1. 기본 지도 설정var map = L.map("map").setView([-26, 128], 5);L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {...});호주 중심부(-26°, 128°)를 초기 뷰포인트로 설정Carto의 밝은 스타일 베이스맵 사용2. 다각형 생성const polygon = turf.polygon([...]);호주 내륙 일부를 포함하는 사각형 다각형 생성좌표: 위도 -28° ~ -20°, 경도 126° ~ 140°3. 버퍼 생성const polygon1 = turf...

오늘은 Leaflet 지도 라이브러리와 Turf.js를 사용하여 폴리곤 간의 차집합(Difference)을 구현하는 방법을 알아보겠습니다.1. 기본 지도 설정먼저 호주 중심부를 보여주는 지도를 초기화합니다:var map = L.map("map").setView([-26, 128], 5);L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { attribution: '© Carto Maps contributors'}).addTo(map);여기서 지도의 중심점을 남위 26도, 동경 128도로 설정하고 줌 레벨은 5로 지정했습니다. 베이스맵으로는 Carto의 라이트 스타일을 사용했습니다.2. 폴리곤 정의세 개의 폴리곤을 정..

이번 글에서는 정보와 범례 창을 추가해 보도록 하겠습니다. leaflet은 지도 창 위에 보여지는 요소 중 지도를 제외하고 모두 컨트롤로 취급합니다. 정보와 범례 모두 html 요소 중 div 태그(tag)를 사용한 요소입니다. 정보 컨트롤은 마우스 커서를 해당 구에 올려 놓으면 해당 구의 영역을 하일라이트로 표시하고 구 이름과 통계 지표값(예제에서는 value)을 표시합니다. 범례 컨트롤은 지도 화면 우측 하단에 지표 단계별 색상 목록을 표시합니다. 이전 예제와 다른 점은 우선 브이월드 제공 배경지도 중 회색 배경지도를 사용해 통계가 좀 더 확연히 드러나게 수정했습니다. 첨부한 소스 배경지도 설정 부분에 vworldLayer URL주소에 보시면 2d/Base -> 2d/gray로 바뀐 부분을 참고하시면..

지난 글에서는 통계용 서울시 행정경계 데이터를 로딩하는 방법을 설명했습니다. 이번에는 이 행정경계에 0에서 100사이의 무작위 값(value)을 부여하고, 값의 범위에 따라 색상을 지정하는 방법을 설명드리겠습니다. 결과는 아래와 같습니다. 주요 코드를 설명 드리면, for (var i in data.features) { var start = 0; var end = 100; var feature = data.features[i]; if (!feature.properties) continue; feature.properties.value = Math.floor((Math.random() * (end - start + 1)) + start); } geojson = L.geoJson(data, { style: ..

통계지도 형태 중 하나인 단계구분도(등치맵, choropleth Map)를 이번 예제에서 만들어 보겠습니다. 서울시 구별 데이터를 가지고 지도에 통계지도를 만들어 보도록 하겠습니다. 우선 통계 데이터를 표시할 지도가 필요한데, 통계청이나 공공데이터 포털에서 행정경계 자료를 다운로드 받을 수 있습니다. 이 자료를 적당히 가공(QGIS 또는 Map Shaper)하면 서울시 경계 데이터를 만들 수 있습니다. 만들기 귀찮으신 분은 아래 첨부자료를 참고해 보시기 바랍니다. 이번 글에서는 통계 데이터용 서울시 경계를 지도에 로딩하는 것까지 설명드리겠습니다. 입니다. var hanRiverPos = [37.5118, 126.9745]; var map = L.map('map').setView(hanRiverPos, 1..

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

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

이번 글에서는 지도에서 내 위치를 표시하는 기능을 만들어 보겠습니다. 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..