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

Question

我什至不确定这是否可行，但我正在尝试更改开放图层 7 地图上标记的颜色。使用以下代码行从 svg 文件添加标记：

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

    const markerStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5,1],
            scale: 0.06,
            src: 'https://testing.52weekdog.com/images/markers/marker_marker01_black.svg'
        })
    });

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

有没有办法改变外部 svg 图像的填充颜色？目前全黑。我试过将“颜色”和“填充”都添加到 markerStyle 的图像元素中，但没有成功。我认为演示 (https://openlayers.org/en/latest/examples/icon-color.html) 可能是相关的，但我不确定它是如何应用的。

任何有关如何解决此问题的帮助，或者如果需要，可能采取不同的根源，将不胜感激。

这是我要开始工作的页面JSFiddle.

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)),
    }); 
    const markerStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5,1],
            scale: 0.06,
            src: 'https://testing.52weekdog.com/images/markers/marker_marker01_black.svg'
        })
    });
    const vectorSource = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [marker]
                }),
                style: markerStyle
    });
    marker.setStyle([markerStyle]);
    
    
    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() {
        
        //change the color of the icon
        newHex = document.getElementById('markerColor').value;
        alert('Change marker icon color to ' + newHex);
        
        
        
    
});

#map{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding: 5px;
    float: left;
    margin-right: 15px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<div id="map" class="map"></div>    
<div id="info" class="info">
    <h2>Change Marker Image</h2>
    <select name="markerColor" id="markerColor">
        <option value="#000000">Black</option>
        <option value="#eb3434">Red</option>
        <option value="#345ceb">Blue</option>
    </select>
</div>

Answer 1

基于白色图标的工作示例：

var svg = "data:image/svg+xml;charset=UTF-8,%3csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3e%3ctitle%3emap-marker-3-svgrepo-com-svg%3c/title%3e%3cstyle%3e .s0 %7b fill: %23ffffff %7d %3c/style%3e%3cg id='Layer'%3e%3cpath id='Layer' fill-rule='evenodd' class='s0' d='m429.9 173.9c0 96-154.7 338.1-173.9 338.1-19.2 0-173.9-242.1-173.9-338.1 0-96 77.9-173.9 173.9-173.9 96 0 173.9 77.9 173.9 173.9zm-107.4 0c0-36.7-29.8-66.5-66.5-66.5-36.7 0-66.5 29.8-66.5 66.5 0 36.7 29.8 66.5 66.5 66.5 36.7 0 66.5-29.8 66.5-66.5z'/%3e%3c/g%3e%3c/svg%3e"

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)),
    }); 
    let markerStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5,1],
            scale: 0.06,
            src: svg,
            color: document.getElementById('markerColor').value
        })
    });
    const vectorSource = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [marker]
                }),
                style: markerStyle
    });
    marker.setStyle([markerStyle]);
    
    
    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() {
        
        //change the color of the icon
        newHex = document.getElementById('markerColor').value;
        alert('Change marker icon color to ' + newHex);
        
        
          markerStyle = new ol.style.Style({
              image: new ol.style.Icon({
                  anchor: [0.5, 1],
                  scale: 0.06,
                  src: svg,
                  color: newHex
              })
          });
          marker.setStyle([markerStyle]);
    
});

#map{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding: 5px;
    float: left;
    margin-right: 15px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<div id="map" class="map"></div>    
<div id="info" class="info">
    <h2>Change Marker Image</h2>
    <select name="markerColor" id="markerColor">
        <option value="#000000">Black</option>
        <option value="#eb3434">Red</option>
        <option value="#345ceb">Blue</option>
    </select>
</div>