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

【问题标题】：Use SVG icon as marker in OpenLayers在 OpenLayers 中使用 SVG 图标作为标记
【发布时间】：2016-06-15 08:25:15
【问题描述】：

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

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 图片被截断了，如下图所示。 ( 图标应该是一个圆圈）

【问题讨论】：

标签： svg styles openlayers marker

【解决方案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
  })
});

与你的一些不同：

我在<svg> 中添加了width 和height 属性。这让浏览器知道生成的图像有多大。
我为图标添加了scale 属性以调整图像大小。
我使用utf8 而不是base64 编码（不重要）。

【讨论】：

感谢您的回答。但是为什么 viewBox 参数不起作用？
这行得通，但确实有一些警告，因为浏览器往往对 SVG 中使用的一些字符有问题，比如双引号、换行符和空格。我发现首先将 SVG 转换为 Base64（使用 window.btoa）然后将其包含为 data:image/svg+xml;base64, 后跟 base 64 编码图像更可靠。

【解决方案2】：

对我来说，解决方案是：

const iconMarkerStyle = new ol.style.Icon({
    src: './data/static_images/marker.svg',
    //size: [100, 100],
    offset: [0, 0],
    opacity: 1,
    scale: 0.35,
    //color: [10, 98, 240, 1]
})

然后直接在SVG文件中添加尺寸参数：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.81 215.81" width="14.5px" height="21.6px">
    <title>Asset 190-SVG</title>
</svg>

【讨论】：

【解决方案3】：

我在开放图层样式中使用 svg 图标作为图像 src。

var custstyle = new ol.style.Style({
 image: new ol.style.Icon({
    anchor: [0.5, 50],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: './Icon.svg',
  }),
});

【讨论】：