在上一章中,我们学习了如何在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>
它生成以下输出-
![](https://www.tutorialspoint.com/leafletjs/images/circle.jpg)