LeafletJS-시작하기

Leaflet.js는 무엇입니까

Leaflet.js는 간단한 대화 형 경량 웹 맵을 배포 할 수있는 오픈 소스 라이브러리입니다.

  • Leaflet JavaScript 라이브러리를 사용하면 타일 레이어, WMS, 마커, 팝업, 벡터 레이어 (폴리 라인, 다각형, 원 등), 이미지 오버레이 및 GeoJSON과 같은 레이어를 사용할 수 있습니다.

  • 지도 드래그, 확대 / 축소 (더블 클릭 또는 휠 스크롤), 키보드 사용, 이벤트 처리 사용 및 마커 드래그를 통해 Leaflet지도와 상호 작용할 수 있습니다.

  • Leaflet은 데스크톱에서 Chrome, Firefox, Safari 5+, Opera 12+, IE 7–11과 같은 브라우저와 모바일 용 Safari, Android, Chrome, Firefox와 같은 브라우저를 지원합니다.

웹 페이지에지도를로드하는 단계

웹 페이지에지도를로드하려면 아래 단계를 따르세요.

1 단계 : HTML 페이지 만들기

다음을 사용하여 기본 HTML 페이지 만들기 headbody 아래에 표시된 태그-

<!DOCTYPE html>
<html>
   <head>
   </head>
   
   <body>
      ...........
   </body>
</html>

2 단계 : 전단지 CSS 스크립트로드

예제에 Leaflet CSS 스크립트 포함-

<head>
   <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>

3 단계 : 전단지 스크립트로드

스크립트 태그를 사용하여 Leaflet API를로드하거나 포함-

<head>
   <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>

4 단계 : 컨테이너 생성

지도를 유지하려면 컨테이너 요소를 만들어야합니다. 일반적으로 <div> 태그 (일반 컨테이너)가이 용도로 사용됩니다.

컨테이너 요소를 생성하고 치수를 정의합니다.

<div id = "sample" style = "width:900px; height:580px;"></div>

5 단계 :지도 옵션

Leaflet은 유형 제어 옵션, 상호 작용 옵션, 맵 상태 옵션, 애니메이션 옵션 등과 같은 여러 옵션을 제공합니다. 이러한 값을 설정하여 원하는대로 맵을 사용자 지정할 수 있습니다.

만들기 mapOptions 개체 (리터럴처럼 생성됨) 및 옵션 센터 및 확대 / 축소 값을 설정합니다.

  • center −이 옵션에 대한 값으로 LatLng지도 중앙에 배치 할 위치를 지정하는 객체입니다. (단지 위도 및 경도 값을 지정하십시오.[] 바지 멜빵)

  • zoom −이 옵션에 대한 값으로 아래와 같이지도의 확대 / 축소 수준을 나타내는 정수를 전달해야합니다.

var mapOptions = {
   center: [17.385044, 78.486671],
   zoom: 10
}

6 단계 :지도 개체 만들기

사용 Map전단지 API 클래스를 사용하면 페이지에지도를 만들 수 있습니다. 호출 된 개체를 인스턴스화하여지도 개체를 만들 수 있습니다.MapLeaflet API의. 이 클래스를 인스턴스화하는 동안 두 개의 매개 변수를 전달해야합니다.

  • 이 옵션의 매개 변수로 DOM ID 또는 <div> 요소의 인스턴스를 나타내는 String 변수를 전달해야합니다. 여기서 <div> 요소는지도를 담는 HTML 컨테이너입니다.

  • 지도 옵션이있는 선택적 개체 리터럴입니다.

이전 단계에서 만든 <div> 요소 및 mapOptions 개체의 ID를 전달하여 Map 개체를 만듭니다.

var map = new L.map('map', mapOptions);

7 단계 : 레이어 개체 만들기

다양한 유형의지도 (타일 레이어)를로드하고 표시 할 수 있습니다. TileLayer수업. 인스턴스화하는 동안 서비스 공급자로부터 원하는 타일 레이어 (맵)를 요청하는 URL 템플릿을 String 변수 형식으로 전달해야합니다.

아래와 같이 타일 레이어 개체를 만듭니다.

var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

여기서 우리는 openstreetmap.

8 단계 :지도에 레이어 추가

마지막으로 이전 단계에서 만든 레이어를 addlayer() 방법은 아래와 같습니다.

map.addLayer(layer);

다음 예는 open street map 확대 / 축소 값이 10 인 하이데라바드시

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet sample</title>
      <link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
      <script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
   </head>

   <body>
      <div id = "map" style = "width: 900px; height: 580px"></div>
      <script>
         // Creating map options
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         
         // Creating a map object
         var map = new L.map('map', mapOptions);
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         
         // Adding layer to the map
         map.addLayer(layer);
      </script>
   </body>
   
</html>

다음 출력을 생성합니다-

전단지지도 제공자

처럼 open street map, Open Topo, Thunder forest, Hydda, ESRI, Open weather, NASA GIBS 등과 같은 다양한 서비스 제공 업체의 레이어를로드 할 수 있습니다. 이렇게하려면 해당 URL을 전달하는 동안 TileLayer 목적

var layer = new L.TileLayer('URL of the required map');

다음 표에는 URL과 Openstreetmap에서 제공하는 레이어의 각 샘플 맵이 나열되어 있습니다.

지도 유형 URL 및 출력
Mapnik

http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

검정색과 흰색

http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png

DE

http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/ {y}.png

프랑스

http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png

뜨거운

http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png

BZH

http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png