控件

本文相关全部代码在Leaflet/ch03目录。

在地图应用中，控件是一类重要的元素，它们可以提供丰富的交互和功能，使用户可以更方便地浏览地图内容，执行地图操作，并增强地图应用的用户体验。本章将全面介绍Leaflet控件的使用方法和相关技巧。官方提供了Zoom、Attribution、Layers和Scale四种控件，它们分别负责地图缩放、版权信息显示、图层切换和比例尺展示。

地图缩放控件

地图缩放控件是地图应用中极为重要的元素，它提供了放大（Zoom in）和缩小（Zoom out）两个按钮，使用户能够优雅地控制地图的视图。在创建的地图实例上，默认情况下，这两个按钮是默认存在的，除非在使用L.map初始化地图时，将zoomControl参数设置为false，这样才会隐藏初始的缩放控件。以下是将地图缩放控件隐藏的代码示例：

  var map = L.map('map',{zoomControl: false})
      .setView([51.505, -0.09], 13);

如果需要将地图缩放控件放置在一些指定位置，可以通过如下代码进行操作：

  let zoomControl = L.control.zoom({
    position: "topleft"
  });

position的候选值有左上角（topleft）、右上角（topright）、左下角（bottomleft）和右下角（bottomright）。

如果需要修改默认显示内容，可以通过修改zoomInText属性和zoomOutText属性进行处理，实例如下：

let zoomControl = L.control.zoom({
    position: "topleft",
    zoomInText:'大',
    zoomOutText:'小',
  });

通过上述代码，可以将缩放控件放置在地图的左上角，并将放大按钮的文本设置为“大”，将缩小按钮的文本设置为“小”。这样的自定义效果能够更好地满足用户界面设计需求。最终效果如图所示。

地图缩放控件增强

在地图应用中，地图缩放控件是一个非常常见且重要的元素，它可以让用户方便地缩放地图视图，从而浏览不同层级的地理信息。在Leaflet中，地图缩放控件默认提供了放大（Zoom in）和缩小（Zoom out）两个按钮，使得用户可以快速调整地图的缩放级别。但是，有时候希望对默认的缩放控件进行一些定制，以提供更好的用户体验和更符合项目需求的功能。

在本节中将学习如何使用Leaflet中提供的控件扩展模块，对地图缩放控件进行功能增强，实现自定义的处理逻辑，以优化用户在地图应用中的交互体验。

先来看一下地图缩放控件的默认状态。在下面的代码中创建了一个地图实例map，并设置初始视图为[51.505, -0.09]，缩放级别为13。默认情况下，地图缩放控件是显示在地图的左上角。

var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

如果想要对默认的缩放控件进行一些自定义，比如改变按钮位置、修改按钮文本等，Leaflet提供了控件扩展模块，可以让开发者非常灵活地定制缩放控件。接下来，将介绍如何通过控件扩展模块，对地图缩放控件进行增强。

首先，通过下面的代码将地图缩放控件隐藏起来，这样在地图上就不会显示默认的缩放控件了。

var map = L.map('map', { zoomControl: false }).setView([51.505, -0.09], 13);

接下来，通过控件扩展模块来创建一个自定义的缩放控件。开发者可以通过L.Control.extend()方法来扩展L.Control类，以创建自定义控件。在这个自定义控件中，开发者可以定义一些想要的功能和样式。

L.Control.Zoom = L.Control.extend({
    options: {
        position: "bottomleft",
        zoomInText: '大',
        zoomOutText: '小',
    },
    onAdd: function (map) {
        var zoomName = 'leaflet-control-zoom',
            container = L.DomUtil.create('div', zoomName + 'leaflet-bar'),
            options = this.options;

        this._zoomInButton = this._createButton(options.zoomInText, options.zoomInTitle, zoomName + '-in', container, this._zoomIn);
        this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle, zoomName + '-out', container, this._zoomOut);

        return container;
    },
    _zoomIn: function (e) {
        this._map.zoomIn(e.shiftKey ? 3 : 1);
    },
    _zoomOut: function (e) {
        this._map.zoomOut(e.shiftKey ? 3 : 1);
    },
    _createButton: function (html, title, className, container, fn) {
        var link = L.DomUtil.create('a', className, container);
        link.innerHTML = html;
        link.href = '#';
        link.title = title;

        L.DomEvent.on(link, 'mousedown dblclick', L.DomEvent.stopPropagation)
            .on(link, 'click', L.DomEvent.stop)
            .on(link, 'click', fn, this)
            .on(link, 'click', this._refocusOnMap, this);

        return link;
    }
});

L.control.zoom = function (options) {
    return new L.Control.Zoom(options);
};

在上述代码中，定义了一个名为L.Control.Zoom的自定义控件，并使用extend()方法扩展了L.Control类。在options属性中，设置了控件的默认位置为左下角（position: "bottomleft"），并分别设置了放大按钮和缩小按钮的文本为“大”和“小”（zoomInText和zoomOutText）。接着，在onAdd方法中，创建了一个包含放大和缩小按钮的容器，并使用_createButton方法来创建按钮元素，并绑定相应的点击事件。

在自定义按钮的点击事件处理函数中，分别调用了地图实例的zoomIn和zoomOut方法，来实现地图的放大和缩小功能。并且通过e.shiftKey来判断是否按下了Shift键，如果按下了，则放大或缩小的倍数为3，否则为1。

最后，重新定义了L.control.zoom方法，将自定义的缩放控件加载到地图中，取代了默认的缩放控件。这样就成功地实现了对地图缩放控件的功能增强，为用户提供了更加个性化和方便的地图交互体验。

版权信息显示控件

