望远网-Leaflet绘制点、线、面

Leaflet教程

Leaflet入门教程

Leaflet添加标记，绘制线条、绘制圆、绘制矩形、绘制多边形，其位于UI Layers和Vector Layers中。

使用的相关类

名称	类名	官方API
标记	Marker	https://leafletjs.com/reference.html#marker
线条	Polyline	https://leafletjs.com/reference.html#polyline
圆	Circle	https://leafletjs.com/reference.html#circle
矩形	Rectangle	https://leafletjs.com/reference.html#rectangle
多边形	Polygon	https://leafletjs.com/reference.html#polygon

添加标注点

L.marker([39.9788, 116.30226]).addTo(map);

添加线条

var latlngs = [
[40.912569, 111.840153],
[39.094994, 106.742496],
[33.503718, 103.05109]
];
L.polyline(latlngs, {color: 'red'}).addTo(map);

添加圆

属性radius的单位是米，所以当地图层级较低时，该值得设得较大。
L.circle([27.682422, 116.762028], {radius: 200000, color: "red"}).addTo(map);

添加矩形

var latlngs = [
[30.825708, 107.18195],
[33.650168, 115.092106]
];
L.rectangle(latlngs, {color: "red"}).addTo(map);

添加多边形

var latlngs = [
[39.163173, 117.992496],
[35.8168, 113.158512],
[32.54576, 118.607731],
[32.619818, 122.562809],
[37.299282, 122.562809]
];
L.polygon(latlngs, {color: 'red'}).addTo(map);

地图完整的例子

实例

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>离线地图</title>
	<link rel="stylesheet" href="leaflet/leaflet.css" />
	<script type="text/javascript" src="leaflet/leaflet.js"></script>
	<style type="text/css">
		html, body, #map_container{
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin:0;
		}
	</style>
</head>
<body>
<div id="map_container"></div>
</body>
<script type="text/javascript">  
	var map = L.map('map_container', {
		center: [30.62840809925475, 118.398990578125],
		zoom: 4,
		minZoom: 4,
		maxZoom: 19
    });
	L.tileLayer('tiles/{z}/{x}/{y}.png', {
      attribution: '离线地图'
	}).addTo(map);
	/*添加标记*/
	L.marker([39.9788, 116.30226]).addTo(map);
	/*添加线条*/
	var latlngs = [
		[40.912569, 111.840153],
		[39.094994, 106.742496],
		[33.503718, 103.05109]
	];
	L.polyline(latlngs, {color: 'red'}).addTo(map);
	/*添加圆*/
	L.circle([27.682422, 116.762028], {radius: 200000, color: "red"}).addTo(map);
	/*添加矩形*/
	var latlngs = [
		[30.825708, 107.18195], 
		[33.650168, 115.092106]
	];
	L.rectangle(latlngs, {color: "red"}).addTo(map);
	/*添加多边形*/
	var latlngs = [
		[39.163173, 117.992496],
		[35.8168, 113.158512], 
		[32.54576, 118.607731],
		[32.619818, 122.562809],
		[37.299282, 122.562809]
	];
	L.polygon(latlngs, {color: 'red'}).addTo(map);
</script>
</html>

全部教程

微信公众号

打赏作者