Openlayers 7.1.0：添加/删除功能后地图未更新

Question

我正在制作一个简单的函数来通过 Openlayers 中的多边形选择要素。 以下代码不是完整代码，而是最重要的部分。

这是定义我的图层的代码

let Assetlayer = new VectorLayer({
  source: new VectorSource(),
  style: new Style({
    image: new Circle({
        radius: 7,
        fill: new Fill({ color: '#ffcc33' }),
        stroke: new Stroke({ color: 'black', width: 1 })
    })
  }) 
});
map.addLayer(Assetlayer);

let SelectionLayer = new VectorLayer({
    source: new VectorSource()
});
map.addLayer(SelectionLayer);

let AssetSelectedlayer = new VectorLayer({
  source: new VectorSource(),
  style: new Style({
      image: new Circle({
          radius: 10,
          fill: new Fill({ color: '#f542ec' }),
          stroke: new Stroke({ color: 'black', width: 1 })
      })
  }) 
});
map.addLayer(AssetSelectedlayer);

这是我使用多边形进行选择的函数

btnSelectByPolygon.addEventListener('click', () => {
drawInteraction = new Draw({
    source: SelectionLayer.getSource(),
    type: 'Polygon'
})
drawInteraction.on('drawend', (event) => {
    let poly = event.feature;
    let features = Assetlayer.getSource().getFeatures();

    features.forEach((feat) => {
        if poly.getGeometry().intersectsCoordinate(feat.getGeometry().getCoordinates())){
            console.log('Feature inside polygon')
            let clone = feat.clone();
            AssetSelectedlayer.getSource().addFeature(clone);
        }
    })
    SelectionLayer.getSource().clear();
    console.log(`Features in SelectionLayer: ${SelectionLayer.getSource().getFeatures().length}`)
    console.log(`Features in AssetSelectedlayer: ${AssetSelectedlayer.getSource().getFeatures().length}`)
    map.removeInteraction(drawInteraction)
})
map.addInteraction(drawInteraction);

}）

所以我的目标是在SelectionLayer中绘制一个多边形。然后，我检查所有要素是否位于该多边形内。如果在多边形内部，则将该要素添加到 AssetSelectedlayer。

代码似乎工作正常，但地图没有更新。 这是选择之前的情况：

选择后：

在 DevTools 中，它显示我的多边形已从 SelectionLayer 中删除，所选要素已添加到 AssetSelected 中。但地图没有更新，仍然显示多边形，并且不显示添加到 AssetSelectedlayer 的要素。

当我通过双击关闭多边形时，地图会放大，这是绘图时的正常行为。

为什么这没有按预期工作？

Answer 1

试试这个

btnSelectByPolygon.addEventListener('click', () => {
    drawInteraction = new Draw({
        type: 'Polygon'
    })
    drawInteraction.on('drawend', (event) => {
        let poly = event.feature;
        let features = Assetlayer.getSource().getFeatures();
    
        features.forEach((feat) => {
            if poly.getGeometry().intersectsCoordinate(feat.getGeometry().getCoordinates())){
                console.log('Feature inside polygon')
                let clone = feat.clone();
                AssetSelectedlayer.getSource().addFeature(clone);
            }
        })
        setTimeout(0, () =>
          map.removeInteraction(drawInteraction)
        );
    })
    map.addInteraction(drawInteraction);
})