[LeafletJs] Leaflet Draw Circle 총반경 구하기

이번 포스팅에서는 leaflet으로 circle을 그리고 총반경을 구하는것을 해보겠습니다. - 네이버 지도에 보면 원 총반경을 구하는 기능이 있는데 해당 기능을 구현해보겠습니다. 전체코드 LeafletJs Tutorial polygon 면적 측정 - updateTooltip에서 circle일경우 반경을 구해서 1의자리까지 반올림후 표현을 하였습니다.

• format_list_bulleted gis/LeafletJs
• · 2023. 1. 5.
• textsms

[LeafletJs] Leaflet Draw Polygon 면적 재기

이번장에서는 Leaflet Draw 기능중에 polygon으로 그렸을때 해당 총 면적을 tooltip으로 표현하는것을 해보겠습니다. - 네이버 지도에서 면적기능을 클릭하면 polygon을 그리면 총면적을 볼수 있습니다. 해당 기능을 구현해보겠습니다. LeafletJs Tutorial polygon 면적 측정 - polygon으로 그릴때 해당 area를 소수점 첫째자리로 반올림하고 제곱미터를 붙였습니다.

• format_list_bulleted gis/LeafletJs
• · 2023. 1. 5.
• textsms

[LeafletJs] Leaflet Draw Poly line 거리 측정

이번장에서는 Leaflet Draw 기능중에 Poly Line으로 지도에 표시할때마다 거리와 총거리를 표현해보겠습니다. - 네이버 지도에 보면 거리측정을 하면 마우스로 찍은 점마다 미터를 표시를 하는데 해당 기능을 구현해보겠습니다. 전체소스 LeafletJs Tutorial leaflet draw 예제 - 저는 왼쪽마우스를 클릭할때마다 마커를 찍고 해당 마커 좌표를 배열에 넣고, 마커가 2개이상일경우에 가장 마지막으로 찍은 마커와 그 직전에 찍은 마커의 좌표사이의 거리를 계산해서 popup으로 표시를 하였습니다. 그리고 draw:created를 보면 그림그리기 완료시 레이어에 찍힌 마커들 사이의 거리를 합쳐서 총거리를 구해서 팝업으로 표현하였습니다.

• format_list_bulleted gis/LeafletJs
• · 2023. 1. 5.
• textsms

[LeafletJs] Leaflet draw 사용

이번 포스팅에서는 Leaflet Draw 라이브러리를 사용해보겠습니다. https://leaflet.github.io/Leaflet.draw/docs/examples/full.html Leaflet.draw vector editing handlers leaflet.github.io 해당 사이트에 있는 리소스 파일이랑 소스를 설정합니다. 소스코드 LeafletJs Tutorial leaflet draw 예제

• format_list_bulleted gis/LeafletJs
• · 2023. 1. 5.
• textsms

[leafletjs] 배경지도 레이어 변경

이번 포스팅에서는 왼쪽 상단에 팝업하나에 레이어를 선택함에 따라 해당 레이어로 변경이 되는것을 해보겠습니다. (vworld를 클릭하면 vworld wmts, osm을 클릭하면 openstree map, google을 클릭하면 google map) LeafletJs Tutorial - 레이어변경

• format_list_bulleted gis/LeafletJs
• · 2023. 1. 5.
• textsms

[leafletjs] wmts 배경지도에 오른쪽 마우스 클릭시 출발 도착 marker 찍기

저번에 wmts로 배경지도를 개발하였다면, 이번장에서는 해당 기능을 개발하려고 합니다. 1. 지도에 오른쪽 마우스 클릭시 출발, 도착 팝업 표출 2. 출발, 도착 버튼 누를경우 마커가 지도에 찍힘 3. 찍힌 마커에 마우스 오버시 텍스트 문구 표현 4. 찍힌 마커 드래그시 이동이 가능하게함 5. 마커 클릭시 클릭한 마커 삭제 소스코드 LeafletJs Tutorial - 출발 도착 버튼 클릭시 마커찍기 - maker 이미지는 해당 사이트에서 찾아서 넣었습니다. icon 사이트 https://www.iconfinder.com/ 7,125,000+ free and premium vector icons, illustrations and 3D illustrations Iconfinder is the world's..

• format_list_bulleted gis/LeafletJs
• · 2023. 1. 3.
• textsms