Vue3+OpenLayers中如何为Draw动态设置标记的icon-src样式？

你当前的问题出在样式配置上——你用的是圆形标记的样式属性，要显示自定义图标，得换成Icon类型的样式配置，并且通过动态函数读取每个Feature的图标路径。

具体步骤： #

1. 给Feature绑定图标路径属性
   创建标记Feature时，把选中的图标路径存为Feature的自定义属性：

// 示例：创建Feature时传入坐标和图标路径
const pointFeature = new Feature({
  geometry: new Point(你的坐标),
  iconSrc: '选中的图标路径.png' // 比如用户选的图标路径
});
this.source.addFeature(pointFeature);

2. 修改VectorLayer的样式配置
   把原来的静态circle样式换成动态Style函数，用Icon渲染：

this.vector = new VectorLayer({
  source: this.source,
  style: (feature) => {
    return new Style({
      image: new Icon({
        src: feature.get('iconSrc'), // 动态获取当前Feature的图标路径
        scale: 0.8, // 可调整图标缩放比例
        anchor: [0.5, 1] // 设置图标锚点为底部中心，适配地图标记的常规显示
      })
    });
  }
});

为什么原来的代码不行？ #

你之前配置的circle-radius、circle-fill-color这些是用来渲染圆形标记的属性，和自定义图标（Icon）完全是两套样式体系。必须用Icon类型的image样式，并且通过style函数动态读取每个Feature的图标属性，才能实现不同标记显示对应图标的效果。

这样配置后，你选择图标并创建Feature时，对应的图标就会显示在地图上，同时不会影响你导出经纬度到CSV的功能。

内容的提问来源于stack exchange，提问作者megaMind