LeafletJS-다중 폴리 라인 및 폴리곤

이전 장에서 원, 다각형, 직사각형, 폴리 라인 등과 같은 다양한 모양을 추가하는 방법을 배웠습니다.이 장에서는 다중 다각형, 다중 직사각형 및 다중 선을 추가하는 방법에 대해 설명합니다.

다중 폴리 라인

Leaflet JavaScript 라이브러리를 사용하여지도에 다중 폴리 라인 오버레이를 그리려면 다음 단계를 따르십시오.

Step 1 − 만들기 Map< div > 요소 (문자열 또는 개체) 및지도 옵션 (선택 사항) 을 전달하여 개체.

Step 2 − 만들기 Layer 원하는 타일의 URL을 전달하여 개체.

Step 3 −지도에 레이어 개체를 추가하려면 addLayer() 의 방법 Map 수업.

Step 4 − 다중 폴리 라인을 그릴 포인트를 보유 할 latlangs 변수를 생성합니다.

// Creating latlng object
var latlang = [
   [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
   [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
];

Step 5 − 다음을 사용하여 다중 폴리 라인을 만듭니다. L.multiPolyline()함수. 위치를 변수로 전달하여 다중 폴리 라인을 그리고 옵션으로 선의 색상과 두께를 지정합니다.

// Creating multi polyline options
var multiPolyLineOptions = {color:'red'};

// Creating multi polylines
var multipolyline = L.multiPolyline(latlang , multiPolyLineOptions);

Step 6 −지도에 다중 폴리 라인을 추가하려면 addTo() 의 방법 Multipolyline 수업.

// Adding multi polyline to map
multipolyline.addTo(map);

다음은 Hyderabad, Vijayawada 및 Vishakhapatnam 도시를 덮는 다중 폴리 라인을 그리는 코드입니다. 그리고 Kurnool, Bengaluru 및 Chennai.

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Multi Polylines</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: [16.506174, 80.648015],
            zoom: 7
         }
         // 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);
         
         // Creating latlng object
         var latlang = [
            [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
            [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
         ];
         
         // Creating poly line options
         var multiPolyLineOptions = {color:'red'};
         
         // Creating multi poly-lines
         var multipolyline = L.multiPolyline(latlang , multiPolyLineOptions);
         
         // Adding multi poly-line to map
         multipolyline.addTo(map);
      </script>
   </body>
   
</html>

다음 출력을 생성합니다-

다중 다각형

Leaflet JavaScript 라이브러리를 사용하여지도에 다중 다각형 오버레이를 그리려면 다음 단계를 따르십시오.

Step 1 − 만들기 Map< div > 요소 (문자열 또는 개체) 및지도 옵션 (선택 사항) 을 전달하여 개체.

Step 2 − 만들기 Layer 원하는 타일의 URL을 전달하여 개체.

Step 3 −지도에 레이어 개체를 추가하려면 addLayer() 의 방법 Map 수업.

Step 4 − 다중 다각형을 그리기 위해 점을 유지하는 latlangs 변수를 만듭니다.

// Creating latlng object
var latlang = [
   [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
   [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
];

Step 5 − 다음을 사용하여 다중 다각형 만들기 L.multiPolygon()함수. 위치를 변수로 전달하여 다중 다각형을 그리고 선의 색상과 두께를 지정하는 옵션을 지정합니다.

// Creating multi polygon options
var multiPolygonOptions = {color:'red'};

// Creating multi polygon
var multipolygon = L.multiPolygon(latlang , multiPolygonOptions);

Step 6 −지도에 다중 다각형을 추가하려면 addTo() 의 방법 MultiPolygon 수업.

// Adding multi polygon to map
multipolygon.addTo(map);

다음은 Hyderabad, Vijayawada 및 Vishakhapatnam 도시를 터치하는 다중 다각형을 그리는 코드입니다. 그리고 Kurnool, Bengaluru 및 Chennai.

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Multi Polygons</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: [16.506174, 80.648015],
            zoom: 7
         }
         // 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);
         
         // Creating latlng object
         var latlang = [
            [[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
            [[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
         ];
         // Creating multi polygon options
         var multiPolygonOptions = {color:'red', weight:8};
         
         // Creating multi polygons
         var multipolygon = L.multiPolygon(latlang , multiPolygonOptions);
         
         // Adding multi polygon to map
         multipolygon.addTo(map);
      </script>
   </body>
   
</html>

다음 출력을 생성합니다-