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>
它生成以下输出 −
属性
要使用 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>>
它生成以下输出 −
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>
它生成以下输出 −
