Tờ rơiJS - Điều khiển

Tờ rơi cung cấp các điều khiển khác nhau như thu phóng, phân bổ, tỷ lệ, v.v., trong đó -

Zoom- Theo mặc định, điều khiển này tồn tại ở góc trên cùng bên trái của bản đồ. Nó có hai nút"+" và "–", bằng cách sử dụng mà bạn có thể phóng to hoặc thu nhỏ bản đồ. Bạn có thể xóa điều khiển thu phóng mặc định bằng cách đặtzoomControl tùy chọn của các tùy chọn bản đồ để false.
Attribution- Theo mặc định, điều khiển này tồn tại ở góc dưới cùng bên phải của bản đồ. Nó hiển thị dữ liệu phân bổ trong một hộp văn bản nhỏ. Theo mặc định, nó hiển thị văn bản. Bạn có thể xóa kiểm soát phân bổ mặc định bằng cách đặtattributionControl tùy chọn của các tùy chọn bản đồ để false.
Scale- Theo mặc định, điều khiển này tồn tại ở góc dưới cùng bên trái của bản đồ. Nó hiển thị trung tâm hiện tại của màn hình.

Trong chương này, chúng tôi sẽ giải thích cách bạn có thể tạo và thêm tất cả ba điều khiển này vào bản đồ của mình bằng cách sử dụng thư viện JavaScript của Tờ rơi.

Thu phóng

Để thêm điều khiển thu phóng của riêng bạn vào bản đồ bằng cách sử dụng thư viện JavaScript Tờ rơi, hãy làm theo các bước được đưa ra bên dưới:

Step 1 - Tạo một Map đối tượng bằng cách truyền một phần tử (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 biến zoomOptions và xác định các giá trị văn bản của riêng bạn cho các tùy chọn phóng to và thu nhỏ, thay vì các giá trị mặc định (+ và -).

Sau đó, tạo điều khiển thu phóng bằng cách chuyển biến zoomOptions đến L.control.zoom() như hình bên dưới.

// zoom control options
var zoomOptions = {
   zoomInText: '1',
   zoomOutText: '0',
};
// Creating zoom control
var zoom = L.control.zoom(zoomOptions);

Step 5 - Thêm đối tượng điều khiển thu phóng đã tạo ở bước trước vào bản đồ bằng cách sử dụng addTo() phương pháp.

// Adding zoom control to the map
zoom.addTo(map);

Thí dụ

Sau đây là mã để thêm điều khiển thu phóng của riêng bạn vào bản đồ của bạn, thay vì điều khiển mặc định. Tại đây, khi nhấn phím 1, bản đồ sẽ phóng to và khi nhấn phím 0, bản đồ sẽ thu nhỏ.

<!DOCTYPE html>
<html>
   <head>
      <title>Zoom Example</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: 10,
            zoomControl: false
         }
         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
         
         // zoom control options
         var zoomOptions = {
            zoomInText: '1',
            zoomOutText: '0',
         };
         var zoom = L.control.zoom(zoomOptions);   // Creating zoom control
         zoom.addTo(map);   // Adding zoom control to the map
      </script>
   </body>
   
</html>

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

Ghi công

Để thêm thuộc tính của riêng bạn vào bản đồ bằng cách sử dụ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 attrOptions và xác định giá trị tiền tố của riêng bạn thay vì giá trị mặc định (tờ rơi).

Sau đó, tạo kiểm soát phân bổ bằng cách chuyển attrOptions biến thành L.control.attribution() như hình bên dưới.

// Attribution options
var attrOptions = {
   prefix: 'attribution sample'
};

// Creating an attribution
var attr = L.control.attribution(attrOptions);

Step 5 - Thêm attribution control đối tượng được tạo ở bước trước với bản đồ bằng cách sử dụng addTo() phương pháp.

// Adding attribution to the map
attr.addTo(map);

Thí dụ

Mã sau đây thêm kiểm soát phân bổ của riêng chúng tôi vào bản đồ của bạn, thay vì mã mặc định. Tại đây, thay vào đó, mẫu thuộc tính văn bản sẽ được hiển thị.

<!DOCTYPE html>
<html>
   <head>
      <title>Attribution Example</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: 10,
            attributionControl: false
         }
         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
         
         // Attribution options
         var attrOptions = {
            prefix: 'attribution sample'
         };
         
         // Creating an attribution
         var attr = L.control.attribution(attrOptions);
         attr.addTo(map);  // Adding attribution to the map
      </script>
   </body>
   
</html>>

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

Tỉ lệ

Để thêm điều khiển tỷ lệ của riêng bạn vào bản đồ bằng cách sử dụ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 layer phản đối 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 kiểm soát quy mô bằng cách sử dụng L.control.scale() như hình bên dưới.

// Creating scale control
var scale = L.control.scale();

Step 5 - Thêm scale control đối tượng được tạo ở bước trước với bản đồ bằng cách sử dụng addTo() như hình dưới đây.

// Adding scale control to the map
scale.addTo(map);

Thí dụ

Đoạn mã sau thêm kiểm soát tỷ lệ vào bản đồ của bạn.

<!DOCTYPE html>
<html>
   <head>
      <title>Scale Example</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: 10
         }
         // 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');
         map.addLayer(layer); // Adding layer to the map
         var scale = L.control.scale(); // Creating scale control
         scale.addTo(map); // Adding scale control to the map
      </script>
   </body>
   
</html>

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