将圆从一点移动到另一点

我不熟悉传单，正在尝试在点击地图时圈出地图。我需要如下条件:

圆圈在地图上点击时从一个点移动到另一个点(如果圆圈已经存在并且只有一个圆圈)
直接放大圆圈的位置

然而，我有以下问题:

圆增加
当按下另一个点时，圆圈先消失，然后出现在前一个点和最近一个点
不要放大圆圈的位置

这个问题有解决办法吗?

<!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: 11
}
var groupCircle = L.featureGroup();
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

map.on("click", function(e){
if(map.hasLayer(groupCircle)){
map.removeLayer(groupCircle)
}else{
new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
map.addLayer(groupCircle)
}

})
</script>
</body>

</html>

圆圈会增加，因为你只删除了featureGroup层，而没有删除featureGroup的内容。可按以下步骤重新启动:

map.removeLayer(groupCircle)
groupCircle = L.featureGroup();

可在重新启动后直接添加

if(map.hasLayer(groupCircle)){
//Start
map.removeLayer(groupCircle)
groupCircle = L.featureGroup();
new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
map.addLayer(groupCircle)
//End
}else{
new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
map.addLayer(groupCircle)
}

可以添加setView"命令:

map.setView([e.latlng.lat, e.latlng.lng], 11); //11 = zoom level

完整代码:

<!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: 11
}
var groupCircle = L.featureGroup();
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

map.on("click", function(e){
map.setView([e.latlng.lat, e.latlng.lng], 11); //11 = zoom level
if(map.hasLayer(groupCircle)){
//Start
map.removeLayer(groupCircle)
groupCircle = L.featureGroup();
new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
map.addLayer(groupCircle)
//End
}else{
new L.Circle([e.latlng.lat, e.latlng.lng], 5000).addTo(groupCircle);
map.addLayer(groupCircle)
}

})

</script>
</body>
</html>

相关内容

最新更新

热门标签：