LeafletJS - 控件

Leaflet 提供各种控件,例如缩放、归因、比例等,其中 −

  • 缩放 − 默认情况下,此控件位于地图的左上角。它有两个按钮"+""–",您可以使用它们放大或缩小地图。您可以通过将地图选项的 zoomControl 选项设置为 false 来删除默认缩放控件。

  • 归因 − 默认情况下,此控件位于地图的右下角。它在一个小的文本框中显示归因数据。默认情况下,它显示文本。您可以通过将地图选项的 attributionControl 选项设置为 false 来删除默认归因控件。

  • 比例 − 默认情况下,此控件位于地图的左下角。它显示屏幕的当前中心。

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

缩放

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

步骤 1 − 通过传递元素(字符串或对象)和地图选项(可选)创建 Map 对象。

步骤 2 −通过传递所需图块的 URL 来创建 Layer 对象。

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

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

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

// 缩放控件选项
var zoomOptions = {
   zoomInText: '1',
   zoomOutText: '0',
};
// 创建缩放控件
var zoom = L.control.zoom(zoomOptions);

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

// 向地图添加缩放控件
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>
         // 创建地图选项
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10,
            zoomControl: false
         }
         var map = new L.map('map', mapOptions); // 创建地图对象
         
         // 创建图层对象
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);   // 将图层添加到地图
         
        // 缩放控制选项
        var zoomOptions = {
            zoomInText: '1',
            zoomOutText: '0',
        };
        var zoom = L.control.zoom(zoomOptions); // 创建缩放控制
        zoom.addTo(map); // 将缩放控制添加到地图
      </script>
   </body>
   
</html>
 

它生成以下输出 −

Zoom Map

属性

要使用 Leaflet JavaScript 库将您自己的属性添加到地图,请按照以下步骤 −

步骤 1 − 通过传递 <div> 元素(字符串或对象)和地图选项(可选)创建 Map 对象。

步骤 2 − 通过传递所需图块的 URL 来创建 Layer 对象。

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

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

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

// 归因选项
var attrOptions = {
    prefix: 'attribution sample'
};

// 创建归因
var attr = L.control.attribution(attrOptions);

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

// 将归因添加到地图
attr.addTo(map);

示例

以下代码将我们自己的归因控制添加到您的地图,而不是默认的归因控制。这里将显示文本 归因示例

<!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>
         // 创建地图选项
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10,
            attributionControl: false
         }
         var map = new L.map('map', mapOptions); // 创建地图对象
         
         // 创建图层对象
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer);    // 将图层添加到地图
         
        // 归因选项
        var attrOptions = {
            prefix: 'attribution sample'
        };
        
        // 创建归因
        var attr = L.control.attribution(attrOptions);
        attr.addTo(map); // 将归因添加到地图
      </script>
   </body>
   
</html>>
 

它生成以下输出 −

Attribution Map

Scale

要使用 Leaflet JavaScript 库向地图添加您自己的比例控件,请按照以下步骤 −

步骤 1 − 通过传递 <div> 元素(字符串或对象)和地图选项(可选)创建 Map 对象。

步骤 2 − 通过传递所需图块的 URL 来创建 Layer 对象。

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

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

// 创建比例控件
var scale = L.control.scale();

步骤 5 − 使用 addTo() 方法将上一步中创建的 scale control 对象添加到地图,如下所示。

// 向地图添加比例控件
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>
         // 创建地图选项
         var mapOptions = {
            center: [17.385044, 78.486671],
            zoom: 10
         }
         // 创建地图对象
         var map = new L.map('map', mapOptions);
         
         // 创建图层对象
         var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
         map.addLayer(layer); // 将图层添加到地图
        var scale = L.control.scale(); // 创建比例尺控件
        scale.addTo(map); // 将比例尺控件添加到地图
      </script>
   </body>
   
</html>
 

它生成以下输出 −

Scale Map