如何将不同的图标应用到克隆的功能中

Question

我实现了一个绘制图标而不是常规形状的功能，如下图所示：

我打算在此功能（以及许多其他功能）旁边添加一个图标提醒。因此，为了尝试实现这一点，我正在克隆该功能并尝试在正在创建的样式中应用不同的图像，如下面的代码：

export const setIconEffect = (feature: Feature, event: any) => {
    const vectorContext = getVectorContext(event);

    // clone the feature geometry
    const flashGeom = feature.getGeometry().clone();

    // creates a new style to be applied into this cloned feature
    const style = new Style({
        image: new Icon({
            src: 'assets/images/mapElements/warning-icon.png',
            scale: 0.1,
            imgSize: toSize(500),
            anchorOrigin: IconOrigin.BOTTOM_RIGHT,
            anchor: [1.8, 0.05],
        }),
    });
    // set it into the cloned geometry
    vectorContext.setStyle(style);
    vectorContext.drawGeometry(flashGeom);
};

问题是，当我尝试应用不同的 src 时，它不起作用，但是，如果我使用相同的 src，它就起作用了。

应用不同的 src 它只是像往常一样显示标记。应用相同的 src 它可以正确绘制图标，但是作为副本（这不是目的）。示例如下：

Answer 1

定义样式后，我们需要通过执行以下操作强制加载图像：

style.getImage().load();

如何将不同的图标应用到克隆的功能中

How to apply a different icon into a cloned feature

openlayers

openlayers-6