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);
地图完整的例子
实例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!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> |
全部教程