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>
它生成以下输出 −
