나만의 개발 기록

gis 검색 결과

해당 글 26건

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

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

gis/LeafletJs 2023. 1. 5. 17:02

[LeafletJs] Leaflet Draw Polygon 면적 재기

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

gis/LeafletJs 2023. 1. 5. 14:20

[LeafletJs] Leaflet Draw Poly line 거리 측정

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

gis/LeafletJs 2023. 1. 5. 14:06

[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 예제

gis/LeafletJs 2023. 1. 5. 13:54

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

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

gis/LeafletJs 2023. 1. 5. 13:17

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

gis/LeafletJs 2023. 1. 3. 17:04

[leafletjs] vworld wmts 배경지도 내위치 띄우기

이번 포스팅에서는 leaflet js를 설정하고 vworld에서 지원하는 wmts 배경지도 api를 사용해서 지도를 표현하는것을 개발해보겠습니다. css, js LeafletJs Tutorial - wmts 배경지도 (내위치) - 화면이 로딩될때 navigator.geolocation.getCurrentPosition 함수가 호출되어 현재 내 좌표값을 얻어 냅니다. - 이후 해당 좌표값 위치로 wmts를 사용해서 표현합니다. - apikey는 아래 포스팅에서 한것처럼 vworld api key를 받아서 넣으면 됩니다. vworld wmts api 사용방법 https://aamoos.tistory.com/515 [LeafletJs] vworld wmts 배경지도 띄우기, map, circle, polygo..

gis/LeafletJs 2023. 1. 3. 13:31

[LeafletJs] vworld 지도 검색 api를 활용하여 place marker 찍기

api 레퍼런스 https://www.vworld.kr/dev/v4dv_search2_s001.do 공간정보 오픈플랫폼 오픈API 검색 API 2.0 레퍼런스 검색 API 2.0 레퍼런스입니다. 검색 API 2.0 레퍼런스 검색 API 2.0 레퍼런스 검색 API 1.0 레퍼런스 Geocoder API 2.0 레퍼런스 Geocoder API 1.0 레퍼런스 범례이미지 API 2.0 레퍼런스 범례이 www.vworld.kr main-list.jsp 주소 검색 예제 조회하기 main-list-js.jsp MainController import java.io.UnsupportedEncodingException; import java.net.URLEncoder; import java.util.HashMap; i..

gis/LeafletJs 2022. 2. 23. 11:01

[Openlayers] 마우스로 도형 그리기

list.jsp Point LineString Polygon Circle None list-js.jsp //draw var source; var draw; function openlayersDraw(){ $("#type").change(function(){ map.removeInteraction(draw); addInteraction(); }) // Add over interaction that draw hull in a layer source = new ol.source.Vector({ wrapX: false }); var vector = new ol.layer.Vector({ title : 'vector', source: source, }); map.addLayer(vector); //vector l..

gis/Openlayers 2022. 2. 17. 15:42

[LeafletJs] 마우스로 도형 그리기

script list-js.jsp 오른쪽에 탭이 생겼고 각 도형을 지도에 그릴수 있는것을 확인할수 있음

gis/LeafletJs 2022. 2. 17. 15:39