8.3. 在地图站点上添加控件

尽管 Leaflet 没有提供用于构建web应用程序的点击式界面，但它确实提供了一些预先编码的“控件”，您只需几行代码就可以添加到地图中。其中包括比例尺、图层切换器、缩放按钮和属性框。OpenLayers提供了这些相同类型的控件，另外还有一些控件，比如概览图、页面上的地理坐标等等。

下面的示例显示了正在运行的 Leaflet 层切换器控件。将鼠标悬停在（或轻敲）角落中的图层图标上会显示一个图层列表，您可以在其中选择一个基础地图并切换专题图层的可见性。此图显示所选的默认OpenStreetMap Mapnik basemap，以及切换到雄蕊墨粉basemap的选项。您将在本课后面的演练中应用此代码。下面只有一个主题层，即“地铁线”层； 但是，您可以通过将其添加到“ Leaflet ”地图中而在其中包括更多层。

图8.9

下面是如何编写上面的层切换器的代码。首先，设置所有图层，并将这些图层添加到希望最初可见的地图中。然后，调用一个函数，该函数设置两个简单的JavaScript对象，其中包含基本图和主题层。最后，创建层切换器(L.control.layers )，将这两个JavaScript对象作为参数传入。

// create and add osm tile layer
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});
osm.addTo(map);

// create stamen osm layer (not adding it to map)
var stamen = L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a> and contributors, under an <a href="http://www.openstreetmap.org/copyright" title="ODbL">open license</a>. Toner style by <a href="http://stamen.com">Stamen Design</a>'
});

// Set up styles for subway lines
function subteStyle(feature) {
  return {
     "color": feature.properties.COLOR,
      "weight": 5
  };
}

// Create layer and add it to the map
var subteLayer = L.geoJSON(subteData, {
  style: subteStyle
});

subteLayer.addTo(map);

createLayerSwitcher();

// function to create a layer switcher control
function createLayerSwitcher() {
  // define basemap and thematic layers and add layer switcher control
 var basemaps = {
    "OSM Mapnik": osm,
    "OSM Stamen Toner": stamen
  };

  var overlays = {
    "Subway lines": subteLayer
  };
  L.control.layers(basemaps,overlays).addTo(map);
}

通常，控制框架是可扩展的，因此您甚至可以决定引入其他人开发的控件，或者，如果您有雄心壮志，可以自己编写代码。尽管定制开箱即用的Leaflet控件超出了本课程的范围，但是您应该知道控件有一个可以调整的样式表。此外，可以通过替换自己的图像来自定义带有图像的控件。检查 Leaflet 样式表和示例样式表可以帮助您了解在应用自定义设置时要覆盖哪些CSS属性。

Leaflet API reference describes the controls 在命名空间L.Control中。学习控件的最佳方法是自己动手实验，并使用现有的示例、文档和一些试错，一点一点地扩展您的功能。在其他Web 制图API中，控件可以称为“widgets”、“plugins”或其他名称。