将样式附加到矢量图层上的要素时，OpenLayers 上不显示图标

Question

我正在尝试在圆圈的中心显示一个图标。 这是我的代码：

jsFiddle : http://jsfiddle.net/61dkv8tr/2/

    (function(){

    var base64img = "data:image/gif;base64,R0lGODlhPQBEAPeoAJ[...]==";

    var extent = [0, 0, 400, 400]; 

    var sourceV = new ol.source.Vector({ wrapX: false });         

    var map = new ol.Map({
        renderer: 'canvas',
        target: 'divMap',
        layers: [        
          new ol.layer.Vector({
            source: sourceV
          })
        ],
        restrictedExtent: extent,
        view: new ol.View({        
          center: ol.extent.getCenter(extent),
          extent: extent,   //world limit drag map       
          resolution : 1
        })
      });   

    var radius = 50;
    var x = 200;
    var y = 200;

    var circleGeom = new ol.geom.Circle([x, y], radius);   
    var feature = new ol.Feature(circleGeom);
    feature.setStyle(new ol.style.Style ({
    stroke: new ol.style.Stroke({
      color: 'black',
      width: 1     
    }),
    image: new ol.style.Icon({
      src: base64img,
      color: '#4271AE',
      crossOrigin: 'anonymous',
    })
    }));  

    sourceV.addFeature(feature);

})();

渲染只是圆的描边。我错过了什么吗？ 图标是一辆红色的小巴士。

PS：我也尝试过使用相对 URL、绝对 URL、画布...

谢谢！

Answer 1

好的，我找到了解决方案。 style.Icon 仅在其属性 'geometry' 的类型为 geom.Point 时才有效（或者如果该要素拥有一个点作为几何类型）。

为了处理任何类型的几何，我使用方法 getExtent() 来计算几何的中心，并创建一个新的 Point 类型。