如何在 OpenLayers-3 上使用 SVG 圖像作為圖層

Question

如何將 SVG 圖像用作 OpenLayers-3 的圖層（而不是地圖標記）

使用任何ol.source.Vector和ol.format.Feature實例時，我無法獲得我的 SVG 圖像的任何輸出。

小例子：

var mapLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: 'image.svg',
        format: new ol.format.Feature() // http://openlayers.org/en/v3.12.1/apidoc/ol.format.Feature.html
    }),
}); 

使用 ImageStatic 層時我能夠獲得輸出，但這使用/生成（？）靜態圖像，因此 SVG 的優勢消失了。

例子：

// Not sure if I need this for SVG, but is is required for an image
var extent = [0, 0, 1000, 1000]; // random image size
var projection = new ol.proj.Projection({
    code: 'test',
    units: 'pixels',
    extent: extent
});

var mapLayer = new ol.layer.Image({
    source: new ol.source.ImageStatic({
        url: 'image.svg',
        projection: projection,
        imageExtent: extent
    })
});

我已經嘗試過將Content-type:設置為image/svg+xml的技巧，但這對我一點幫助都沒有。

所以，再一次：我如何（如果可能的話）將 SVG 圖像層與 OpenLayers-3 一起使用？

Answer 1

您不能將ol.source.Vector與 svg 文件一起使用，但 OL3 可以將 svg 文件顯示為圖像。

縮放時圖像保持清晰。

我修改了官方的靜態圖片示例，將png文件替換為svg文件。 請參閱下面的可運行示例。

 var extent = [0, 0, 512, 512]; var projection = new ol.proj.Projection({ code: 'static-image', units: 'pixels', extent: extent }); var map = new ol.Map({ layers: [ new ol.layer.Image({ source: new ol.source.ImageStatic({ url: 'https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg', projection: projection, imageExtent: extent }) }) ], target: 'map', view: new ol.View({ projection: projection, center: ol.extent.getCenter(extent), zoom: 0 }) });

 <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/> <div id="map" class="map"></div>

Answer 2

如今， 2018 年， Open Layer 4的示例：

 var svgComment = '<svg width="160" height="160" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" viewPort="0 0 160 160" class="svgClass">' + '<circle cx="30" cy="30" r="10" stroke="rgb(0, 191, 255)" stroke-width="1" fill="none" opacity="0.8">' + '<animate attributeType="CSS" attributeName="stroke-width" from="1" to="30" dur="0.5s" begin="0s" repeatCount="indefinite" />' + '<animate attributeType="CSS" attributeName="opacity" from="0.8" to="0.2" dur="0.5s" begin="0s" repeatCount="indefinite" />' + '</circle>' + '<circle cx="30" cy="30" r="10" fill="rgba(0,0,0,0.8)">' + '</circle>' + '</svg>'; //Test SVG //var img = document.createElement('img'); //img.src=src; //document.body.append(img); var commentStyle = new ol.style.Style({ image: new ol.style.Icon({ src: 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgComment) }) }); var vectorSource = new ol.source.Vector({ features: [ new ol.Feature({ geometry: new ol.geom.Point([0, 0]) }) ] }); var vectorLayer = new ol.layer.Vector({ name: 'Comments', style: commentStyle, source: vectorSource }); //display the map var rasterLayer = new ol.layer.Tile({ source: new ol.source.TileJSON({ url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure', crossOrigin: '' }) }); var map = new ol.Map({ layers: [rasterLayer, vectorLayer], target: document.getElementById('map'), view: new ol.View({ center: [0, 0], zoom: 3 }) });

 <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script> <div id="map" class="map"></div>

---

見原帖：

https://stackoverflow.com/a/48232790/2797243

Answer 3

@Alvin Lindstam 的答案幾乎就在那里，但沒有在 Chrome（或 IE 上的任何）上顯示完整圖像。 因為 SVG 沒有固定大小，所以需要在imageLoadFunction中設置寬度和高度

 var extent = [0, 0, 512, 512]; var projection = new ol.proj.Projection({ code: 'static-image', units: 'pixels', extent: extent }); var map = new ol.Map({ layers: [ new ol.layer.Image({ source: new ol.source.ImageStatic({ url: 'https://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg', projection: projection, imageExtent: extent, imageLoadFunction: function (image, src) { image.getImage().src = src; image.getImage().width = ol.extent.getWidth(extent); image.getImage().height = ol.extent.getHeight(extent); } }) }) ], target: 'map', view: new ol.View({ projection: projection, center: ol.extent.getCenter(extent), zoom: 0 }) });

 <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script> <link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/> <div id="map" class="map"></div>