LeafletJS - Warstwy wektorowe

W poprzednim rozdziale dowiedzieliśmy się, jak używać markerów w ulotce. Oprócz znaczników możemy również dodawać różne kształty, takie jak koła, wielokąty, prostokąty, polilinie itp. W tym rozdziale omówimy, jak korzystać z kształtów udostępnianych przez Google Maps.

Polilinia

Aby narysować nakładkę polilinii na mapie za pomocą biblioteki Leaflet JavaScript, wykonaj kroki podane poniżej -

Step 1 - Utwórz plik Mapobiekt, przekazując element < div > (łańcuch lub obiekt) i opcje mapy (opcjonalnie).

Step 2 - Utwórz plik Layer obiekt, przekazując adres URL żądanej płytki.

Step 3 - Dodaj obiekt warstwy do mapy za pomocą addLayer() metoda Map klasa.

Step 4 - Utwórz plik latlangs zmienna do przechowywania punktów do rysowania polilinii, jak pokazano poniżej.

// Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.000538, 81.804034],
   [17.686816, 83.218482]
];

Step 5 - Utwórz polilinię za pomocą L.polyline(). Aby narysować polilinię, podaj lokalizacje jako zmienne i opcję określenia koloru linii.

// Creating a poly line
var polyline = L.polyline(latlngs, {color: 'red'});

Step 6 - Dodaj polilinię do mapy za pomocą addTo() metoda Polyline klasa.

// Adding to poly line to map
polyline.addTo(map);

Przykład

Poniżej znajduje się kod, który rysuje polilinię, obejmującą miasta Hajdarabad, Widźajawada, Rajamahendrawaram i Vishakhapatnam (Indie).

DOCTYPE html>
<html>
   <head>
      <title>Leaflet Poly lines</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 latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.000538, 81.804034],
            [17.686816, 83.218482]
         ];
         // Creating a poly line
         var polyline = L.polyline(latlngs, {color: 'red'});
         
         // Adding to poly line to map
         polyline.addTo(map);
      </script>
   </body>
   
</html>

Generuje następujące dane wyjściowe

Wielokąt

Aby narysować nakładkę wielokąta na mapie za pomocą biblioteki Leaflet JavaScript, wykonaj czynności podane poniżej -

Step 1 - Utwórz plik Mapobiekt, przekazując element < div > (łańcuch lub obiekt) i opcje mapy (opcjonalnie).

Step 2 - Utwórz plik Layer obiekt, przekazując adres URL żądanej płytki.

Step 3 - Dodaj obiekt warstwy do mapy za pomocą addLayer() metoda Map klasa.

Step 4 - Utwórz plik latlangs zmienna do przechowywania punktów do rysowania wielokąta.

// Creating latlng object
var latlngs = [
   [17.385044, 78.486671],
   [16.506174, 80.648015],
   [17.686816, 83.218482]
];

Step 5 - Utwórz wielokąt za pomocą L.polygon(). Przekaż lokalizacje / punkty jako zmienne, aby narysować wielokąt oraz opcję określania koloru wielokąta.

// Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});

Step 6 - Dodaj wielokąt do mapy za pomocą addTo() metoda Polygon klasa.

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

Przykład

Poniżej znajduje się kod służący do narysowania wielokąta obejmującego miasta Hajdarabad, Widźajawada i Vishakhapatnam (Indie).

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet 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 latlngs = [
            [17.385044, 78.486671],
            [16.506174, 80.648015],
            [17.686816, 83.218482]
         ];
         // Creating a polygon
         var polygon = L.polygon(latlngs, {color: 'red'});
         
         // Adding to polygon to map
         polygon.addTo(map);
      </script>
   </body>
   
</html>

Generuje następujące dane wyjściowe -

Prostokąt

Aby narysować nakładkę Rectangle na mapie przy użyciu biblioteki Leaflet JavaScript, wykonaj czynności podane poniżej

Step 1 - Utwórz plik Mapobiekt, przekazując element < div > (łańcuch lub obiekt) i opcje mapy (opcjonalnie).

Step 2 - Utwórz plik Layer obiekt, przekazując adres URL żądanej płytki.

Step 3 - Dodaj obiekt warstwy do mapy za pomocą addLayer() metoda Map klasa.

Step 4 - Utwórz zmienną latlangs do przechowywania punktów i rysowania prostokąta na mapie.

// Creating latlng object
var latlngs = [
   [17.342761, 78.552432],
   [16.396553, 80.727725]
];

Step 5 - Utwórz prostokąt za pomocą L.rectangle()funkcjonować. Przekaż lokalizacje / punkty jako zmienne, aby narysować prostokąt irectangleOptions aby określić kolor i wagę prostokąta.

// Creating rectOptions
var rectOptions = {color: 'Red', weight: 1}

// Creating a rectangle
var rectangle = L.rectangle(latlngs, rectOptions);

Step 6 - Dodaj prostokąt do mapy za pomocą addTo() metoda Polygon klasa.

// Adding to rectangle to map
rectangle.addTo(map);

Przykład

Poniżej znajduje się kod do rysowania prostokąta na mapie przy użyciu biblioteki Leaflet JavaScript.

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Rectangle</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
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer); // Adding layer to the map
         
         // Creating latlng object
         var latlngs = [
            [17.342761, 78.552432],
            [16.396553, 80.727725]
         ];
         var rectOptions = {color: 'Red', weight: 1}   // Creating rectOptions
        
         // Creating a rectangle
         var rectangle = L.rectangle(latlngs, rectOptions);
         rectangle.addTo(map);   // Adding to rectangle to map
      </script>
   </body>
   
</html>

Generuje następujące dane wyjściowe -

okrąg

Aby narysować nakładkę koła na mapie za pomocą biblioteki Leaflet JavaScript, wykonaj poniższe czynności.

Step 1 - Utwórz plik Mapobiekt, przekazując element < div > (łańcuch lub obiekt) i opcje mapy (opcjonalnie).

Step 2 - Utwórz plik Layer obiekt, przekazując adres URL żądanej płytki.

Step 3 - Dodaj obiekt warstwy do mapy za pomocą addLayer() metoda Map klasa.

Step 4 - Utwórz zmienną latlangs, która będzie utrzymywać środek okręgu, jak pokazano poniżej.

// Center of the circle
var circleCenter = [17.385044, 78.486671];

Step 5 - Utwórz zmienną circleOptions, aby określić wartości opcji color, fillColor i fillOpacity, jak pokazano poniżej.

// Circle options
var circleOptions = {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0
}

Step 6 - Utwórz krąg za pomocą L.circle(). Przekaż środek okręgu, promień i opcje okręgu do tej funkcji.

// Creating a circle
var circle = L.circle(circleCenter, 50000, circleOptions);

Step 7 - Dodaj powyższy okrąg do mapy za pomocą addTo() metoda Polyline klasa.

// Adding circle to the map
circle.addTo(map);

Przykład

Poniżej znajduje się kod do narysowania okręgu ze współrzędnymi miasta Hyderabad jako jego promieniem.

<!DOCTYPE html>
<html>
   <head>
      <title>Leaflet Circle</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: 7
         }
         var map = new L.map('map', mapOptions); // Creating a map object
         
         // Creating a Layer object
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);        // Adding layer to the map
         var circleCenter = [17.385044, 78.486671];     // Center of the circle
         
         // Circle options
         var circleOptions = {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0
         }
         // Creating a circle
         var circle = L.circle(circleCenter, 50000, circleOptions);
         circle.addTo(map);     // Adding circle to the map
      </script>
   </body>
   
</html>>

Generuje następujące dane wyjściowe -

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved