리플렛을 이용한 인터랙티브 지도

Leaflet.js은 모바일 친화적인 대화형 지도를 위한 오픈 소스 JavaScript 라이브러리입니다. 가볍고 단순하며 유연하며 아마도 현재 가장 인기 있는 오픈 소스 매핑 라이브러리일 것입니다.

시작하기

안정적인 최신 전단지 릴리스는 여러 CDN에서 사용할 수 있습니다. 바로 사용하려면 head 태그 안에 넣으십시오.

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
  integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
  integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
  crossorigin=""></script>

지도를 유지하려면 컨테이너 요소를 만들고 해당 크기를 정의해야 합니다.

 <div id="my-map"></div>

#my-map {
    height: 500px;
}

이제 맵을 초기화하고 몇 가지 작업을 수행할 준비가 되었습니다.

지도 설정

먼저 L.map() 를 사용하여 지도 객체를 초기화합니다. 컨테이너 요소의 DOM ID 및 선택적으로 Map options가 있는 객체 리터럴이 지정된 지도 객체를 인스턴스화합니다.

L.map(<String> id, <Map options> options?)

내부Map options를 전달할 L.map() 객체를 만들고 지도 객체를 초기화해 보겠습니다.

let mapOptions = {
    center: [19.076090, 72.877426],
    zoom: 12
};

let map = L.map('my-map', mapOptions);

center - 지도를 중앙에 배치할 위치를 지정하는 LatLng 개체를 전달합니다. 여기에서는 인도 뭄바이의 좌표를 지정했습니다.

zoom - 지도의 초기 확대/축소 수준을 나타내는 정수를 전달합니다.

마지막으로 TileLayer 클래스를 인스턴스화하여 지도 타일의 기본 레이어를 생성해야 합니다. 인스턴스화하는 동안 서비스 공급자에게 원하는 타일 레이어(지도)를 요청하는 URL 템플릿을 전달해야 합니다. 여기서는 openstreetmap.org 을 사용했습니다.

let layer = new L.TileLayer(
  "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  {
    attribution:
      'Tiles by <a href="http://openstreetmap.org">openstreetmap.org</a>',
  }
);
map.addLayer(layer);

{z}/{x}/{y}는 Leaflet이 올바른 zoom , x-coordinate 및 y-coordinate 에서 타일을 찾는 데 사용하는 템플릿입니다.

Note: Attribution is obligatory as per the copyright notice.

그래서, 이것은 우리 지도가 현재 어떻게 보이는지입니다:



Leaflet은 공급자에 구애받지 않는다는 점은 주목할 가치가 있습니다. 즉, 타일에 대한 특정 공급자 선택을 강요하지 않습니다. 다른 서비스 공급자here를 탐색할 수 있습니다.

마커, 원 및 다각형

타일 ​​레이어 외에도 markers , polylines , polygons , circles 및 popups 를 포함하여 지도에 다른 항목을 쉽게 추가할 수 있습니다. 마커를 추가해 보겠습니다.

let marker = L.marker([19.0931, 72.8568]).addTo(map);

이제 마커에 대한 팝업을 추가해 보겠습니다.

marker.bindPopup("<b>Hello world!</b><br>I'm at Mumbai Airport.").openPopup();

원을 추가하는 것은 동일하지만(두 번째 인수로 미터 단위의 반지름을 지정하는 것을 제외하고) 개체를 만들 때 옵션을 마지막 인수로 전달하여 모양을 제어할 수 있습니다.

let circle = L.circle([19.0596, 72.8295], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 2000
}).addTo(map);

여기 있는 동안 다각형도 추가해 보겠습니다.

let polygon = L.polygon([
    [19.0330, 73.0297],
    [19.0745, 72.9978],
    [19.0361, 72.9486]
]).addTo(map);

이벤트 처리

Leaflet에서 어떤 일이 발생할 때마다. 사용자가 맵 내부를 클릭하면 해당 객체가 함수로 구독할 수 있는 이벤트를 보냅니다. 사용자 상호 작용에 반응할 수 있습니다. 사용자가 지도 안의 아무 곳이나 탭하면 마커가 생성되는 기능을 구현하여 이를 시연해 보겠습니다.

map.on("click", function(e){
    new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
 });

결론

지금은 그대로 두겠습니다. 우리는 이미 아무 것도 없는 상태에서 약간 멋진 지도로 전환했지만 Leaflet으로 할 수 있는 일이 훨씬 더 많습니다. 가능성을 알아보려면 documentation을 읽어보십시오.