본문 바로가기

웹지도3

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

티스토리툴바