我有一张地图，其中的多边形在第一次单击地图时以红色突出显示。当单击另一个多边形时（要素道具发生变化），新要素将按预期渲染，并且它们会与旧要素一起显示在地图上。在尝试通过调用
vectorLayer.getSource().removeFeature(feature);vectorLayer.GetSource().GetFeatures()请执行以下步骤和代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css"
type="text/css"
/>
<style>
html,
body {
height: 100%;
margin: 0;
}
#map {
width: 100%;
height: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
target: "map",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
view: new ol.View({
projection: "EPSG:4326",
center: [7.07999451721341, 51.16739903438118],
zoom: 17,
}),
});
var Gebaeude_Photovoltaik_2016 = new ol.layer.Tile({
opacity: 0.7,
source: new ol.source.TileWMS({
params: { LAYERS: "Gebaeude_Photovoltaik_2016" },
url: "https://geoportal.solingen.de/SG_WMS2/service.svc/get?",
projection: "EPSG:25832",
}),
});
map.addLayer(Gebaeude_Photovoltaik_2016);
map.on("singleclick", function (evt) {
const coordinate = evt.coordinate;
var tol = 0.000001;
var bbox = [evt.coordinate[0] - tol,evt.coordinate[1] - tol,evt.coordinate[0] + parseInt(tol),evt.coordinate[1] + parseInt(tol),];
var url =
"https://geoportal.solingen.de/SG_WFS2/service.svc/get?service=wfs&request=GetFeature&version=1.1.0&format=GML2&typename=Gebaeude_Photovoltaik_2016" +
"&srsName=EPSG:4326&bbox=" +bbox;
fetch(url)
.then((response) => response.text())
.then((text) => {
const source = new ol.source.Vector({
features: new ol.format.WFS().readFeatures(text, {
dataProjection: "EPSG:4326",
featureProjection: map.getView().getProjection(),
}),
});
map.addLayer(
new ol.layer.Vector({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: "red",
width: 5,
}),
}),
})
);
map.getView().setCenter(source.getExtent());
});
});
</script>
</body>
</html>问题：有没有方法（最佳策略），在通过新点击添加新功能之前始终清除ol源。 一个例子将不胜感激。谢谢！
最简单的方法是在添加新功能之前清除源代码
const source = new ol.source.Vector();
map.addLayer(
new ol.layer.Vector({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: "red",
width: 5,
}),
}),
})
);
map.on("singleclick", function (evt) {
const coordinate = evt.coordinate;
var tol = 0.000001;
var bbox = [evt.coordinate[0] - tol,evt.coordinate[1] - tol,evt.coordinate[0] + parseInt(tol),evt.coordinate[1] + parseInt(tol),];
var url =
"https://geoportal.solingen.de/SG_WFS2/service.svc/get?service=wfs&request=GetFeature&version=1.1.0&format=GML2&typename=Gebaeude_Photovoltaik_2016" +
"&srsName=EPSG:4326&bbox=" +bbox;
fetch(url)
.then((response) => response.text())
.then((text) => {
const features = new ol.format.WFS().readFeatures(text, {
dataProjection: "EPSG:4326",
featureProjection: map.getView().getProjection(),
});
source.clear();
source.addFeatures(features);
map.getView().setCenter(source.getExtent());
});
});