如何在OpenLayers 7中修改SVG标记的颜色

问题说明 #

通过外部SVG文件在OpenLayers 7地图中添加了黑色标记，尝试在ol.style.Icon中添加color或fill属性无法修改填充色，需要实现通过下拉框切换标记颜色的功能。

原因分析 #

OpenLayers的ol.style.Icon的color属性，仅对SVG内部使用currentColor作为填充/描边颜色的元素生效。如果原始SVG的填充色是硬编码的固定值（比如#000），直接设置color属性不会产生任何效果。

解决方案 #

方案1：修改原始SVG文件（推荐） #

将SVG内部所有需要变色的元素的fill属性改为currentColor，之后就可以直接通过ol.style.Icon的color属性控制颜色：

const markerStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 1],
        scale: 0.06,
        src: '修改后的SVG地址',
        color: '#eb3434' // 直接设置目标颜色即可生效
    })
});

方案2：动态修改SVG内容（无需修改原始文件） #

如果无法修改原始SVG，可以通过JS动态获取SVG内容，替换其中的填充色，再转为Data URL赋值给Icon：

修改后的完整代码

var london = [-0.1276474, 51.507321899999994];

const baseMapTile = new ol.layer.Tile({
    source: new ol.source.OSM(),
    visible: true,
    title: 'OSMStandard'
});

const marker = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
}); 

// 初始化/更新标记颜色的函数
function setMarkerColor(color) {
    fetch('https://testing.52weekdog.com/images/markers/marker_marker01_black.svg')
        .then(response => response.text())
        .then(svgContent => {
            // 替换SVG中的黑色填充色为目标颜色
            const modifiedSvg = svgContent.replace(/#000000/g, color);
            // 将修改后的SVG转为Base64格式的Data URL
            const dataUrl = 'data:image/svg+xml;base64,' + btoa(modifiedSvg);
            // 创建新样式并设置给标记
            const markerStyle = new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 1],
                    scale: 0.06,
                    src: dataUrl
                })
            });
            marker.setStyle(markerStyle);
        });
}

// 初始化时设置默认黑色
setMarkerColor('#000000');

const vectorSource = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [marker]
    })
});

const map = new ol.Map({
    view: new ol.View({          
        center: ol.proj.fromLonLat(london),
        zoom: 15,
    }),
    layers: [baseMapTile, vectorSource],
    target: 'map'
});

// 监听颜色选择器的变化事件
document.getElementById('markerColor').addEventListener("change", function() {
    const newHex = this.value;
    setMarkerColor(newHex);
});

代码说明

• 通过fetch获取原始SVG的文本内容
• 使用replace方法批量替换SVG中所有的黑色填充值为选中的目标颜色
• 将修改后的SVG内容转为Base64格式的Data URL，作为Icon的src属性值
• 动态更新标记的样式，实现颜色切换的效果

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