코딩 강좌/웹 지도 만들기 19

Cesium에서 Gaussian Splatting 3D 모델 시각화하기

최근 3D 컴퓨터 비전 분야에서 주목받고 있는 Gaussian Splatting을 Cesium 기반의 3차원 지도에서 시각화하는 방법을 소개하겠습니다. Gaussian Splatting은 기존의 메시(mesh) 기반 3D 모델링과 달리, 3D 가우시안 분포를 활용하여 장면을 표현하는 새로운 접근 방식입니다.Gaussian Splatting이란?Gaussian Splatting은 3D 점군(point cloud)을 3차원 가우시안 분포로 표현하는 방법입니다. 각 가우시안은 다음과 같은 특성을 가집니다:위치 (x, y, z)크기와 방향을 정의하는 공분산 행렬색상 및 불투명도이 방식의 장점은 다음과 같습니다:렌더링 품질이 우수함실시간 렌더링이 가능함메모리 효율성이 높음뷰 디펜던트(view-dependent) ..

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

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

자체 호스팅 LLM을 이용한 자연어 검색 질의

최근 ChatGPT와 같은 대규모 언어 모델(LLM)의 발전으로 자연어 검색이 주목받고 있습니다. 이번 글에서는 오픈소스 LLM을 로컬 환경에서 실행하여 자연어 검색 시스템을 구축하는 방법을 알아보겠습니다.LM Studio 소개LM Studio는 로컬 환경에서 LLM을 쉽게 실행할 수 있게 해주는 데스크톱 애플리케이션입니다. 주요 특징은 다음과 같습니다:다양한 오픈소스 LLM 모델 지원간단한 GUI 인터페이스API 서버 모드 제공Windows/Mac/Linux 지원모델 다운로드 및 관리 기능사용할 LLM 모델 소개1. DeepSeek R1DeepSeek R1은 중국 DeepSeek사에서 개발한 오픈소스 LLM입니다.7B/12B 파라미터 모델 제공한국어 성능이 우수낮은 하드웨어 요구사항Apache 2.0 ..

폴리곤 내부 일정간격 안에 또 다른 폴리곤 만들기

아래 화면은 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([...])호주 내부에 직사각형 모양의 다각형을 생성좌표점들을 ..

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...

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. 폴리곤 정의세 개의 폴리곤을 정..

지도 위에 경로를 그리고 회전시키는 웹 앱 만들기

이번 포스팅에서는 지도 위에 경로를 그리는 간단한 웹 애플리케이션을 만들어보겠습니다. 이 프로젝트에서는 지도를 설정하고, 경로를 그리고, 슬라이더를 통해 경로를 회전시키는 기능을 구현할 것입니다. 자, 시작해볼까요? 1. 지도 설정하기 먼저, 지도를 화면에 띄우는 방법을 알아보겠습니다. 우리는 Leaflet이라는 라이브러리를 사용할 것입니다. 아래 코드는 지도를 생성하고, 초기 위치를 설정합니다. var map = L.map("map").setView([37.393667, 126.95737], 15);여기서 [37.393667, 126.95737]는 서울 근처의 특정 좌표입니다. 숫자 15는 확대 수준을 나타냅니다. 숫자가 클수록 더 자세히 볼 수 있습니다. 2. 지도 배경 설정 다음으로, 지도의 배경을..

다각형 외부의 점에서 가장 가까운 점 다각형 내 위치 찾기

turf.js와 leaflet을 이용해 지도상의 특정 위치에서 가장 가까운 다각형 위의 점을 찾는 코드입니다. 마지막에 첨부된 내용을 파일로 저장해 브라우저로 열어보시면 아래와 같은 실행결과를 확인할 수 있습니다.코드의 전체적인 흐름은 아래와 같습니다.// 지도 초기화:// 호주 중심부 근처(-26°, 128°)에 지도를 생성하고 줌 레벨을 5로 설정합니다.var map = L.map("map").setView([-26, 128], 5);// 타일 레이어 추가:// Carto의 밝은 스타일 지도 타일을 배경으로 추가합니다.L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'...)// 다각형 생성:// 호주 내부에 직사각형 모..

leaflet - #11 통계지도 만들기 3편

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

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: ..