leaflet전단지 시작하기


비고

전단지 로고

전단지 는 대화식지도를 만들기위한 오픈 소스 자바 스크립트 라이브러리입니다.

버전

번역 출시일
1.0.3 2017-01-23
1.0.2 2016-11-21
1.0.1 2016-09-30
1.0 2016-09-27
0.7 2013-11-18
0.6 2013-06-26
0.5 2013-01-17
0.4 2012-07-30
0.3 2012-02-13
0.2 2011-06-17
0.1 2011-05-16

HTML과 JavaScript로 Leaflet.js 구현하기

전단지를 사용하려면 페이지에 스타일 시트와 자바 스크립트 파일을로드하십시오.

<link rel="stylesheet" href="/css/leaflet.css" />
<script src="/js/leaflet.js"></script>
 

이러한 리소스는 Leaflet의 홈페이지 또는 Leaflet Github 저장소 와 같은 다양한 위치에서 다운로드 할 수 있으며 직접 CDN을 사용할 수도 있습니다.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" ></script>
 

지도에 컨테이너가 필요합니다. 개발자는 id에 "map"이라는 div 를 사용하는 것이 일반적입니다. 지도 div 에 높이를 지정해야합니다. 그렇지 않으면지도가 표시되지 않을 수 있습니다.

<div id="map" style="height: 200px;"></div>
 

맵을 초기화하려면 Leaflet.map(mapContainerId) 메소드를 사용하여 맵 오브젝트를 작성하십시오. 아래 예제에서 기본 확대 / 축소 수준이 13 인 위도와 경도가 기본값으로 설정됩니다.

var map = L.map('map').setView([42.35, -71.08], 13);
 

이렇게하면 빈지도가 만들어 지므로 기본지도로 사용할 타일 레이어를 제공해야합니다. tilelayer는지도 이미지를 타일로 제공하는 서비스입니다. x, y 및 z 매개 변수로 특정 순서로 액세스되는 작은 이미지입니다 (아래 참조).

타일 ​​레이어 URL은 다음과 같이 표시 될 수 있습니다. {s} , {z} , {x}{y} 는 작업 중 리플릿 아이콘이 자동으로 변경되는 자리 표시 자입니다.

"http://{s}.domain.com/foo/{z}/{x}/{y}.png"
 

타일 ​​정보 레이어와 속성 정보 및 가능한 최대 줌 레벨을 추가하고지도에 추가 할 수 있습니다.

L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
  attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
  maxZoom: 17,
  minZoom: 5
}).addTo(map);
 

참고 : 지도 초기화 및 타일 레이어로드는 leaflet.js 도 컨테이너 div 요소가 포함 된 후에 수행해야합니다.

전단지 퀵 스타트

<!DOCTYPE html>
<html>

  <head>
    <title>My Leaflet Map</title>
    <link rel="stylesheet" href="//unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <style type="text/css">
      #map { 
        height: 500px; 
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script src="//unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>    
    <script>
      var map = L.map('map').setView([51.505, -0.09], 13);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);
      
      L.marker([51.5, -0.09]).addTo(map)
          .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
          .openPopup();
    </script>
  </body>

</html>