如何在'moveend'命令后删除图层,然后重新添加同一图层?
详细说明:
我想使用getJSON在MySQL的传单中添加超过60,000个点。考虑到大量的点我想只显示BBOX中的点数。首先在MySQL中发送BBOX坐标:
map.on('moveend', function() {
$.ajax({
type: "POST",
url: "storeCoordinateBBOX.php",
data: { sjever: map.getBounds()._northEast.lat, jug: map.getBounds()._southWest.lat, zapad: map.getBounds()._southWest.lng, istok: map.getBounds()._northEast.lng}
}).done(function( msg ) {
//alert( msg );
});
});
然后仅选择位于BBOX中的点。
PHP(get_address.php)
$sql = "SELECT objectid, ulica, kb, ( Y(SHAPE)) AS lat, ( X(SHAPE)) AS lng FROM bl_tacke_adrese WHERE ( Y(SHAPE) ) > $jug AND ( Y(SHAPE) ) < $sjever AND ( X(SHAPE) ) > $zapad AND ( X(SHAPE) ) < $istok;";
之后,所选数据将添加到传单:
address = new L.LayerGroup();
[...]
function getUsers_ostalo() {
map.on('moveend', function(){
// map.removeLayer(address) ;
$.getJSON("get_address.php", function podaci(data) {
for (var i = 0; i < data.length; i++) {
var location = new L.LatLng(data[i].lat, data[i].lng);
var objectid = "<div style='font-size: 12px; text-align: left; margin-left: auto; margin-right: auto;'><b style='font-size: 12px;'>ID Lokacije: </b>"+ data[i].objectid +"</div>";
var ulica = "<div style='font-size: 12px; text-align: left; margin-left: auto; margin-right: auto;'><b style='font-size: 12px; text-align: left;'>Ulica: </b>"+ data[i].ulica +"</div>";
var kb = "<div style='font-size: 12px; text-align: left; margin-left: auto; margin-right: auto;'><b style='font-size: 12px; text-align: left;'>Kb: </b>"+ data[i].kb +"</div>";
var marker = new L.Marker(location, {
title: data[i].tipovi,
icon: ostalo_icon
});
marker.bindPopup("<div>"+ objectid + ulica + kb + "</div>", {maxWidth: '400', maxHeight: '400'});
marker.addTo(address);
}
})
});
}
这一切都正常。问题是当移动地图时添加了一个新的点但是没有删除已经存在的(它们是先前移动的地图所加载的)。我希望每次移动地图时先清理地图(removeLayer),然后再添加相同的图层。那可能吗? 我试过插入'map.removeLayer(address);'在'map.on('Moveendi',function(){...'之后,然后删除图层并且不再添加它。
答案 0 :(得分:1)
当地图开始移动时清除图层:
map.on("movestart", function() {
address.clearLayers();
});
比移动结束时添加新标记:
map.on("moveend", function() {
// ..
marker.addTo(address);
});