在上一章中，我們學習瞭如何在Leaflet中使用標記。除了標記外，我們還可以添加各種形狀，例如圓形，多邊形，矩形，折線等。在本章中，我們將討論如何使用Google Maps提供的形狀。
折線
要使用Leaflet JavaScript庫在地圖上繪製折線疊加層，請執行以下步驟-
步驟1-通過傳遞< div >元素（字符串或對象）和地圖選項（可選）來創建地圖對象。
步驟2-通過傳遞所需圖塊的URL 創建一個Layer對象。
第3步 -使用Map類的addLayer（）方法將圖層對象添加到地圖。
步驟4-創建一個latlangs變量來保存繪製折線的點，如下所示。
<span style="color:rgba(0, 0, 0, 0.87)">// Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.000538, 81.804034],
[17.686816, 83.218482]
];
</span>
步驟5-使用L.polyline（）創建折線。要繪製折線，請將位置作爲變量傳遞，並提供一個選項以指定線條的顏色。
<span style="color:rgba(0, 0, 0, 0.87)">// Creating a poly line
var polyline = L.polyline(latlngs, {color: 'red'});
</span>
第6步 -使用Polyline類的addTo（）方法將折線添加到地圖。
<span style="color:rgba(0, 0, 0, 0.87)">// Adding to poly line to map
polyline.addTo(map);
</span>
例
以下是繪製折線的代碼，該代碼涵蓋了海得拉巴，維傑亞瓦達，拉賈馬漢德拉瓦姆和維沙卡帕特南（印度）等城市。
<span style="color:rgba(0, 0, 0, 0.87)">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></span>
它產生以下輸出
多邊形
要使用Leaflet JavaScript庫在地圖上繪製多邊形疊加層，請執行以下步驟-
步驟1-通過傳遞< div >元素（字符串或對象）和地圖選項（可選）來創建地圖對象。
步驟2-通過傳遞所需圖塊的URL 創建一個Layer對象。
第3步 -使用Map類的addLayer（）方法將圖層對象添加到地圖。
步驟4-創建一個latlangs變量來保存繪製多邊形的點。
<span style="color:rgba(0, 0, 0, 0.87)">// Creating latlng object
var latlngs = [
[17.385044, 78.486671],
[16.506174, 80.648015],
[17.686816, 83.218482]
];
</span>
步驟5-使用L.polygon（）創建一個多邊形。將位置/點作爲變量傳遞以繪製多邊形，並傳遞選項以指定多邊形的顏色。
<span style="color:rgba(0, 0, 0, 0.87)">// Creating a polygon
var polygon = L.polygon(latlngs, {color: 'red'});
</span>
步驟6-使用Polygon類的addTo（）方法將多邊形添加到地圖。
<span style="color:rgba(0, 0, 0, 0.87)">// Adding to polygon to map
polygon.addTo(map);
</span>
例
以下是繪製覆蓋城市海得拉巴，維傑亞瓦達和維沙卡帕特南（印度）的多邊形的代碼。
<span style="color:rgba(0, 0, 0, 0.87)"><!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></span>
它生成以下輸出-
矩形
要使用Leaflet JavaScript庫在地圖上繪製矩形疊加層，請執行以下步驟
步驟1-通過傳遞< div >元素（字符串或對象）和地圖選項（可選）來創建地圖對象。
步驟2-通過傳遞所需圖塊的URL 創建一個Layer對象。
第3步 -使用Map類的addLayer（）方法將圖層對象添加到地圖。
步驟4-創建一個latlangs變量來保存在地圖上繪製矩形的點。
<span style="color:rgba(0, 0, 0, 0.87)">// Creating latlng object
var latlngs = [
[17.342761, 78.552432],
[16.396553, 80.727725]
];
</span>
步驟5-使用L.rectangle（）函數創建一個矩形。將位置/點作爲變量傳遞，以繪製矩形，然後使用矩形選項指定矩形的顏色和粗細。
<span style="color:rgba(0, 0, 0, 0.87)">// Creating rectOptions
var rectOptions = {color: 'Red', weight: 1}
// Creating a rectangle
var rectangle = L.rectangle(latlngs, rectOptions);
</span>
步驟6-使用Polygon類的addTo（）方法將矩形添加到地圖。
<span style="color:rgba(0, 0, 0, 0.87)">// Adding to rectangle to map
rectangle.addTo(map);
</span>
例
以下是使用Leaflet JavaScript庫在地圖上繪製矩形的代碼。
<span style="color:rgba(0, 0, 0, 0.87)"><!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></span>
它生成以下輸出-
圓
要使用Leaflet JavaScript庫在地圖上繪製圓形疊加層，請執行以下步驟。
步驟1-通過傳遞< div >元素（字符串或對象）和地圖選項（可選）來創建地圖對象。
步驟2-通過傳遞所需圖塊的URL 創建一個Layer對象。
第3步 -使用Map類的addLayer（）方法將圖層對象添加到地圖。
步驟4-創建一個latlangs變量以保持圓心，如下所示。
<span style="color:rgba(0, 0, 0, 0.87)">// Center of the circle
var circleCenter = [17.385044, 78.486671];
</span>
步驟5-創建一個變量circleOptions，以指定選項color，fillColor和fillOpacity的值，如下所示。
<span style="color:rgba(0, 0, 0, 0.87)">// Circle options
var circleOptions = {
color: 'red',
fillColor: '#f03',
fillOpacity: 0
}
</span>
步驟6-使用L.circle（）創建一個圓。將圓心，半徑和圓選項傳遞給此功能。
<span style="color:rgba(0, 0, 0, 0.87)">// Creating a circle
var circle = L.circle(circleCenter, 50000, circleOptions);
</span>
步驟7-使用Polyline類的addTo（）方法將上面創建的圓添加到地圖。
<span style="color:rgba(0, 0, 0, 0.87)">// Adding circle to the map
circle.addTo(map);
</span>
示例代碼
以下是用海得拉巴城市的座標作爲半徑繪製一個圓的代碼。
<span style="color:rgba(0, 0, 0, 0.87)"><!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>></span>
它生成以下輸出-
