Leaftjs 删除所有当前的多边形,并重新绘制所有
Leaftjs remove all current polygoones, and redraw all
我正在做一个项目,我正在使用 Leaftjs(1.6)。 https://api.maptiler.com/maps/streets 用于图块层。
第一次,多边形绘制正确。在我的站点中,我使用了一个输入范围,用户可以在其中更改输入范围,它使用该值将更新多边形、新颜色和弹出值。
因此,在输入范围回调中,我首先尝试删除所有之前的多边形,然后重新绘制。
如果用户平滑地更改输入范围,它会很好地工作。
但是当用户快速移动输入范围时就会出现问题。
我得到了这种地图输出。
这是我的输入范围代码
<input type="range" min="1" max="100" value="100" class="slider" id="myRange">
为了删除多边形,我使用了
map.eachLayer(function (layer) {
if (!!layer.toGeoJSON) {
map.removeLayer(layer);
//console.log(layer)
} else {
console.log("I am not removing:", layer)
}
});
和
for (i in map._layers) {
if (map._layers[i]._path != undefined) {
try {
map.removeLayer(map._layers[i]);
} catch (e) {
console.log("problem with " + e + map._layers[i]);
}
} else {
console.log(i)
}
}
但两者都显示出相似的结果。
这是我的完整代码,
var slider = document.getElementById("myRange");
var output = document.getElementById("rangeValue");
output.innerHTML = slider.value; // Display the default slider value
var date = Date.parse(myDate)
output.innerHTML = date.toString('d-M-yy');
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function () {
var date2 = Date.parse(myDate)
var current = date2.add(-(100 - this.value)).day();
output.innerHTML = current.toString('d-M-yy');
map.eachLayer(function (layer) {
if (!!layer.toGeoJSON) {
map.removeLayer(layer);
//console.log(layer)
} else {
console.log("I am not removing:", layer)
}
});
// for (i in map._layers) {
// if (map._layers[i]._path != undefined) {
// try {
// map.removeLayer(map._layers[i]);
// } catch (e) {
// console.log("problem with " + e + map._layers[i]);
// }
// } else {
// console.log(i)
// }
// }
$.ajax({
url: 'global/',
data: {
'date': current.toString('yyyy-MM-dd')
},
dataType: 'json',
success: function (data) {
if (data != null) {
//console.log("Got data")
//console.log(data.length)
for (var i = 0; i < data.length; i++) {
var coun = data[i];
try {
var latlngs = countriesLocation[coun.country];
if (latlngs != null) {
html = "updated popup data"
var color = '#ef0909';
if (coun.value > 500_000) {
color = '#DF0101';
} else if (coun.value > 200_000) {
color = '#ea2c2c';
} else {
color = '#BEF781';
}
var polygon = L.polygon(latlngs, {
color: color, fillColor: color,
fillOpacity: 0.3
}).addTo(map);
polygon.bindPopup(html);
// console.log(coun.country)
// console.log(i)
} else {
//console.log("I have no lat lon " + coun.country)
}
} catch (e) {
//console.log(e)
}
}
}
}
});
}
我该如何解决这个问题并获得清晰的输出?
将您的多边形添加到 L.featureGroup 而不是地图。然后你可以调用 fg.clearLayers()
并删除所有图层。
另外我会清除ajax中的图层,所以如果有多个请求,则不会添加多次。
var fg = L.featureGroup().addTo(map);
slider.oninput = function () {
var date2 = Date.parse(myDate)
var current = date2.add(-(100 - this.value)).day();
output.innerHTML = current.toString('d-M-yy');
fg.clearLayers();
$.ajax({
url: 'global/',
data: {
'date': current.toString('yyyy-MM-dd')
},
dataType: 'json',
success: function (data) {
if (data != null) {
fg.clearLayers();
for (var i = 0; i < data.length; i++) {
var coun = data[i];
try {
var latlngs = countriesLocation[coun.country];
if (latlngs != null) {
html = "updated popup data"
var color = '#ef0909';
if (coun.value > 500_000) {
color = '#DF0101';
} else if (coun.value > 200_000) {
color = '#ea2c2c';
} else {
color = '#BEF781';
}
var polygon = L.polygon(latlngs, {
color: color, fillColor: color,
fillOpacity: 0.3
}).addTo(fg);
polygon.bindPopup(html);
} else {
//console.log("I have no lat lon " + coun.country)
}
} catch (e) {
//console.log(e)
}
}
}
}
});
}
我正在做一个项目,我正在使用 Leaftjs(1.6)。 https://api.maptiler.com/maps/streets 用于图块层。
第一次,多边形绘制正确。在我的站点中,我使用了一个输入范围,用户可以在其中更改输入范围,它使用该值将更新多边形、新颜色和弹出值。
因此,在输入范围回调中,我首先尝试删除所有之前的多边形,然后重新绘制。 如果用户平滑地更改输入范围,它会很好地工作。
但是当用户快速移动输入范围时就会出现问题。
我得到了这种地图输出。
这是我的输入范围代码
<input type="range" min="1" max="100" value="100" class="slider" id="myRange">
为了删除多边形,我使用了
map.eachLayer(function (layer) {
if (!!layer.toGeoJSON) {
map.removeLayer(layer);
//console.log(layer)
} else {
console.log("I am not removing:", layer)
}
});
和
for (i in map._layers) {
if (map._layers[i]._path != undefined) {
try {
map.removeLayer(map._layers[i]);
} catch (e) {
console.log("problem with " + e + map._layers[i]);
}
} else {
console.log(i)
}
}
但两者都显示出相似的结果。
这是我的完整代码,
var slider = document.getElementById("myRange");
var output = document.getElementById("rangeValue");
output.innerHTML = slider.value; // Display the default slider value
var date = Date.parse(myDate)
output.innerHTML = date.toString('d-M-yy');
// Update the current slider value (each time you drag the slider handle)
slider.oninput = function () {
var date2 = Date.parse(myDate)
var current = date2.add(-(100 - this.value)).day();
output.innerHTML = current.toString('d-M-yy');
map.eachLayer(function (layer) {
if (!!layer.toGeoJSON) {
map.removeLayer(layer);
//console.log(layer)
} else {
console.log("I am not removing:", layer)
}
});
// for (i in map._layers) {
// if (map._layers[i]._path != undefined) {
// try {
// map.removeLayer(map._layers[i]);
// } catch (e) {
// console.log("problem with " + e + map._layers[i]);
// }
// } else {
// console.log(i)
// }
// }
$.ajax({
url: 'global/',
data: {
'date': current.toString('yyyy-MM-dd')
},
dataType: 'json',
success: function (data) {
if (data != null) {
//console.log("Got data")
//console.log(data.length)
for (var i = 0; i < data.length; i++) {
var coun = data[i];
try {
var latlngs = countriesLocation[coun.country];
if (latlngs != null) {
html = "updated popup data"
var color = '#ef0909';
if (coun.value > 500_000) {
color = '#DF0101';
} else if (coun.value > 200_000) {
color = '#ea2c2c';
} else {
color = '#BEF781';
}
var polygon = L.polygon(latlngs, {
color: color, fillColor: color,
fillOpacity: 0.3
}).addTo(map);
polygon.bindPopup(html);
// console.log(coun.country)
// console.log(i)
} else {
//console.log("I have no lat lon " + coun.country)
}
} catch (e) {
//console.log(e)
}
}
}
}
});
}
我该如何解决这个问题并获得清晰的输出?
将您的多边形添加到 L.featureGroup 而不是地图。然后你可以调用 fg.clearLayers()
并删除所有图层。
另外我会清除ajax中的图层,所以如果有多个请求,则不会添加多次。
var fg = L.featureGroup().addTo(map);
slider.oninput = function () {
var date2 = Date.parse(myDate)
var current = date2.add(-(100 - this.value)).day();
output.innerHTML = current.toString('d-M-yy');
fg.clearLayers();
$.ajax({
url: 'global/',
data: {
'date': current.toString('yyyy-MM-dd')
},
dataType: 'json',
success: function (data) {
if (data != null) {
fg.clearLayers();
for (var i = 0; i < data.length; i++) {
var coun = data[i];
try {
var latlngs = countriesLocation[coun.country];
if (latlngs != null) {
html = "updated popup data"
var color = '#ef0909';
if (coun.value > 500_000) {
color = '#DF0101';
} else if (coun.value > 200_000) {
color = '#ea2c2c';
} else {
color = '#BEF781';
}
var polygon = L.polygon(latlngs, {
color: color, fillColor: color,
fillOpacity: 0.3
}).addTo(fg);
polygon.bindPopup(html);
} else {
//console.log("I have no lat lon " + coun.country)
}
} catch (e) {
//console.log(e)
}
}
}
}
});
}