[LeafletJs] 가이드 예제

[LeafletJs] 가이드 예제

728x90

반응형

- 이 단계별 가이드는 전단지 지도 설정, 마커, 폴리라인 및 팝업 작업, 이벤트 처리를 포함하여 전단지 기본 사항을 빠르게 시작할 수 있도록 도와줍니다.

- guide.html

Leaflet Quick Start Guide html,body { width:100%; height:100%; margin:0; padding:0; } #mapid { width:100%; height:100%; } /** * [지도 초기화(map) 및 설정(setView)] * 좌표: [51.505, -0.09] * 줌레벨: 13 * * [설명] * 1. (L.map)지도 인스턴스 생성 시 옵션없이 생성을 했으므로, 모든 마우스 및 터치 기능이 활성화 되며, * 확대/축소와 같은 컨트롤 속성을 가지고 있다. * * 2. 대부분의 Leaflet 메소드는 반환되는 명확한 값이 없으면 jQuery 체이닝과 같이 map 객체를 반환한다. * (따라서 setView 메소드 또한 map 객체 반환) */ var mymap = L.map('mapid').setView([51.505, -0.09], 13); /** * [생성된 맵에 타일 레이어 추가] (Mapbox Street 타일레이어) * * 일반적으로 타일 레이어를 만드려면 아래와 같은 항목을 셋팅해야 한다. * (타일 이미지에 대한 URL템플릿, 텍스트 속성, 레이어 최대줌레벨) * * 아래는 Mapbox Static Tiles API를 사용한다. * Mapbox 타일 사용 시 가입 후 엑세스토큰을 받아야 한다. * 해당 API는 256x256 대신에 512x512 타일을 반환하므로 zoomOffset 값을 -1로 지정했다. */ L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', maxZoom: 18, id: 'mapbox/streets-v11', tileSize: 512, zoomOffset: -1, accessToken: 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw' // mapbox 가입 후 발급되는 토큰 입력 }).addTo(mymap); /** * Leaflet은 공급자에 구애받지 않으며, 타일에 대해 특정 공급자를 선택하도록 강요하지 않는다. * 따라서 Naver, Kakao 맵과 같은 다른 공급자로 교체가 가능하다. * OpenSteetMap을 기반하는 모든것을 사용 시 저작권고지에 따라 저작자가 의무화 된다. */

- 마커 추가하기

var marker = L.marker([51.5, -0.09]).addTo(mymap);

- 해당 좌표값이 마커를 찍을수 있음

- 원추가하기

var circle = L.circle([51.508, -0.11], { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 500 }).addTo(mymap);

- 폴리곤 추가하기

var polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(mymap);

- 팝업작업

var marker = L.marker([51.5, -0.09]).addTo(mymap); var circle = L.circle([51.508, -0.11], { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 500 }).addTo(mymap); var polygon = L.polygon([ [51.509, -0.08], [51.503, -0.06], [51.51, -0.047] ]).addTo(mymap); marker.bindPopup("Hello world!I am a popup.").openPopup(); circle.bindPopup("I am a circle."); polygon.bindPopup("I am a polygon.");

- 원 클릭했을경우 뜨는 팝업

- 마커 클릭했을경우 뜨는 팝업

- 폴리곤 클릭했을경우 뜨는 팝업

- 레이어팝업

var popup = L.popup() .setLatLng([51.5, -0.09]) .setContent("I am a standalone popup.") .openOn(mymap);

- 클릭이벤트 (클릭시 좌표값 alert)

function onMapClick(e) { alert("You clicked the map at " + e.latlng); } mymap.on('click', onMapClick);

- 클릭이벤트 (클릭시 좌표값 팝업)

function onMapClick(e) { popup .setLatLng(e.latlng) .setContent("You clicked the map at " + e.latlng.toString()) .openOn(mymap); } mymap.on('click', onMapClick);

728x90

반응형

from http://aamoos.tistory.com/429 by ccl(A) rewrite - 2021-09-14 11:27:37