方法1（根據指定的半徑和中心點去繪制圓）
var polygon1 = new L.Circle([34, 108], 120000, {
color: 'red', //顏色
fillColor: '#f03',
fillOpacity: 0.4, //透明度
});

方法2（根據半徑和中心點去構造polygon類型的圓）
var radius = 2;
//點集
var parts = [];
//計算圓的邊緣所有點
for (var i = 0; i < 360; i++) {
var radians = (i + 1) * Math.PI / 180;
var circlePoint = [Math.cos(radians) * radius + 34, Math.sin(radians) * radius + 108];
parts[i] = circlePoint;
}

var polygon1 = L.polygon(parts, {
color: 'green'
});

方法3，（地圖上繪制一點拖動鼠標動態繪制圓形）
function DrawCircle() {
var r = 0
var i = null
var tempCircle = new L.circle()
map.dragging.disable(); //將mousemove事件移動地圖禁用
map.on('mousedown', onmouseDown);
map.on('mouseup', onmouseUp);
map.on('mousemove', onMove)

function onmouseDown(e) {
i = e.latlng
//確定圓心
}

function onMove(e) {
if (i) {
r = L.latLng(e.latlng).distanceTo(i)
tempCircle.setLatLng(i)
tempCircle.setRadius(r)
tempCircle.setStyle({
color: '#ff0000',
fillColor: '#ff0000',
fillOpacity: 1
})
map.addLayer(tempCircle)

}
}

function onmouseUp(e) {
r = L.latLng(e.latlng).distanceTo(i) //計算半徑
L.circle(i, {
radius: r,
color: '#ff0000',
fillColor: '#ff0000',
fillOpacity: 1
}).addTo(map)
alert('圓心坐標為：' + i + ';半徑為：' + r);
i = null
r = 0
map.dragging.enable();

}
}

方法4，（使用draw插件繪制圓）
var editableLayers = new L.FeatureGroup();
map.addLayer(editableLayers);

var drawControl = new L.Control.Draw({
position: 'topleft',
draw: {
polyline: false,
polygon: false,
circle: {},
rectangle: false,
marker: false,
remove: true
},
edit: {
featureGroup: editableLayers,
remove: true
}
});
map.addControl(drawControl);

handleMapEvent(drawControl._container, map);

map.on(L.Draw.Event.CREATED, function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
editableLayers.addLayer(layer);

});

總結

以上是生活随笔為你收集整理的leaflet 如何绘制圆的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。