在地图应用中，版权信息显示控件是一种非常常见的控件，用于向用户展示地图数据的来源和版权信息。Leaflet默认提供了这个控件，它会显示在地图的某个位置，并展示与地图数据相关的版权信息。在Leaflet中，版权信息显示控件是默认显示的，除非在L.map初始化地图时，将参数attributionControl设置为false。具体实例代码如下。

  var map = L.map('map', {attributionControl: false})
      .setView([51.505, -0.09], 13);

在上述代码中，使用了L.map方法创建了一个地图实例，并通过设置attributionControl: false参数将版权信息显示控件隐藏。如果不设置该参数，默认会显示版权信息显示控件。

如果开发者需要将版权信息显示控件放置在特定位置，可以使用L.control.attribution方法进行操作，具体代码如下：

  L.control.attribution({
    position:'bottomleft',
    prefix:'版权信息显示控件'
  }).addTo(map);

在上述代码中通过L.control.attribution方法创建了一个版权信息显示控件，并设置position: 'bottomleft'将其放置在地图的左下角，同时设置prefix属性为”版权信息显示控件”，用于展示自定义的版权信息内容。有关position的候选值有左上角（topleft）、右上角（topright）、左下角（bottomleft）和右下角（bottomright）。

除了给整个地图添加版权信息显示控件以外，开发者还可以给特定图层添加版权信息显示控件。例如，对于图层L.tileLayer，可以通过attribution属性设置版权信息，具体实例代码如下：

  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(map);

在上述代码中通过设置attribution属性向用户展示了地图数据的来源和版权信息，具体内容为”© OpenStreetMap contributors”，并且该信息将显示在地图底部。最终效果如图所示。

图层切换控件

图层切换控件是一种在Leaflet地图中提供图层切换功能的控件，它允许用户在不同的图层之间进行切换，从而实现显示不同的地图数据或要素。通过图层切换控件，开发者可以将一组Map元素（例如Circle、Marker、Polygon等）作为一个整体加入到Layer中，并将其与底图的Layer区分开来，使用户可以在图层切换控件中选择显示哪个图层。

首先通过L.layerGroup方法将一组Map元素添加到一个新的Layer中，代码示例如下：

var t1 = L.marker([51.505, -0.09]).bindPopup('测试点1'),
    t2 = L.marker([51.505, -0.092]).bindPopup('测试点2'),
    t3 = L.marker([51.505, -0.093]).bindPopup('测试点3'),
    t4 = L.marker([51.505, -0.094]).bindPopup('测试点4');

var cities = L.layerGroup([t1, t2, t3, t4]);

接着将这个新的Layer添加到地图中，具体代码如下：

cities.addTo(map);

除了自定义的地理信息数据还可以添加底图图层。通过下面代码将底图添加到地图实例中。

  var map1 = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(map);

现在准备好了两种图层：要素图层cities和底图图层map1。接下来可以使用L.control.layers方法创建图层切换控件，并将这两个图层添加到控件中，代码如下：

  var baseMaps = {
    '街道': map1
  };
  var overlayMaps = {
    '标点': cities
  };


  L.control.layers(baseMaps, overlayMaps).addTo(map);

最终可以在地图中看到图层切换控件，它显示了一个可供选择的图层列表，用户可以通过勾选或取消勾选来切换不同的图层显示。通过图层切换控件，开发者可以提供更多地图数据展示选项，使用户能够根据自己的需求选择合适的地图信息显示，增强了地图应用的交互性和灵活性。浏览器中效果如图所示。

比例尺展示控件

在地图应用中，比例尺展示控件是一种用于向用户展示地图比例尺的控件。它可以帮助用户了解地图上特定距离在现实世界中的实际长度，提供了更直观的地图测量信息。在Leaflet中，比例尺展示控件可以通过L.control.scale方法进行创建和添加。具体实例代码如下：

  L.control.scale({
    position:'topleft',
    maxWidth:'100',
    imperial:false
  }).addTo(map);

在上述代码中使用了L.control.scale方法创建了一个比例尺展示控件，并通过设置position: 'topleft'将其放置在地图的左上角。maxWidth属性定义了控件的最大宽度，这里设置为100，使得比例尺控件在水平方向上最多展示100个像素宽度。imperial属性标识是否使用英制长度，设置为false表示使用公制长度，即在比例尺控件中显示公里和米的长度信息。

设置完成后可以在地图的左上角看到一个名为”scale”的比例尺控件，它显示了地图上特定距离在现实世界中的实际长度，为用户提供了方便的测量参考。具体效果如图所示。

总结

在Leaflet中，控件是地图应用中至关重要的元素，它们为用户提供了丰富的交互功能，增强了地图应用的易用性和实用性。本章主要介绍了Leaflet提供的常见控件，包括地图缩放控件、版权信息显示控件、图层切换控件以及比例尺展示控件。

首先，地图缩放控件允许用户在地图上放大和缩小，以便更好地查看地图内容。通过设置不同的选项，如位置和文本内容，开发者可以根据需求自定义缩放控件的外观和行为。

其次，版权信息显示控件默认显示地图图层的版权信息，告知用户数据来源。开发者可以通过控制参数来决定是否显示版权信息控件，并可设置显示位置和自定义前缀，以满足实际需求。

然后，图层切换控件允许用户在不同的图层间进行切换，实现显示不同的地图数据或要素。通过将一组Map元素作为一个整体加入到Layer中，并创建图层切换控件，开发者可以实现图层的动态切换。

最后，比例尺展示控件在地图上展示了比例尺，帮助用户估计地图上特定距离的实际长度。开发者可以根据需求选择展示公制或英制长度，并可设置显示位置和最大宽度。

通过合理使用这些控件，开发者可以打造出功能丰富、交互友好的地图应用，为用户提供更好的地图浏览和操作体验。