LeafletJS - Capas vectoriales

En el capítulo anterior, aprendimos cómo usar marcadores en Leaflet. Junto con los marcadores, también podemos agregar varias formas como círculos, polígonos, rectángulos, polilíneas, etc. En este capítulo, discutiremos cómo usar las formas proporcionadas por Google Maps.

Polilínea

Para dibujar la superposición de polilíneas en un mapa utilizando la biblioteca de JavaScript de Leaflet, siga los pasos que se indican a continuación:

Step 1 - Crea un Mapobjeto pasando un elemento < div > (String u objeto) y opciones de mapa (opcional).

Step 2 - Crea un Layer objeto pasando la URL del mosaico deseado.

Step 3 - Agregue el objeto de capa al mapa usando el addLayer() método del Map clase.

Step 4 - Crea un latlangs variable para mantener los puntos para dibujar la polilínea, como se muestra a continuación.

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

Step 5 - Cree una polilínea usando el L.polyline(). Para dibujar la polilínea, pase las ubicaciones como variable y una opción para especificar el color de las líneas.

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

Step 6 - Agregue la polilínea al mapa usando el addTo() método del Polyline clase.

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

Ejemplo

A continuación se muestra el código que dibuja una polilínea, que cubre las ciudades de Hyderabad, Vijayawada, Rajamahendrawaram y Vishakhapatnam (India).

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>

Genera la siguiente salida

Polígono

Para dibujar una superposición de polígonos en un mapa utilizando la biblioteca de JavaScript de Leaflet, siga los pasos que se indican a continuación:

Step 1 - Crea un Mapobjeto pasando un elemento < div > (String u objeto) y opciones de mapa (opcional).

Step 2 - Crea un Layer objeto pasando la URL del mosaico deseado.

Step 3 - Agregue el objeto de capa al mapa usando el addLayer() método del Map clase.

Step 4 - Crea un latlangs variable para contener los puntos para dibujar el polígono.

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

Step 5 - Crea un polígono usando el L.polygon(). Pase las ubicaciones / puntos como variable para dibujar el polígono y una opción para especificar el color del polígono.

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

Step 6 - Agregue el polígono al mapa usando el addTo() método del Polygon clase.

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

Ejemplo

A continuación se muestra el código para dibujar un polígono que cubra las ciudades de Hyderabad, Vijayawada y Vishakhapatnam (India).

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

Genera la siguiente salida:

Rectángulo

Para dibujar una superposición de rectángulo en un mapa utilizando la biblioteca de JavaScript de folletos, siga los pasos que se indican a continuación

Step 1 - Crea un Mapobjeto pasando un elemento < div > (String u objeto) y opciones de mapa (opcional).

Step 2 - Crea un Layer objeto pasando la URL del mosaico deseado.

Step 3 - Agregue el objeto de capa al mapa usando el addLayer() método del Map clase.

Step 4 - Cree una variable latlangs para contener los puntos para dibujar un rectángulo en el mapa.

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

Step 5 - Crea un rectángulo usando el L.rectangle()función. Pase las ubicaciones / puntos como una variable para dibujar un rectángulo yrectangleOptions para especificar el color y el peso del rectángulo.

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

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

Step 6 - Agregue el rectángulo al mapa usando el addTo() método del Polygon clase.

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

Ejemplo

A continuación se muestra el código para dibujar un rectángulo en el mapa utilizando la biblioteca de JavaScript de Leaflet.

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

Genera la siguiente salida:

Circulo

Para dibujar una superposición circular en un mapa utilizando la biblioteca de JavaScript de Leaflet, siga los pasos que se indican a continuación.

Step 1 - Crea un Mapobjeto pasando un elemento < div > (String u objeto) y opciones de mapa (opcional).

Step 2 - Crea un Layer objeto pasando la URL del mosaico deseado.

Step 3 - Agregue el objeto de capa al mapa usando el addLayer() método del Map clase.

Step 4 - Cree una variable latlangs para mantener el centro del círculo como se muestra a continuación.

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

Step 5 - Cree una variable circleOptions para especificar valores para las opciones color, fillColor y fillOpacity como se muestra a continuación.

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

Step 6 - Crea un círculo usando L.circle(). Pase el centro del círculo, el radio y las opciones de círculo a esta función.

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

Step 7 - Agregue el círculo creado anteriormente al mapa usando el addTo() método del Polyline clase.

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

Ejemplo

A continuación se muestra el código para dibujar un círculo con las coordenadas de la ciudad de Hyderabad como su radio.

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

Genera la siguiente salida:

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