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 仅在其属性为“几何”时才有效。是 geom.Point 类型（或者如果该要素拥有一个点作为几何类型）。

要使用任何类型的几何体，我使用 getExtent（）方法来计算几何体的中心，然后创建一个类型为 Point 的新类型。< / p>

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

1 个答案: