Tờ rơiJS - Lớp Vector

Trong chương trước, chúng ta đã học cách sử dụng các điểm đánh dấu trong Tờ rơi. Cùng với các điểm đánh dấu, chúng ta cũng có thể thêm các hình dạng khác nhau như hình tròn, đa giác, hình chữ nhật, đa đường, v.v. Trong chương này, chúng ta sẽ thảo luận về cách sử dụng các hình dạng do Google Maps cung cấp.

Polyline

Để vẽ lớp phủ nhiều đường trên bản đồ bằng thư viện JavaScript Tờ rơi, hãy làm theo các bước dưới đây:

Step 1 - Tạo một Mapđối tượng bằng cách chuyển một phần tử < div > (Chuỗi hoặc đối tượng) và các tùy chọn bản đồ (tùy chọn).

Step 2 - Tạo một Layer đối tượng bằng cách chuyển URL của ô mong muốn.

Step 3 - Thêm đối tượng lớp vào bản đồ bằng cách sử dụng addLayer() phương pháp của Map lớp học.

Step 4 - Tạo một latlangs để giữ các điểm để vẽ polyline, như hình dưới đây.

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

Step 5 - Tạo polyline bằng cách sử dụng L.polyline(). Để vẽ polyline, hãy chuyển các vị trí dưới dạng biến và một tùy chọn để chỉ định màu của các đường.

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

Step 6 - Thêm polyline vào bản đồ bằng cách sử dụng addTo() phương pháp của Polyline lớp học.

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

Thí dụ

Sau đây là mã vẽ một đường đa giác, bao gồm các thành phố Hyderabad, Vijayawada, Rajamahendrawaram và, Vishakhapatnam (Ấn Độ).

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>

Nó tạo ra kết quả sau

Đa giác

Để vẽ một lớp phủ đa giác trên bản đồ bằng thư viện JavaScript của Tờ rơi, hãy làm theo các bước dưới đây:

Step 1 - Tạo một Mapđối tượng bằng cách chuyển một phần tử < div > (Chuỗi hoặc đối tượng) và các tùy chọn bản đồ (tùy chọn).

Step 2 - Tạo một Layer đối tượng bằng cách chuyển URL của ô mong muốn.

Step 3 - Thêm đối tượng lớp vào bản đồ bằng cách sử dụng addLayer() phương pháp của Map lớp học.

Step 4 - Tạo một latlangs biến giữ các điểm để vẽ đa giác.

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

Step 5 - Tạo một đa giác bằng cách sử dụng L.polygon(). Chuyển các vị trí / điểm làm biến để vẽ đa giác và tùy chọn để chỉ định màu của đa giác.

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

Step 6 - Thêm đa giác vào bản đồ bằng cách sử dụng addTo() phương pháp của Polygon lớp học.

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

Thí dụ

Sau đây là mã để vẽ một đa giác bao gồm các thành phố Hyderabad, Vijayawada và Vishakhapatnam (Ấn Độ).

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

Nó tạo ra kết quả sau:

Hình chữ nhật

Để vẽ lớp phủ Hình chữ nhật trên bản đồ bằng thư viện JavaScript Tờ rơi, hãy làm theo các bước được cung cấp bên dưới

Step 1 - Tạo một Mapđối tượng bằng cách chuyển một phần tử < div > (Chuỗi hoặc đối tượng) và các tùy chọn bản đồ (tùy chọn).

Step 2 - Tạo một Layer đối tượng bằng cách chuyển URL của ô mong muốn.

Step 3 - Thêm đối tượng lớp vào bản đồ bằng cách sử dụng addLayer() phương pháp của Map lớp học.

Step 4 - Tạo một biến latlangs để giữ các điểm để vẽ hình chữ nhật trên bản đồ.

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

Step 5 - Tạo một hình chữ nhật bằng cách sử dụng L.rectangle()chức năng. Chuyển các vị trí / điểm dưới dạng một biến để vẽ một hình chữ nhật vàrectangleOptions để xác định màu sắc và trọng lượng của hình chữ nhật.

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

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

Step 6 - Thêm hình chữ nhật vào bản đồ bằng cách sử dụng addTo() phương pháp của Polygon lớp học.

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

Thí dụ

Sau đây là đoạn mã để vẽ một hình chữ nhật trên bản đồ bằng cách sử dụng thư viện JavaScript của 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>

Nó tạo ra kết quả sau:

Vòng tròn

Để vẽ một lớp phủ vòng tròn trên bản đồ bằng thư viện JavaScript Tờ rơi, hãy làm theo các bước dưới đây.

Step 1 - Tạo một Mapđối tượng bằng cách chuyển một phần tử < div > (Chuỗi hoặc đối tượng) và các tùy chọn bản đồ (tùy chọn).

Step 2 - Tạo một Layer đối tượng bằng cách chuyển URL của ô mong muốn.

Step 3 - Thêm đối tượng lớp vào bản đồ bằng cách sử dụng addLayer() phương pháp của Map lớp học.

Step 4 - Tạo một biến latlangs để giữ tâm của hình tròn như hình bên dưới.

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

Step 5 - Tạo một biến circleOptions để chỉ định các giá trị cho tùy chọn color, fillColor và, fillOpacity như hình dưới đây.

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

Step 6 - Tạo vòng kết nối bằng cách sử dụng L.circle(). Chuyển tâm của hình tròn, bán kính và các tùy chọn hình tròn cho chức năng này.

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

Step 7 - Thêm vòng tròn được tạo ở trên vào bản đồ bằng cách sử dụng addTo() phương pháp của Polyline lớp học.

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

Thí dụ

Sau đây là mã để vẽ một vòng tròn với tọa độ của thành phố Hyderabad là bán kính của nó.

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

Nó tạo ra kết quả sau:

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