在OpenLayers中使用SVG图标作为标记

Question

我试图在Openlayers-3中将svg图标作为标记.在我的代码中.

var svg = '<?xml version="1.0"?>'
            + '<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">'
            + '<circle cx="60" cy="60" r="60"/>'
            + '</svg>';

var style = new ol.style.Style({
            image: new ol.style.Icon({
                opacity: 1,
                src: 'data:image/svg+xml;base64,' + btoa(svg)
            })
        });

但我的svg图像被截断,如下图所示.(图标应为圆圈)

Answer 1

这是一个在图标符号化器中显示内联SVG的示例:http://jsfiddle.net/eze84su3/

这是相关代码:

var svg = '<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">'
    + '<circle cx="60" cy="60" r="60"/>'
    + '</svg>';

var style = new ol.style.Style({
  image: new ol.style.Icon({
    opacity: 1,
    src: 'data:image/svg+xml;utf8,' + svg,
    scale: 0.3
  })
});

与您的一些差异:

• 我添加width并height归属于<svg>.这样浏览器就可以知道生成图像的大小.
• 我scale在图标中添加了一个属性来调整图像大小.
• 我用utf8而不是base64编码(不重要).