如何在OpenLayers-3中将SVG图像用作地图标记? [英] How can I use an SVG image as a map marker in OpenLayers-3?

问题描述

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

I am trying to create map "pin-drops" (ie. map markers) in OpenLayers-3 (OL3) using SVG images.

当前，我使用PNG图像作为引用ol.style.Icon来源("src")属性属性的pindrop.但是，这无法使用SVG图像.还有其他以相同方式使用SVG的方法吗?也许甚至使用ol.style.Icon以外的引用?开放层中已经有很多内置的SVG，因此应该是可能的，但是我还没有找到在OL3中实现此功能的方法.我应该考虑在OL3中执行此操作的其他方法吗?

Currently, I am using PNG images as the pindrops that reference the ol.style.Icon source ("src") property attribute just fine. However, this fails using an SVG image. Is there some other way to use an SVG in the same manner? Maybe by using a reference besides ol.style.Icon even? There is already a lot of built-in SVG in Open Layers so this should be possible, but I haven't found a way to get this working in OL3. Is there some other way to do this in OL3 that I should consider?

请注意:我们已经尝试过使用ol.Vector图层，但是当用户放大/缩小时，SVG图像的大小会增大/缩小，这是一种不足的解决方法.

Please note: we already tried using an ol.Vector layer, however when the user zooms in/out, the size of the SVG image grows/shrinks which is an inadequate workaround.

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库的OpenLayers-2(OL2)功能(而不是OL3的ol.js)，则该功能非常完美.图书馆).可悲的是，换出这些javascript文件失败.

Very similar functionality, is the below example I found online, is almost perfect if it weren’t for the fact that the example uses OpenLayers-2 (OL2) functionality which calls openlayers.js library (instead of OL3’s ol.js library). Sadly, swapping these javascript files out fails.

OL2(有效-但是旧 OL库):

OL2 (works -but is the old OL library):

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

在线搜索解决方案似乎只会让其他困惑的人搜索解决方案.

Searching online for a solution to this seems to produce only other confused people searching for a solution.

请帮助

FreeBeer

推荐答案

基于@ahocevar答案，您可以将数据URI用于SVG:

Based on @ahocevar answer, you can use data URIs for SVG:

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

这篇关于如何在OpenLayers-3中将SVG图像用作地图标记?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！