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

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

目前，我使用PNG图像作为参考ol.style.Icon source（“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.js库（而不是OL3的ol.js库）的OpenLayers-2（OL2）功能，那么它几乎是完美的。遗憾的是，交换这些javascript文件失败了

---

OL2（有效-但是旧的OL库）：

---

在线搜索解决方案似乎只会产生其他困惑的人来搜索解决方案

请帮忙

---

只要SVG图像文件的内容类型是

image/SVG+xml

，FreeBeer

drawImage功能。您可以在这里找到有关SVG内容要求的更多详细信息：。

我在显示图标图像时也遇到了问题，ahocevar的回答帮助我解决了这个问题 解决了我的问题，但我还必须搜索php头，搜索SVG 如果您是或其他看到此答案的人正在使用php生成SVG，则必须使用header函数来标识内容类型

header('Content-type: image/svg+xml'); /* this line will do the magic */
echo '<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>';

header（'Content-type:image/svg+xml'）；/*这句话会很神奇*/
回声'
';

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

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

新ol.style.style({
图片：新ol.style.Icon({
主播：[0,0]，
src:'data:image/svg+xml；utf8，/*svg数据*/'
})
});

我也有同样的问题，但甚至没有为图像提供正确的mime类型

这归结为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。

将svg转换为Base 64。这个（）帮助了我

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

例如：

var svg=“convertedBase64”

然后

您已经完成了，可能比SVG多了几Kbs，但这对我来说非常适合。
基于SoonDead的回答，我不得不想出一种方法，在不接触源代码的情况下将宽度和高度添加到SVG。使用angular，我就是这么做的：

$http.get('path/to/image.svg').then(function (response) {
  // create element
  var svgEl = angular.element(response.data);

  // set width and height
  svgEl.attr('width', '50px');
  svgEl.attr('height', '50px');

  // base64 encode
  var base64Svg = btoa(unescape(encodeURIComponent(svgEl[0].outerHTML)));

  // create the style
  var style = new ol.style.Style({
    image: new ol.style.Icon({
      src: 'data:image/svg+xml;base64,'+base64Svg,
      imgSize: [50, 50],
      size: [50, 50],
    })
  });

 // apply the style
 feature.setStyle(style);
});

虽然有点冗长，但它似乎可以完成这项工作。
仅供参考，SVG在OpenLayers 2中是受支持的渲染器，但在OpenLayers 3中不受支持。ol3中支持的渲染器是：DOM、Canvas和WebGL。这是否意味着本地文件系统ol3映射不能使用SVG图标？我当然不能让它工作。这对我来说是有效的，只要我记得在宽度和高度值中添加“px”。花了一个小时调试……这是一个很好的解决方案，比base64更好，因为您甚至可以轻松更改原始SVG内容（更改填充和笔划颜色）。要缩放SVG，可以通过图标样式的“scale”（0-1=0%-100%）属性直接进行缩放
$http.get('path/to/image.svg').then(function (response) {
  // create element
  var svgEl = angular.element(response.data);

  // set width and height
  svgEl.attr('width', '50px');
  svgEl.attr('height', '50px');

  // base64 encode
  var base64Svg = btoa(unescape(encodeURIComponent(svgEl[0].outerHTML)));

  // create the style
  var style = new ol.style.Style({
    image: new ol.style.Icon({
      src: 'data:image/svg+xml;base64,'+base64Svg,
      imgSize: [50, 50],
      size: [50, 50],
    })
  });

 // apply the style
 feature.setStyle(style);
});