코딩 강좌/웹 지도 만들기19 leaflet - #7 거리와 면적 측정하기 1편 지도와 약도의 가장 큰 차이점은 측정의 정확성일 것입니다. 지도는 방위와 축적이 정확한 것이고 약도는 대략적인 방위와 대략적인 크기를 표시하는 것이죠. 네이버, 카카오 지도를 보면 거리와 면적을 측정할 수 있는 도구를 제공하고 있습니다. leaflet은 거리와 면적을 측정하는 컨트롤을 기본적으로 제공하고 있지는 않습니다. 하지만 다양한 (서드 파티) 플러그인을 확인 할 수 있습니다. 그중에서 거리와 면적을 동시에 측정할 수 있는 플러그인을 이용해 예제를 만들어 보겠습니다. GitHub - ljagis/leaflet-measure: Coordinate, linear, and area measure control for Leaflet maps Coordinate, linear, and area measure.. 2022. 1. 29. leaflet - #6 커스텀 마커 추가하기 leaflet에서 마커를 생성하면 파란색 핀모양의 마커가 지도에 표시됩니다. 이 파란색 마커도 괜찮지만 내가 원하는 이미지로 마커를 생성하고 싶으면 아래 방법으로 하시면 됩니다. 기본 파란색 마커를 자세히 보시면 파란색 핀모양의 이미지와 그림자가 함께 표시되는 것을 확인 할 수 있습니다. 물론 커스텀 이미지를 만들 때, 그림자 이미지 없이 마커 이미지만으로 만들어도 됩니다. 하지만 그림자가 없으면 입체감이 조금 떨어질 수 있습니다. 디테일을 중요시 하는 분이라면 그림자까지 만들어 주시면 됩니다. 올해가 임인년 호랑이 해를 맞이하여 예제 마커를 호랑이 아이콘으로 해보겠습니다. tiger와 tiger_shadow라는 2개의 png 파일을 만들어줬습니다. See the Pen leaflet tutorial #.. 2022. 1. 28. leaflet - #5 내 위치 찾기 이번 글에서는 지도에서 내 위치를 표시하는 기능을 만들어 보겠습니다. 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.. 2022. 1. 28. leaflet - #4 WFS 활용하기 이번 글에서는 WFS를 활용하는 방법에 대해서 설명드리겠습니다. WFS는 Web Feature Service의 약자로 웹에서 지도에 표현하는 객체의 정보를 서비스하는 표준 스펙입니다. 역시 OGC(개방형 공간정보 컨소시엄)에서 만든 것이고, WMS(Web Map Service)와 함께 ArcGIS Server, Geoserver, Mapserver 등 대부분의 웹 서버 엔진에 구현되어있습니다. WMS 서비스와 WFS 서비스의 가장 큰 차이점은 응답 형태에 있습니다. WMS는 웹 요청에 대한 응답으로 이미지(png, jpeg 등)를 제공하고, WFS는 응답으로 텍스트 파일(gml, kml, geojson 등)을 제공합니다. WFS에서 응답으로 보내주는 텍스트 파일에는 요청한 지도 위치에 있는 객체의 기하(.. 2022. 1. 28. leaflet - #3 WMS 레이어 추가하기 이번 글에서는 WMS 레이어를 지도에 추가해 보겠습니다. WMS는 Web Map Service의 약자로 웹에서 지도를 표시하는 표준 서비스 스펙입니다. OGC(개방형 공간정보 컨소시엄) 라는 기구에서 만든 기준입니다. WMS와 비슷한 서비스 표준으로는 WFS, WCS, WPS, WMTS 등이 있습니다. 이런 서비스들을 OWS(OGC Web Services)라고 부릅니다. 이런 표준이 있으면 좋은 점은 특정 제품이나 회사에 지도 프로그램을 쓰다가 다른 프로그램으로 교체가 가능하다는 것이겠죠. 물론 표준이란 것이 필수적인 항목에 대해서만 통일되서 구현되어 있고 벤더마다 특별한 기능들이 추가로 구현되어 있어, 1:1로 교체가 되지는 않습니다. 그래도 없는것보다 낫다는 것이겠죠. 이번에도 서두가 길었는데, 아래.. 2022. 1. 27. leaflet - #2 레이어 컨트롤 추가하기 지난 글에서 처음으로 leaflet을 이용한 지도를 만들어봤습니다. 이번에는 지난 번에 만들었던 지도에 여러 개의 레이어를 추가하고, 레이어를 보이거나 감추는 컨트롤을 추가해 보겠습니다. Leaflet은 맵에 추가된 레이어의 목록을 확인하고 on/off 할 수있는 컨트롤을 제공합니다. 아래 실행화면 오른편에 보이는 아이콘이 바로 레이어 컨트롤입니다. See the Pen leaflet tutorial #2 by yogin (@yogin) on CodePen. 자바스크립트 코드 부분을 설명 드리면 var hanRiverPos = [37.5118, 126.9745]; var map = L.map('map').setView(hanRiverPos, 12); var osmLayer = L.tileLayer('ht.. 2022. 1. 24. 이전 1 2 3 4 다음
