LeafletJS - Camadas de vetor

No capítulo anterior, aprendemos como usar marcadores no Folheto. Junto com os marcadores, também podemos adicionar várias formas, como círculos, polígonos, retângulos, polilinhas, etc. Neste capítulo, discutiremos como usar as formas fornecidas pelo Google Maps.

Polilinha

Para desenhar sobreposição de polilinha em um mapa usando a biblioteca JavaScript Leaflet, siga as etapas abaixo -

Step 1 - Crie um Mapobjeto passando um elemento < div > (String ou objeto) e opções de mapa (opcional).

Step 2 - Crie um Layer objeto passando a URL do bloco desejado.

Step 3 - Adicione o objeto de camada ao mapa usando o addLayer() método do Map classe.

Step 4 - Crie um latlangs variável para conter os pontos para desenhar polilinha, como mostrado abaixo.

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

Step 5 - Crie uma polilinha usando o L.polyline(). Para desenhar a polilinha, passe os locais como variáveis ​​e uma opção para especificar a cor das linhas.

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

Step 6 - Adicione a polilinha ao mapa usando o addTo() método do Polyline classe.

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

Exemplo

A seguir está o código que desenha uma polilinha, cobrindo as cidades Hyderabad, Vijayawada, Rajamahendrawaram e Vishakhapatnam (Índia).

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>

Ele gera a seguinte saída

Polígono

Para desenhar uma sobreposição de polígono em um mapa usando a biblioteca JavaScript Leaflet, siga as etapas abaixo -

Step 1 - Crie um Mapobjeto passando um elemento < div > (String ou objeto) e opções de mapa (opcional).

Step 2 - Crie um Layer objeto passando a URL do bloco desejado.

Step 3 - Adicione o objeto de camada ao mapa usando o addLayer() método do Map classe.

Step 4 - Crie um latlangs variável para conter os pontos para desenhar o polígono.

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

Step 5 - Crie um polígono usando o L.polygon(). Passe as localizações / pontos como variáveis ​​para desenhar o polígono e uma opção para especificar a cor do polígono.

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

Step 6 - Adicione o polígono ao mapa usando o addTo() método do Polygon classe.

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

Exemplo

A seguir está o código para desenhar um polígono cobrindo as cidades Hyderabad, Vijayawada e Vishakhapatnam (Índia).

<!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>

Ele gera a seguinte saída -

Retângulo

Para desenhar uma sobreposição de retângulo em um mapa usando a biblioteca JavaScript Leaflet, siga as etapas abaixo

Step 1 - Crie um Mapobjeto passando um elemento < div > (String ou objeto) e opções de mapa (opcional).

Step 2 - Crie um Layer objeto passando a URL do bloco desejado.

Step 3 - Adicione o objeto de camada ao mapa usando o addLayer() método do Map classe.

Step 4 - Crie uma variável latlangs para manter os pontos para desenhar um retângulo no mapa.

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

Step 5 - Crie um retângulo usando o L.rectangle()função. Passe os locais / pontos como uma variável para desenhar um retângulo erectangleOptions para especificar a cor e o peso do retângulo.

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

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

Step 6 - Adicione o retângulo ao mapa usando o addTo() método do Polygon classe.

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

Exemplo

A seguir está o código para desenhar um retângulo no mapa usando a biblioteca 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>

Ele gera a seguinte saída -

Círculo

Para desenhar uma sobreposição de círculo em um mapa usando a biblioteca JavaScript Leaflet, siga as etapas abaixo.

Step 1 - Crie um Mapobjeto passando um elemento < div > (String ou objeto) e opções de mapa (opcional).

Step 2 - Crie um Layer objeto passando a URL do bloco desejado.

Step 3 - Adicione o objeto de camada ao mapa usando o addLayer() método do Map classe.

Step 4 - Crie uma variável latlangs para manter o centro do círculo como mostrado abaixo.

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

Step 5 - Crie uma variável circleOptions para especificar valores para as opções color, fillColor e fillOpacity como mostrado abaixo.

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

Step 6 - Crie um círculo usando L.circle(). Passe o centro do círculo, o raio e as opções do círculo para esta função.

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

Step 7 - Adicione o círculo criado acima ao mapa usando o addTo() método do Polyline classe.

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

Exemplo

A seguir está o código para desenhar um círculo com as coordenadas da cidade Hyderabad como seu raio.

<!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>>

Ele gera a seguinte saída -

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