leaflet14 TerriaJS로 만드는 강력한 웹 기반 공간정보 플랫폼 TerriaJS는 호주 정부의 Data61(CSIRO의 디지털 연구 부문)에서 개발한 오픈소스 공간정보 플랫폼입니다. 2D와 3D 지도 시각화를 위한 웹 기반 프레임워크로, 다양한 공간 데이터를 통합하고 시각화할 수 있습니다.TerriaJS의 주요 특징강력한 데이터 통합WMS, WFS, GeoJSON, KML 등 다양한 공간데이터 포맷 지원CSV 파일의 위치 정보 매핑 기능실시간 데이터 스트리밍 지원사용자 친화적 인터페이스직관적인 드래그 앤 드롭 방식의 데이터 추가레이어 투명도 조절 및 스타일링 기능시계열 데이터 애니메이션 지원고급 분석 도구공간 분석 및 차트 생성 기능3D 지형 가시화사용자 정의 분석 도구 추가 가능TerriaJS 기반 주요 프로젝트NationalMap (호주)호주 정부의 공식 공간정보.. 2025. 2. 4. 폴리곤 내부 일정간격 안에 또 다른 폴리곤 만들기 아래 화면은 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([...])호주 내부에 직사각형 모양의 다각형을 생성좌표점들을 .. 2024. 11. 13. Leaflet과 Turf.js를 활용한 다각형 버퍼 및 등간격 포인트 생성하기 이 코드는 지도상에 다각형을 그리고, 버퍼 영역을 생성한 후 그 경계선을 따라 일정한 간격으로 포인트를 배치하는 방법을 보여줍니다.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... 2024. 11. 7. Leaflet과 Turf.js를 활용한 폴리곤 차집합 구현하기 오늘은 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. 폴리곤 정의세 개의 폴리곤을 정.. 2024. 11. 6. leaflet - #11 통계지도 만들기 3편 이번 글에서는 정보와 범례 창을 추가해 보도록 하겠습니다. leaflet은 지도 창 위에 보여지는 요소 중 지도를 제외하고 모두 컨트롤로 취급합니다. 정보와 범례 모두 html 요소 중 div 태그(tag)를 사용한 요소입니다. 정보 컨트롤은 마우스 커서를 해당 구에 올려 놓으면 해당 구의 영역을 하일라이트로 표시하고 구 이름과 통계 지표값(예제에서는 value)을 표시합니다. 범례 컨트롤은 지도 화면 우측 하단에 지표 단계별 색상 목록을 표시합니다. 이전 예제와 다른 점은 우선 브이월드 제공 배경지도 중 회색 배경지도를 사용해 통계가 좀 더 확연히 드러나게 수정했습니다. 첨부한 소스 배경지도 설정 부분에 vworldLayer URL주소에 보시면 2d/Base -> 2d/gray로 바뀐 부분을 참고하시면.. 2022. 2. 2. leaflet - #10 통계지도 만들기 2편 지난 글에서는 통계용 서울시 행정경계 데이터를 로딩하는 방법을 설명했습니다. 이번에는 이 행정경계에 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: .. 2022. 2. 2. 이전 1 2 3 다음
