LeafletJS - 控件

Leaflet 提供各种控件，例如缩放、署名、比例尺等，其中：

缩放 − 默认情况下，此控件位于地图的左上角。它有两个按钮"+"和"–"，您可以使用它们放大或缩小地图。您可以通过将地图选项的zoomControl选项设置为false来移除默认的缩放控件。
署名 − 默认情况下，此控件位于地图的右下角。它在一个小的文本框中显示署名数据。默认情况下，它显示文本。您可以通过将地图选项的attributionControl选项设置为false来移除默认的署名控件。
比例尺 − 默认情况下，此控件位于地图的左下角。它显示屏幕当前的中心点。

本章将解释如何使用 Leaflet JavaScript 库创建并将所有这三个控件添加到您的地图中。

缩放

要使用 Leaflet JavaScript 库向地图添加您自己的缩放控件，请按照以下步骤操作：

步骤 1 − 通过传递一个元素（字符串或对象）和地图选项（可选）来创建一个地图对象。

步骤 2 − 通过传递所需瓦片的 URL 来创建一个图层对象。

步骤 3 − 使用Map类的addLayer()方法将图层对象添加到地图。

步骤 4 − 创建 zoomOptions 变量，并定义您自己的放大和缩小选项文本值，而不是默认值（+ 和 -）。

然后，通过将 zoomOptions 变量传递给L.control.zoom()来创建缩放控件，如下所示。

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

步骤 5 − 使用addTo()方法将上一步中创建的缩放控件对象添加到地图。

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

示例

以下是将您自己的缩放控件添加到地图（而不是默认控件）的代码。在这里，按下 1 时地图放大，按下 0 时地图缩小。

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

它生成以下输出：

署名

要使用 Leaflet JavaScript 库向地图添加您自己的署名，请按照以下步骤操作：

步骤 1 − 通过传递一个<div>元素（字符串或对象）和地图选项（可选）来创建一个地图对象。

步骤 2 − 通过传递所需瓦片的 URL 来创建一个图层对象。

步骤 3 − 使用Map类的addLayer()方法将图层对象添加到地图。

步骤 4 − 创建attrOptions变量，并定义您自己的前缀值，而不是默认值 (leaflet)。

然后，通过将attrOptions变量传递给L.control.attribution()来创建署名控件，如下所示。

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

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

步骤 5 − 使用addTo()方法将上一步中创建的署名控件对象添加到地图。

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

示例

以下代码将我们自己的署名控件添加到您的地图中，而不是默认控件。这里将显示文本attribution sample。

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

它生成以下输出：

比例尺

要使用 Leaflet JavaScript 库向地图添加您自己的比例尺控件，请按照以下步骤操作：

步骤 1 − 通过传递一个<div>元素（字符串或对象）和地图选项（可选）来创建一个地图对象。

步骤 2 − 通过传递所需瓦片的 URL 来创建一个图层对象。

步骤 3 − 使用Map类的addLayer()方法将图层对象添加到地图。

步骤 4 − 通过使用L.control.scale()创建比例尺控件，如下所示。

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

步骤 5 − 使用addTo()方法将上一步中创建的比例尺控件对象添加到地图，如下所示。

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

示例

以下代码将比例尺控件添加到您的地图。

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

它生成以下输出：

打印页面