我正在尝试在选择框更改时更改SQL查询。它正在运行，但它不是清除当前的内容，而是重新提交相同的查询并将其添加到现有查询中。所以，如果我有440个结果并选择一个选项，我现在得到880个结果。
我认为map.removeLayer (geojson);会照顾到这一点，但我想我错过了一些东西。
<select id="dropdown_selector">
<option value="Agricultural">Agricultural</option>
<option value="Property">Property</option>
<option value="VisualImpact">Visual Impact</option>
<option value="Safety">Safety</option>
<option value="Vegetation">Vegetation</option>
</select>
var markers = L.markerClusterGroup();
var geojson = null;
var sqlQuery = "SELECT * FROM cartoDBdatabase";
// CALL THE CARTODB SQL API HERE IN URL FORMAT
function setViewer(){
if(map.hasLayer(geojson)){
map.removeLayer(geojson);
};
$.getJSON("https://username.cartodb.com/api/v2/sql?format=GeoJSON&q="+sqlQuery, function(data, latlng) {
geojson = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconSize: [27, 27],
iconAnchor: [13, 27],
popupAnchor: [1, -24],
iconUrl: 'images/commentMarker.png'
})
})
},
onEachFeature: function (feature, layer) {
// ADD A POPUP WITH SOME INFO
layer.bindPopup("<h2>" + feature.properties.name + "</h2><hr><p><b>Comment:</b> " + feature.properties.description + "</p><p><b>User Address:</b> " + feature.properties.profile_address +"</p><p><b>User Address:</b> " + feature.properties.profile_address +"</p>" );
}
});
markers.removeLayer(geojson);
markers.addLayer(geojson);
markers.addTo(map);
$('#dropdown_selector').change(function(){
var commentType = $(this).val();
sqlQuery: "SELECT * FROM cartoDBdatabase WHERE comment_type ILIKE '%"+commentType+"%'";
setViewer();
});
});
}
setViewer();
我已将其缩小到传单插件L.markerClusterGroup（）;,但我不知道如何解决这个问题。非常感谢任何帮助！
更新： 我移动了markers.addTo（map）;并删除markers.addLayer（geojson）;和markers.removeLayer（geojson）;如建议。但后来没有出现任何标记。所以我添加了markers.addLayer（geojson）;返回并且它现在工作得更好，但是当您选择另一个要更新的值时，它仍会将其添加到显示的先前标记上，而不是删除以前的值。
var markers = L.markerClusterGroup();
var markers2 = L.markerClusterGroup();
markers.addTo(map);
markers2.addTo(map);
var geojson = null;
var geojson2 = null;
$('#dropdown_selector').change(function(){
if(map.hasLayer(geojson2)){
geojson2.clearLayers(); //it would remove all features
markers2.clearLayers(); //it would remove any geojson features added before
};
commentType = $(this).val();
setViewerFilter();
});
function setViewer(){
if(map.hasLayer(geojson)){
geojson.clearLayers(); //it would remove all features
markers.clearLayers(); //it would remove any geojson features added before
};
if(map.hasLayer(geojson2)){
geojson2.clearLayers(); //it would remove all features
markers2.clearLayers(); //it would remove any geojson features added before
};
$.getJSON("https://username.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM cartoDBdatabase", function(data, latlng) {
geojson = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconSize: [27, 27],
iconAnchor: [13, 27],
popupAnchor: [1, -24],
iconUrl: 'images/commentMarker.png'
})
})
},
onEachFeature: function (feature, layer) {
// ADD A POPUP WITH SOME INFO
layer.bindPopup("<h2>" + feature.properties.name + "</h2><hr><p><b>Comment:</b> " + feature.properties.description + "</p><p><b>User Address:</b> " + feature.properties.profile_address +"</p><p><b>Comment Address:</b> " + feature.properties.comment_address +"</p><p><b>Comment Type:</b> " + feature.properties.comment_type +"</p><p><b>Comment Type Other:</b> " + feature.properties.comment_type_other +"</p><p><b>Email:</b> " + feature.properties.email_address +"</p><p><b>Parcel ID:</b> " + feature.properties.parcel_id +"</p><p><b>User Type:</b> " + feature.properties.user_type +"</p><p><b>User Type Other:</b> " + feature.properties.user_type_other +"</p>" );
}
});
markers.addLayer(geojson);
});
}
function setViewerFilter(){
geojson.clearLayers(); //it would remove all features
markers.clearLayers(); //it would remove any geojson features added before
if(map.hasLayer(geojson2)){
geojson2.clearLayers(); //it would remove all features
markers2.clearLayers(); //it would remove any geojson features added before
};
$.getJSON("https://username.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM cartoDBdatabaseWHERE comment_type LIKE '"+commentType+"'", function(data, latlng) {
geojson2 = L.geoJson(data, {
pointToLayer: function(feature, latlng) {
return L.marker(latlng, {
icon: L.icon({
iconSize: [27, 27],
iconAnchor: [13, 27],
popupAnchor: [1, -24],
iconUrl: 'images/commentMarker.png'
})
})
},
onEachFeature: function (feature, layer) {
// ADD A POPUP WITH SOME INFO
layer.bindPopup("<h2>" + feature.properties.name + "</h2><hr><p><b>Comment:</b> " + feature.properties.description + "</p><p><b>User Address:</b> " + feature.properties.profile_address +"</p><p><b>Comment Address:</b> " + feature.properties.comment_address +"</p><p><b>Comment Type:</b> " + feature.properties.comment_type +"</p><p><b>Comment Type Other:</b> " + feature.properties.comment_type_other +"</p><p><b>Email:</b> " + feature.properties.email_address +"</p><p><b>Parcel ID:</b> " + feature.properties.parcel_id +"</p><p><b>User Type:</b> " + feature.properties.user_type +"</p><p><b>User Type Other:</b> " + feature.properties.user_type_other +"</p>" );
}
});
markers2.addLayer(geojson2);
});
}
setViewer();
答案 0 :(得分：0)
我假设你想要代码
markers.removeLayer(geojson);
markers.addLayer(geojson);
删除旧的geojson图层，然后添加新图层。但是这个代码在之后运行，你已经将geojson变量重新分配给新值，所以它只是删除＆amp;重新添加新图层。
要解决此问题，您需要在重新分配markers.removelayer(geojson)变量的值之前运行geojson 。
答案 1 :(得分：0)
当您使用map.hasLayer(geojson)时，请按照以下内容进行修改
if(map.hasLayer(geojson)){
geojson.clearLayers(); //it would remove all features
markers.clearLayers(); //it would remove any geojson features added before
};
同时修改$.getJSON
//remove below two lines
markers.removeLayer(geojson); //remove this line
markers.addLayer(geojson); //remove this line
//move this line from here
markers.addTo(map); //need to move this line from here and add up after L.markerClusterGroup();
当您发起L.markerClusterGroup()时，请将其添加到地图之后
var markers = L.markerClusterGroup();
markers.addTo(map); // add cluster object to map, after initializing