將樣式附加到矢量圖層上的要素時，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類型。