將樣式附加到矢量圖層上的功能時，圖標不顯示在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（）來計算幾何中心和創建型點的一個新的。