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

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?

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 (fails):

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];

};

};

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 (works -but is the old OL library):

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

Please help,

FreeBeer

解決方案

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 DATA */'

})

});

總結

以上是生活随笔為你收集整理的openlayers加载svg,如何在OpenLayers-3中将SVG图像用作地图标记？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。