如何在OpenLayers-3中将SVG图像用作地图标记？

Question

我正在尝试使用SVG图像在OpenLayers-3(OL3)中创建地图"pin-drops"(即地图标记).

目前,我正在使用PNG图像作为引用ol.style.Icon源("src")属性属性的pindrops.但是,这使用SVG图像失败.有没有其他方式以相同的方式使用SVG？也许通过使用ol.style.Icon之外的参考甚至？在Open Layers中已经有很多内置的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(工作 - 但是旧的 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 没有正确定义宽度和高度。

我向标签添加了width和属性，例如：height<svg>

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0.75 0 30 45" xml:space="preserve">

之后我就可以像使用其他图像一样使用我的 svg 了。

Answer 3

将 SVG 转换为 Base 64 。这（链接）帮助了我。

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

例如： var svg = "convertedBase64";

然后

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

你已经完成了，可能比 SVG 多几个 Kbs，但这对我来说确实很完美。

Answer 4

只要 SVG 图像文件的内容类型为 .SVG 图标就可以正常工作image/svg+xml。另请注意，SVG 内部不支持外部引用。OpenLayers 3 简单地使用了drawImage2d 上下文的功能。您可以在此处找到有关 SVG 内容要求的更多详细信息： https: //developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas。