《Leaflet 基础知识点》- 绘制圆、线、矩形和多边形

前言

注意绘制的都是矢量图层，所以在 Vector Layers 分类下： 

绘制

圆

官网API

示例 

// 圆：半径 radius 的单位为米
var circle = L.circle([31.537628173828125,121.190185546875], {radius: 2000}).addTo(map);
// 跳到圆的范围
map.fitBounds(circle.getBounds());

效果

 线

官网API

示例

// 线：坐标点
var latlngs = [
    [31.537628173828125,121.190185546875],
    [30.878448486328125,121.19430541992188],
    [30.839996337890625,121.92901611328125]
];
// 绘制且添加
var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
// 跳到线的范围
map.fitBounds(polyline.getBounds());

效果

矩形

官网API

示例

// 矩形：坐标点 [[ymin, xmin], [ymax, xmax]]
var bounds = [[30.894075744803956, 121.69670937773769],[31.436795822500894, 122.45965784374343]];
// 绘制且添加
var rectangle = L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);
// 跳到矩形的范围
map.fitBounds(rectangle.getBounds());

效果

多边形

官网API，这是一个简单的多边形，复杂的可移步《Leaflet 进阶知识点》- L.polygon 多边形绘制详解

示例

// 多边形：坐标点，注意 第一个 与 最后一个点是无需一样，会自动闭合
var latlngs = [
    [31.537628173828125,121.190185546875],
    [30.878448486328125,121.19430541992188],
    [30.839996337890625,121.92901611328125],
    [31.348114013671875,121.8878173828125]
];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// 跳到多边形的范围
map.fitBounds(polygon.getBounds());

效果

小结

1、本文的示例只是简单的绘制单个图形，如果要绘制多个线、矩形和多边形，请查看官网；

2、如需了解点或标注是绘制，请移步《《Leaflet 基础知识点》- 绘制点（两种方式）》和《《Leaflet 基础知识点》- 添加图形标注》