LeafletJS - 快速指南
LeafletJS - Getting Started
什么是Leaflet.js
Leaflet.js是一个开源库，使用它我们可以部署简单，交互式，轻量级的Web地图。
Leaflet JavaScript库允许您使用图层，WMS，标记，弹出窗口，矢量图层（折线，多边形，圆形等），图像叠加层和GeoJSON等图层。
您可以通过拖动地图，缩放（通过双击或滚轮滚动），使用键盘，使用事件处理以及拖动标记来与Leaflet地图进行交互。
Leaflet支持浏览器，如桌面上的Chrome，Firefox，Safari 5 +，Opera 12 +，IE 7-11，以及Safari，Android，Chrome，Firefox等手机浏览器。
在网页上加载地图的步骤
按照以下步骤在您的网页上加载地图 -
第1步:创建HTML页面
创建一个带有head和body标签的基本HTML页面，如下所示 -
<!DOCTYPE html>
<html>
<head>
</head>
<body>
...........
</body>
</html>
第2步:加载Leaflet CSS脚本
在示例中包含Leaflet CSS脚本 -
<head>
<link rel = "stylesheet" href = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
第3步:加载传单脚本
使用脚本标记加载或包含Leaflet API -
<head>
<script src = "http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
第4步:创建容器
要保存地图，我们必须创建一个容器元素。 通常，
创建容器元素并定义其尺寸 -
<div id = "sample" style = "width:900px; height:580px;"></div>
第5步:映射选项
Leaflet提供了多种选项，例如类型控制选项，交互选项，地图状态选项，动画选项等。通过设置这些值，我们可以根据需要自定义地图。
创建一个mapOptions对象（它就像文字一样创建）并设置选项中心和缩放的值，其中
center - 作为此选项的值，您需要传递一个LatLng对象，指定我们想要使地图居中的位置。 （只需指定[]括号内的纬度和经度值）
zoom - 作为此选项的值，您需要传递一个表示地图缩放级别的整数，如下所示。
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}
第6步:创建地图对象
使用Leaflet API的Map类，您可以在页面上创建地图。 您可以通过实例化Leaflet API的调用Map来创建地图对象。 在实例化此类时，您需要传递两个参数 -
作为此选项的参数，您需要传递表示DOM id的String变量或
元素的实例。这里，元素是一个用于保存地图的HTML容器。带有地图选项的可选对象文字。
通过传递上一步中创建的
var map = new L.map('map', mapOptions);
第7步:创建图层对象
您可以通过实例化TileLayer类来加载和显示各种类型的地图（切片图层）。 在实例化它时，您需要以String变量的形式传递一个URL模板，该模板从服务提供者处请求所需的tile层（map）。
创建切片图层对象，如下所示。
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
这里我们使用了openstreetmap 。
第8步:向地图添加图层
最后使用addlayer()方法将上一步中创建的图层添加到地图对象，如下所示。
map.addLayer(layer);
例子 (Example)
以下示例显示如何加载海得拉巴城市的open street map ，其缩放值为10。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet sample</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>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
</script>
</body>
</html>
它生成以下输出 -
宣传单地图提供商
就像open street map ，您可以加载各种服务提供商的层，例如Open Topo，Thunder forest，Hydda，ESRI，Open weather，NASA GIBS等。为此，您需要在创建TileLayer时传递各自的URL宾语
var layer = new L.TileLayer('URL of the required map');
下表列出了Openstreetmap提供的URL的URL及其各自的示例映射。
| 地图类型 | 网址和输出 |
|---|---|
| Mapnik | http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
|
| Black And White | http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png
|
| DE | http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/ {y}.png
|
| France | http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png
|
| Hot | http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png
|
| BZH | http://tile.openstreetmap.bzh/br/{z}/{x}/{y}.png
|
LeafletJS - Markers
要在地图上标记单个位置，传单会提供标记。 这些标记使用标准符号，这些符号可以自定义。 在本章中，我们将了解如何添加标记以及如何自定义，动画和删除标记。
添加简单标记
要使用Leaflet JavaScript库向地图添加标记，请按照以下步骤操作 -
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 通过传递表示要标记的位置的latlng对象来实例化Marker类，如下所示。
// Creating a marker
var marker = new L.Marker([17.385044, 78.486671]);
Step 5 - 使用Marker类的addTo()方法将前面步骤中创建的标记对象添加到地图中。
// Adding marker to the map
marker.addTo(map);
例子 (Example)
以下代码设置了名为Hyderabad（India）的城市的标记。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet sample</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>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
// Creating a marker
var marker = L.marker([17.385044, 78.486671]);
// Adding marker to the map
marker.addTo(map);
</script>
</body>
</html>
它生成以下输出 -
将弹出窗口绑定到标记
要将显示消息的简单弹出窗口绑定到标记，请按照以下步骤操作 -
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 通过传递表示要标记的位置的latlng对象来实例化Marker类。
Step 5 - 使用bindPopup()将弹出窗口附加到标记，如下所示。
// Adding pop-up to the marker
marker.bindPopup('Hi Welcome to IoWiki').openPopup();
Step 6 - 最后，使用Marker类的addTo()方法将前面步骤中创建的Marker对象添加到地图中。
例子 (Example)
以下代码设置了Hyderabad（印度）城市的标记，并添加了一个弹出窗口。
<!DOCTYPE html>
<html>
<head>
<title>Binding pop-Ups to marker</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>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 15
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
var marker = L.marker([17.438139, 78.395830]); // Creating a Marker
// Adding popup to the marker
marker.bindPopup('This is IoWiki').openPopup();
marker.addTo(map); // Adding marker to the map
</script>
</body>
</html>
它生成以下输出
标记选项
创建标记时，除了latlang对象外，还可以传递marker options变量。 使用此变量，您可以将值设置为标记的各种选项，如图标，可拖动，键盘，标题，alt，zInsexOffset，不透明度，riseOnHover，riseOffset，窗格，可拖动等。
要使用地图选项创建地图，您需要按照以下步骤进行操作 -
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 为markerOptions创建变量，并为所需选项指定值。
创建一个markerOptions对象（它就像文字一样创建）并为选项iconUrl和iconSize设置值。
// Options for the marker
var markerOptions = {
title: "MyLocation",
clickable: true,
draggable: true
}
Step 5 - 通过传递表示要标记的位置的latlng对象和在上一步骤中创建的选项对象来实例化Marker类。
// Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);
Step 6 - 最后，使用Marker类的addTo()方法将前面步骤中创建的Marker对象添加到地图中。
例子 (Example)
以下代码设置了海德拉巴市（印度）的标记。 此标记是可点击的，可拖动，标题为MyLocation 。
<html>
<head>
<title>Marker Options 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>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
// Creating a Marker
var markerOptions = {
title: "MyLocation",
clickable: true,
draggable: true
}
// Creating a marker
var marker = L.marker([17.385044, 78.486671], markerOptions);
// Adding marker to the map
marker.addTo(map);
</script>
</body>
</html>
它生成以下输出
标记自定义图标
您也可以添加自己的图标，而不是Leaflet库提供的默认图标。 您可以使用以下步骤将自定义图标添加到地图而不是默认图标。
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 为markerOptions创建变量并为所需选项指定值 -
iconUrl - 作为此选项的值，您需要传递一个String对象，该对象指定要用作图标的图像路径。
iconSize - 使用此选项，您可以指定图标的大小。
Note - 除了这些，您还可以将值设置为其他选项，如iconSize，shadowSize，iconAnchor，shadowAnchor和popupAnchor。
使用L.icon()创建一个自定义图标，传递上面的选项变量，如下所示。
// Icon options
var iconOptions = {
iconUrl: 'logo.png',
iconSize: [50, 50]
}
// Creating a custom icon
var customIcon = L.icon(iconOptions);
Step 5 - 为markerOptions创建变量，并为所需选项指定值。 除此之外，通过将上一步中创建的图标变量作为值传递来指定图标。
// Options for the marker
var markerOptions = {
title: "MyLocation",
clickable: true,
draggable: true,
icon: customIcon
}
Step 6 - 通过传递表示要标记的位置的latlng对象和在上一步骤中创建的选项对象来实例化Marker类。
// Creating a marker
var marker = L.marker([17.438139, 78.395830], markerOptions);
Step 7 - 最后，使用Marker类的addTo()方法将前面步骤中创建的Marker对象添加到地图中。
例子 (Example)
以下代码在IoWiki的位置设置标记。 这里我们使用IoWiki的徽标而不是默认标记。
<!DOCTYPE html>
<html>
<head>
<title>Marker Custom Icons 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>
// Creating map options
var mapOptions = {
center: [17.438139, 78.395830],
zoom: 10
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
// Icon options
var iconOptions = {
iconUrl: 'logo.png',
iconSize: [50, 50]
}
// Creating a custom icon
var customIcon = L.icon(iconOptions);
// Creating Marker Options
var markerOptions = {
title: "MyLocation",
clickable: true,
draggable: true,
icon: customIcon
}
// Creating a Marker
var marker = L.marker([17.438139, 78.395830], markerOptions);
// Adding popup to the marker
marker.bindPopup('Hi welcome to IoWiki').openPopup();
// Adding marker to the map
marker.addTo(map);
</script>
</body>
</html>
它生成以下输出
LeafletJS - Vector Layers
在上一章中，我们学习了如何在Leaflet中使用标记。 除了标记，我们还可以添加各种形状，如圆形，多边形，矩形，折线等。在本章中，我们将讨论如何使用Google地图提供的形状。
Polyline
要使用Leaflet JavaScript库在地图上绘制折线叠加层，请按照以下步骤操作 -
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 创建一个latlangs变量来保持绘制折线的点，如下所示。
// Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.000538, 81.804034],
[17.686816, 83.218482]
];
Step 5 - 使用L.polyline()创建折线。 要绘制折线，请将位置作为变量传递，并选择一个选项以指定线条的颜色。
// Creating a poly line
var polyline = L.polyline(latlngs, {color: 'red'});
Step 6 - 使用Polyline类的addTo()方法将Polyline添加到地图。
// Adding to poly line to map
polyline.addTo(map);
例子 (Example)
以下是绘制折线的代码，覆盖海德拉巴，Vijayawada，Rajamahendrawaram和Vishakhapatnam（印度）等城市。
DOCTYPE html>
<html>
<head>
<title>Leaflet Poly lines</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>
// Creating map options
var mapOptions = {
center: [16.506174, 80.648015],
zoom: 7
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
// Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.000538, 81.804034],
[17.686816, 83.218482]
];
// Creating a poly line
var polyline = L.polyline(latlngs, {color: 'red'});
// Adding to poly line to map
polyline.addTo(map);
</script>
</body>
</html>
它生成以下输出
Polygon
要使用Leaflet JavaScript库在地图上绘制多边形叠加层，请按照以下步骤操作 -
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 创建一个latlangs变量来保存绘制多边形的点。
// Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
Step 5 - 使用L.polygon()创建多边形。 将位置/点作为变量传递以绘制多边形，并选择指定多边形的颜色。
// Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});
Step 6 - 使用Polygon类的addTo()方法将Polygon添加到地图中。
// Adding to polygon to map
polygon.addTo(map);
例子 (Example)
以下是绘制覆盖海德拉巴，维杰亚瓦达和维沙卡帕特南（印度）城市的多边形的代码。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Polygons</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>
// Creating map options
var mapOptions = {
center: [16.506174, 80.648015],
zoom: 7
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
// Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
// Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});
// Adding to polygon to map
polygon.addTo(map);
</script>
</body>
</html>
它生成以下输出 -
矩形(Rectangle)
要使用Leaflet JavaScript库在地图上绘制矩形叠加层，请按照以下步骤操作
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 创建一个latlangs变量来保存点以在地图上绘制一个矩形。
// Creating latlng object
var latlngs = [
[17.342761, 78.552432],
[16.396553, 80.727725]
];
Step 5 - 使用L.rectangle()函数创建一个矩形。 将位置/点作为变量传递以绘制矩形和rectangleOptions以指定rectangleOptions的颜色和重量。
// Creating rectOptions
var rectOptions = {color: 'Red', weight: 1}
// Creating a rectangle
var rectangle = L.rectangle(latlngs, rectOptions);
Step 6 - 使用Polygon类的addTo()方法将矩形添加到地图。
// Adding to rectangle to map
rectangle.addTo(map);
例子 (Example)
以下是使用Leaflet JavaScript库在地图上绘制矩形的代码。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Rectangle</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>
// Creating map options
var mapOptions = {
center: [16.506174, 80.648015],
zoom: 7
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
// Creating latlng object
var latlngs = [
[17.342761, 78.552432],
[16.396553, 80.727725]
];
var rectOptions = {color: 'Red', weight: 1} // Creating rectOptions
// Creating a rectangle
var rectangle = L.rectangle(latlngs, rectOptions);
rectangle.addTo(map); // Adding to rectangle to map
</script>
</body>
</html>
它生成以下输出 -
Circle
要使用Leaflet JavaScript库在地图上绘制圆形叠加层，请按照以下步骤操作。
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 创建一个latlangs变量来保持圆的中心，如下所示。
// Center of the circle
var circleCenter = [17.385044, 78.486671];
Step 5 - 创建变量circleOptions以指定options color，fillColor和fillOpacity的值，如下所示。
// Circle options
var circleOptions = {
color: 'red',
fillColor: '#f03',
fillOpacity: 0
}
Step 6 - 使用L.circle()创建一个圆。 将圆心，半径和圆选项传递给此函数。
// Creating a circle
var circle = L.circle(circleCenter, 50000, circleOptions);
Step 7 - 使用Polyline类的addTo()方法将上面创建的圆添加到地图。
// Adding circle to the map
circle.addTo(map);
例子 (Example)
以下是用海德拉巴城市的坐标作为半径绘制圆形的代码。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Circle</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>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 7
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
var circleCenter = [17.385044, 78.486671]; // Center of the circle
// Circle options
var circleOptions = {
color: 'red',
fillColor: '#f03',
fillOpacity: 0
}
// Creating a circle
var circle = L.circle(circleCenter, 50000, circleOptions);
circle.addTo(map); // Adding circle to the map
</script>
</body>
</html>>
它生成以下输出 -
LeafletJS - Multi Polyline and Polygon
在上一章中，我们学习了如何添加各种形状，如圆形，多边形，矩形，折线等。在本章中，我们将讨论如何添加多边形，多边形和折线。
Multi-Polyline
要使用Leaflet JavaScript库在地图上绘制多折线叠加层，请按照以下步骤操作 -
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 创建一个latlangs变量来保存点以绘制多折线。
// Creating latlng object
var latlang = [
[[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
[[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
];
Step 5 - 使用L.multiPolyline()函数创建多折线。 将位置作为变量传递以绘制多折线，并选择一个选项以指定线的颜色和重量。
// Creating multi polyline options
var multiPolyLineOptions = {color:'red'};
// Creating multi polylines
var multipolyline = L.multiPolyline(latlang , multiPolyLineOptions);
Step 6 - 使用Multipolyline类的addTo()方法将多折线添加到地图。
// Adding multi polyline to map
multipolyline.addTo(map);
例子 (Example)
以下是绘制覆盖海德拉巴，维杰亚瓦达和维沙卡帕特南等城市的多折线的代码; 和Kurnool，班加罗尔和钦奈。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Multi Polylines</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>
// Creating map options
var mapOptions = {
center: [16.506174, 80.648015],
zoom: 7
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
// Creating latlng object
var latlang = [
[[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
[[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
];
// Creating poly line options
var multiPolyLineOptions = {color:'red'};
// Creating multi poly-lines
var multipolyline = L.multiPolyline(latlang , multiPolyLineOptions);
// Adding multi poly-line to map
multipolyline.addTo(map);
</script>
</body>
</html>
它生成以下输出 -
多边形
要使用Leaflet JavaScript库在地图上绘制多边形叠加层，请按照以下步骤操作 -
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 创建一个latlangs变量来保存点以绘制多边形。
// Creating latlng object
var latlang = [
[[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
[[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
];
Step 5 - 使用L.multiPolygon()函数创建一个多边形。 将位置作为变量传递以绘制多边形，并选择一个选项以指定线条的颜色和重量。
// Creating multi polygon options
var multiPolygonOptions = {color:'red'};
// Creating multi polygon
var multipolygon = L.multiPolygon(latlang , multiPolygonOptions);
Step 6 - 使用MultiPolygon类的addTo()方法将多边形添加到地图。
// Adding multi polygon to map
multipolygon.addTo(map);
例子 (Example)
以下是绘制多边形的代码，涉及海德拉巴，维杰亚瓦达和维沙卡帕特南等城市; 和Kurnool，班加罗尔和钦奈。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Multi Polygons</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>
// Creating map options
var mapOptions = {
center: [16.506174, 80.648015],
zoom: 7
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
// Adding layer to the map
map.addLayer(layer);
// Creating latlng object
var latlang = [
[[17.385044, 78.486671], [16.506174, 80.648015], [17.686816, 83.218482]],
[[13.082680, 80.270718], [12.971599, 77.594563],[15.828126, 78.037279]]
];
// Creating multi polygon options
var multiPolygonOptions = {color:'red', weight:8};
// Creating multi polygons
var multipolygon = L.multiPolygon(latlang , multiPolygonOptions);
// Adding multi polygon to map
multipolygon.addTo(map);
</script>
</body>
</html>
它生成以下输出 -
LeafletJS - Layers Group
图层组
使用图层组，您可以向地图添加多个图层并将其作为单个图层进行管理。
按照下面给出的步骤创建一个LayerGroup并将其添加到地图中。
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 通过实例化如下所示的相应类来创建所需的标记，多边形，圆形等元素（图层）。
// Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);
// Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
// Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});
Step 5 - 使用l.layerGroup()创建图层组。 传递上面创建的标记，多边形等，如下所示。
// Creating layer group
var layerGroup = L.layerGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);
Step 6 - 使用addTo()方法添加在上一步中创建的图层组。
// Adding layer group to map
layerGroup.addTo(map);
例子 (Example)
以下代码创建一个图层组，该图层组包含3个标记和一个多边形，并将其添加到地图中。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Layer Group</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>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 7
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
// Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);
// Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
// Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});
// Creating layer group
var layerGroup = L.layerGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);
layerGroup.addTo(map); // Adding layer group to map
</script>
</body>
</html>
它生成以下输出 -
Adding a layer (element)
您可以使用addLayer()方法向要素组添加图层。 对于此方法，您需要传递要添加的元素。
您可以在市中心添加一个城市海得拉巴的圆圈。
// Creating a circle
var circle = L.circle([16.506174, 80.648015], 50000, {color: 'red', fillColor:
'#f03', fillOpacity: 0} );
// Adding circle to the layer group
layerGroup.addLayer(circle);
它将产生以下输出。 -
Removing a Layer (Element)
您可以使用removeLayer()方法从要素组中删除图层。 对于此方法，您需要传递要删除的元素。
您可以删除名为Vijayawada的城市上的标记，如下所示。
// Removing layer from map
layerGroup.removeLayer(vjwdMarker);
它将产生以下输出 -
功能组
它类似于LayerGroup但它允许鼠标事件并将弹出窗口绑定到它。 您还可以使用setStyle()方法将样式设置为整个组。
按照下面给出的步骤创建一个功能组并将其添加到地图中。
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 通过实例化如下所示的相应类来创建所需的标记，多边形和圆形等元素（图层）。
// Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);
// Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
// Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});>
Step 5 - 使用l.featureGroup()创建功能组。 传递上面创建的标记，多边形等，如下所示。
// Creating feature group
var featureGroup = L.featureGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);
Step 6 - 如果将样式设置为要素组，则它将应用于组中的每个元素（图层）。 您可以使用setStyle()方法完成此操作，并且需要将值传递给颜色和不透明度等选项。
将样式设置为在上一步中创建的功能组。
// Setting style to the feature group
featureGroup.setStyle({color:'blue',opacity:.5});
Step 7 - 使用bindPopup()方法绑定弹出窗口，如下所示。
// Binding popup to the feature group
featureGroup.bindPopup("Feature Group");
Step 8 - 使用addTo()方法添加在上一步中创建的功能组。
// Adding layer group to map
featureGroup.addTo(map);
例子 (Example)
以下代码创建一个包含3个标记和一个多边形的要素组，并将其添加到地图中。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Feature Group</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>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 7
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
// Creating markers
var hydMarker = new L.Marker([17.385044, 78.486671]);
var vskpMarker = new L.Marker([17.686816, 83.218482]);
var vjwdMarker = new L.Marker([16.506174, 80.648015]);
// Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
var polygon = L.polygon(latlngs, {color: 'red'}); // Creating a polygon
// Creating feature group
var featureGroup = L.featureGroup([hydMarker, vskpMarker, vjwdMarker, polygon]);
featureGroup.setStyle({color:'blue',opacity:.5});
featureGroup.bindPopup("Feature Group");
featureGroup.addTo(map); // Adding layer group to map
</script>
</body>
</html>
它生成以下输出 -
LeafletJS - Event Handling
Leaflet JavaScript程序可以响应用户生成的各种事件。 在本章中，我们将提供一些示例，演示如何在使用Leaflet时执行事件处理。
事件处理
按照下面给出的步骤将事件添加到地图中。
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 将处理程序添加到地图中，如下所示。
map.on("click", function(e){
new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
})
例子 (Example)
以下代码演示了使用Leaflet的均匀处理。 执行时，如果单击地图，将在该特定位置创建标记。
<!DOCTYPE html>
<html>
<head>
<title>Leaflet Polygons</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>
// Creating map options
var mapOptions = {
center: [16.506174, 80.648015],
zoom: 7
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
map.on("click", function(e){
new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
})
</script>
</body>
</html>
它生成以下输出 -
LeafletJS - Overlays
您也可以在Leaflet应用程序中使用图像，视频叠加，而不是地图叠加。 在本章中，我们将了解如何使用此类叠加层。
图像叠加
按照下面给出的步骤使用图像叠加层。
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 使用L.imageOverlay()创建图像叠加层。 传递图像的URL和表示图像边界的对象，如下所示。
// Creating Image overlay
var imageUrl = 'tpPoster.jpg';
var imageBounds = [[17.342761, 78.552432], [16.396553, 80.727725]];
var overlay = L.imageOverlay(imageUrl, imageBounds);
Step 5 - 使用imageOverlay类的addTo()方法将叠加层添加到地图中，如下所示。
// Adding overlay to the map
overlay.addTo(map);
例子 (Example)
以下代码演示了图像叠加的用法。
<!DOCTYPE html>
<html>
<head>
<title>Image Overlay 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>
// Creating map options
var mapOptions = {
center: [17.342761, 78.552432],
zoom: 8
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
// Creating Image overlay
var imageUrl = 'tpPoster.jpg';
var imageBounds = [[17.342761, 78.552432], [16.396553, 80.727725]];
var overlay = L.imageOverlay(imageUrl, imageBounds);
overlay.addTo(map);
</script>
</body>
</html>
它生成以下输出 -
LeafletJS - Controls
Leaflet提供各种控件，如缩放，属性，比例等，其中 -
Zoom - 默认情况下，此控件存在于地图的左上角。 它有两个按钮"+"和"–" ，使用它们可以放大或缩小地图。 您可以通过将地图选项的zoomControl选项设置为false来删除默认缩放控件。
Attribution - 默认情况下，此控件位于地图的右下角。 它会在小文本框中显示归因数据。 默认情况下，它显示文本。 您可以通过将地图选项的attributionControl选项设置为false来删除默认属性控件。
Scale - 默认情况下，此控件存在于地图的左下角。 它显示屏幕的当前中心。
在本章中，我们将解释如何使用Leaflet JavaScript库创建所有这三个控件并将其添加到地图中。
Zoom
要使用Leaflet JavaScript库将您自己的缩放控件添加到地图，请按照以下步骤操作 -
Step 1 - 通过传递元素（String或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 创建zoomOptions变量并为放大和缩小选项定义自己的文本值，而不是默认值（+和 - ）。
然后，通过将zoomOptions变量传递给L.control.zoom()来创建缩放控件，如下所示。
// zoom control options
var zoomOptions = {
zoomInText: '1',
zoomOutText: '0',
};
// Creating zoom control
var zoom = L.control.zoom(zoomOptions);
Step 5 - 使用addTo()方法将上一步中创建的缩放控制对象添加到地图中。
// Adding zoom control to the map
zoom.addTo(map);
例子 (Example)
以下是将您自己的缩放控件添加到地图的代码，而不是默认的代码。 在这里，按下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>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10,
zoomControl: false
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
// zoom control options
var zoomOptions = {
zoomInText: '1',
zoomOutText: '0',
};
var zoom = L.control.zoom(zoomOptions); // Creating zoom control
zoom.addTo(map); // Adding zoom control to the map
</script>
</body>
</html>
它生成以下输出 -
归因(Attribution)
要使用Leaflet JavaScript库将您自己的属性添加到地图中，请按照以下步骤操作 -
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将图层对象添加到Map 。
Step 4 - 创建attrOptions变量并定义自己的前缀值而不是默认值（传单）。
然后，通过将attrOptions变量传递给L.control.attribution()来创建属性控件，如下所示。
// Attribution options
var attrOptions = {
prefix: 'attribution sample'
};
// Creating an attribution
var attr = L.control.attribution(attrOptions);
Step 5 - 使用addTo()方法将在上一步中创建的attribution control对象添加到地图中。
// Adding attribution to the map
attr.addTo(map);
例子 (Example)
以下代码将我们自己的归因控件添加到地图中，而不是默认控件。 在此处，将显示文本attribution sample 。
<!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>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10,
attributionControl: false
}
var map = new L.map('map', mapOptions); // Creating a map object
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
// Attribution options
var attrOptions = {
prefix: 'attribution sample'
};
// Creating an attribution
var attr = L.control.attribution(attrOptions);
attr.addTo(map); // Adding attribution to the map
</script>
</body>
</html>>
它生成以下输出 -
Scale
要使用Leaflet JavaScript库将您自己的缩放控件添加到地图，请按照以下步骤操作 -
Step 1 - 通过传递“ div ”元素（字符串或对象）和映射选项（可选）来创建Map对象。
Step 2 - 通过传递所需图块的URL来创建Layer对象。
Step 3 - 使用Map类的addLayer()方法将layer对象添加到Map 。
Step 4 - 通过传递使用L.control.scale()创建比例控制，如下所示。
// Creating scale control
var scale = L.control.scale();
Step 5 - 使用addTo()方法将在上一步中创建的scale control对象添加到地图中，如下所示。
// Adding scale control to the map
scale.addTo(map);
例子 (Example)
以下代码将缩放控件添加到地图中。
<!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>
// Creating map options
var mapOptions = {
center: [17.385044, 78.486671],
zoom: 10
}
// Creating a map object
var map = new L.map('map', mapOptions);
// Creating a Layer object
var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
map.addLayer(layer); // Adding layer to the map
var scale = L.control.scale(); // Creating scale control
scale.addTo(map); // Adding scale control to the map
</script>
</body>
</html>
它生成以下输出 -
