LeafletJS - Vektör Katmanları

Önceki bölümde, Leaflet'te işaretleyicilerin nasıl kullanılacağını öğrendik. İşaretçilerin yanı sıra, daire, çokgen, dikdörtgen, sürekli çizgi gibi çeşitli şekiller de ekleyebiliriz. Bu bölümde, Google Haritalar tarafından sağlanan şekilleri nasıl kullanacağımızı tartışacağız.

Çoklu çizgi

Leaflet JavaScript kitaplığını kullanarak bir harita üzerinde çoklu çizgi kaplaması çizmek için, aşağıda verilen adımları izleyin -

Step 1 - Bir Mapbir < div > öğesi (Dize veya nesne) ve harita seçenekleri (isteğe bağlı) ileterek nesne.

Step 2 - Bir Layer istenen döşemenin URL'sini ileterek nesne.

Step 3 - Katman nesnesini haritaya ekleyin. addLayer() yöntemi Map sınıf.

Step 4 - Bir latlangs değişken, aşağıda gösterildiği gibi çoklu çizgi çizmek için noktaları tutmak için.

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

Step 5 - kullanarak bir çoklu çizgi oluşturun L.polyline(). Çoklu çizgiyi çizmek için konumları değişken olarak geçirin ve çizgilerin rengini belirleme seçeneğini seçin.

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

Step 6 - Çoklu çizgiyi kullanarak haritaya ekleyin. addTo() yöntemi Polyline sınıf.

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

Misal

Aşağıda, Haydarabad, Vijayawada, Rajamahendrawaram ve Vishakhapatnam (Hindistan) şehirlerini kapsayan bir çoklu çizgi çizen kod bulunmaktadır.

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>

Aşağıdaki çıktıyı üretir

Çokgen

Leaflet JavaScript kitaplığını kullanarak bir harita üzerine bir poligon yer paylaşımı çizmek için, aşağıda verilen adımları izleyin -

Step 1 - Bir Mapbir < div > öğesi (Dize veya nesne) ve harita seçenekleri (isteğe bağlı) ileterek nesne.

Step 2 - Bir Layer istenen döşemenin URL'sini ileterek nesne.

Step 3 - Katman nesnesini haritaya ekleyin. addLayer() yöntemi Map sınıf.

Step 4 - Bir latlangs çokgeni çizmek için noktaları tutan değişken.

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

Step 5 - kullanarak bir çokgen oluşturun L.polygon(). Çokgeni çizmek için konumları / noktaları değişken olarak ve çokgenin rengini belirtmek için bir seçenek olarak aktarın.

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

Step 6 - Şunu kullanarak çokgeni haritaya ekleyin addTo() yöntemi Polygon sınıf.

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

Misal

Aşağıda, Haydarabad, Vijayawada ve Vishakhapatnam (Hindistan) şehirlerini kapsayan bir çokgen çizmek için kod verilmiştir.

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

Aşağıdaki çıktıyı üretir -

Dikdörtgen

Leaflet JavaScript kitaplığını kullanarak bir haritada Dikdörtgen bindirme çizmek için, aşağıda verilen adımları izleyin

Step 1 - Bir Mapbir < div > öğesi (Dize veya nesne) ve harita seçenekleri (isteğe bağlı) ileterek nesne.

Step 2 - Bir Layer istenen döşemenin URL'sini ileterek nesne.

Step 3 - Katman nesnesini haritaya ekleyin. addLayer() yöntemi Map sınıf.

Step 4 - Harita üzerinde bir dikdörtgen çizmek için noktaları tutan bir latlangs değişkeni oluşturun.

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

Step 5 - kullanarak bir dikdörtgen oluşturun. L.rectangle()işlevi. Bir dikdörtgen çizmek için konumları / noktaları bir değişken olarak geçirin verectangleOptions dikdörtgenin rengini ve ağırlığını belirtmek için.

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

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

Step 6 - Dikdörtgeni haritaya ekleyin. addTo() yöntemi Polygon sınıf.

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

Misal

Aşağıda, Leaflet JavaScript kitaplığını kullanarak harita üzerinde bir dikdörtgen çizme kodu verilmiştir.

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

Aşağıdaki çıktıyı üretir -

Daire

Leaflet JavaScript kitaplığını kullanarak bir harita üzerine daire bindirmesi çizmek için aşağıda verilen adımları izleyin.

Step 1 - Bir Mapbir < div > öğesi (Dize veya nesne) ve harita seçenekleri (isteğe bağlı) ileterek nesne.

Step 2 - Bir Layer istenen döşemenin URL'sini ileterek nesne.

Step 3 - Katman nesnesini haritaya ekleyin. addLayer() yöntemi Map sınıf.

Step 4 - Aşağıda gösterildiği gibi dairenin merkezini tutmak için bir latlangs değişkeni oluşturun.

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

Step 5 - Renk, fillColor ve fillOpacity seçeneklerine aşağıda gösterildiği gibi değerler belirlemek için değişken bir circleOptions oluşturun.

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

Step 6 - kullanarak bir çevre oluşturun L.circle(). Dairenin merkezini, yarıçapı ve daire seçeneklerini bu işleve aktarın.

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

Step 7 - Yukarıda oluşturulan daireyi kullanarak haritaya ekleyin addTo() yöntemi Polyline sınıf.

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

Misal

Aşağıda, Haydarabad şehrinin koordinatlarını yarıçapı olarak gösteren bir daire çizmek için kod verilmiştir.

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

Aşağıdaki çıktıyı üretir -

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