코딩 강좌/웹 지도 만들기19 지도 위에 경로를 그리고 회전시키는 웹 앱 만들기 이번 포스팅에서는 지도 위에 경로를 그리는 간단한 웹 애플리케이션을 만들어보겠습니다. 이 프로젝트에서는 지도를 설정하고, 경로를 그리고, 슬라이더를 통해 경로를 회전시키는 기능을 구현할 것입니다. 자, 시작해볼까요? 1. 지도 설정하기 먼저, 지도를 화면에 띄우는 방법을 알아보겠습니다. 우리는 Leaflet이라는 라이브러리를 사용할 것입니다. 아래 코드는 지도를 생성하고, 초기 위치를 설정합니다. var map = L.map("map").setView([37.393667, 126.95737], 15);여기서 [37.393667, 126.95737]는 서울 근처의 특정 좌표입니다. 숫자 15는 확대 수준을 나타냅니다. 숫자가 클수록 더 자세히 볼 수 있습니다. 2. 지도 배경 설정 다음으로, 지도의 배경을.. 2024. 11. 5. 다각형 외부의 점에서 가장 가까운 점 다각형 내 위치 찾기 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'...)// 다각형 생성:// 호주 내부에 직사각형 모.. 2024. 11. 4. 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. leaflet - #9 통계지도 만들기 1편 통계지도 형태 중 하나인 단계구분도(등치맵, choropleth Map)를 이번 예제에서 만들어 보겠습니다. 서울시 구별 데이터를 가지고 지도에 통계지도를 만들어 보도록 하겠습니다. 우선 통계 데이터를 표시할 지도가 필요한데, 통계청이나 공공데이터 포털에서 행정경계 자료를 다운로드 받을 수 있습니다. 이 자료를 적당히 가공(QGIS 또는 Map Shaper)하면 서울시 경계 데이터를 만들 수 있습니다. 만들기 귀찮으신 분은 아래 첨부자료를 참고해 보시기 바랍니다. 이번 글에서는 통계 데이터용 서울시 경계를 지도에 로딩하는 것까지 설명드리겠습니다. 입니다. var hanRiverPos = [37.5118, 126.9745]; var map = L.map('map').setView(hanRiverPos, 1.. 2022. 2. 1. leaflet - #8 거리와 면적 측정하기 2편 지난 글에서 소개해 드린 거리와 면적 측정 기능에 평을 추가하는 방법을 알려드리겠습니다. 어느 때부터인가 평을 공식적으로 쓰지 못하게(?) 되어서 네이버나 카카오 맵에서 평을 확인하려면 번거로운데 여전히 평을 많이 사용하는 환경에서 굳이 기능을 숨겨야 하는지 잘 모르겠습니다. 아래처럼 옵션을 주시면 기존 제곱미터(평방미터) 옆에 평으로 환산된 면적이 표시됩니다. See the Pen leaflet tutorial #8 by yogin (@yogin) on CodePen. 주요 코드를 설명 드리면 var options = { primaryLengthUnit: 'meters', secondaryLengthUnit: 'kilometers', primaryAreaUnit: 'sqmeters', secondary.. 2022. 1. 29. 이전 1 2 3 4 다음
