将样式附加到矢量图层上的功能时，图标不显示在OpenLayers上

问题描述：

我试图在圆的中心显示一个图标。这里是我的代码：将样式附加到矢量图层上的功能时，图标不显示在OpenLayers上

的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，帆布...

谢谢！

答

好的，我找到了解决方案。 style.Icon仅适用于其属性'geometry'类型为geom.Point（或者如果该特征拥有一个点作为几何类型）。

为了避开与任何类型的几何形状我使用的方法getExtent（）来计算几何中心和创建型点的一个新的。

将样式附加到矢量图层上的功能时，图标不显示在OpenLayers上

相关推荐