如何使用SVG图像作为OpenLayers-3中的地图标记？

Question

我正在尝试创建地图“针滴”。地图标记)在OpenLayers-3 (OL3)中使用SVG图像。

目前，我正在使用PNG图像作为引用ol.style.Icon源(“src”)属性属性的针尖。但是，使用SVG映像失败。是否有其他方法以同样的方式使用SVG？甚至可以使用ol.style.Icon以外的引用吗？在开放层中已经有很多内置的SVG，所以这应该是可能的，但是我还没有找到在OL3中实现这个功能的方法。在OL3中还有其他方法可以让我考虑吗？

请注意:我们已经尝试使用ol.Vector层，但是当用户放大/输出时，SVG映像的大小会增长/缩小，这是一个不适当的解决方法。

OL3 (失败)：

var createMapMarkerImage = function() {
    return function(feature, resolution) {
        var iconStyle = new ol.style.Style({
            image: new ol.style.Icon( ({
                src: 'img/map_pindrop.svg'   // OL3 doesn’t like this, but accepts a .PNG just fine
            }))
        });
        return [iconStyle];
    };
};

下面的例子是我在网上发现的非常类似的功能，如果没有使用OpenLayers-2 (OL2)功能(它调用openlayers.js库，而不是OL3的ol.js库)，那么它几乎是完美的。遗憾的是，交换这些javascript文件失败了。

OL2 (works -but是 OL库)：

http://dev.openlayers.org/sandbox/camptocamp/tipi/examples/vector-symbols.html

在线搜索这一问题的解决方案似乎只会产生其他困惑的人在寻找解决方案。

请帮帮忙，

FreeBeer

Answer 1

基于@ahocevar答案，您可以为SVG使用数据URI：

new ol.style.Style({
  image: new ol.style.Icon({
    anchor: [0, 0],
    src: 'data:image/svg+xml;utf8,<svg>/* SVG DATA */</svg>'
  })
});

Answer 2

将SVG转换为基本64。这个(链接)帮助了我。

复制基64并将其用作javascript中的字符串。

例：var svg = "convertedBase64";

然后

var icon = new ol.style.Icon({
        src:'data:image/svg+xml;base64,'+svg ,
        other props
});

你已经完成了，也许比SVG多几个Kbs，但这对我来说确实是完美的。

Answer 3

只要SVG图像文件的内容类型是image/svg+xml，SVG图标就能正常工作。还请注意，SVG内部不支持任何外部引用。OpenLayers 3只使用2d上下文的drawImage函数。您可以在这里找到更多关于SVG内容需求的详细信息：画布。