如何在OpenLayers-3上将SVG图像用作图层

本文介绍了如何在OpenLayers-3上将SVG图像用作图层的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 如何使用OpenLayers-3将SVG图像用作图层（而不是地图标记） 我无法获得SVG的任何输出使用任何 ol.source.Vector 和 ol.format.Feature 实例时的图像。 小例子： 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图层时能够获得输出，但这会使用/生成（？）a静态图像所以SVG的优势已经消失。 示例： //不确定我是否需要这个用于SVG，但是图像需要它是 var extent = [0,0,1000,1000]; //随机图像大小 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 但这根本没有帮助我。 所以，再次：我怎样才能（如果可能的话）在OpenLayers-3上使用SVG图像？解决方案你可以不要使用带有svg文件的 ol.source.Vector ，但OL3可以将svg文件显示为图像。 缩放时图像保持清晰。 我修改了官方静态图像示例，并用svg文件替换png文件。请参阅下面的runnable示例。 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.gith ub.io/master/en/v5.3.0/css/ol.cssrel =stylesheet/>< div id =mapclass =map>< / div> How can I use a SVG image as a Layer (so not as a map marker) with OpenLayers-3I was unable to get any output of my SVG image when using any of the ol.source.Vector and ol.format.Feature instances.Small example: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 }),}); I was able to get output when using the ImageStatic layer, but this uses/generates(?) a static image so the advantages of SVG are gone.Example:// Not sure if I need this for SVG, but is is required for an imagevar extent = [0, 0, 1000, 1000]; // random image sizevar 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 })});I already tried the trick with setting the Content-type: to image/svg+xml but this did not help me at all.So, again:How can I (if possible) use a SVG image a a layer with OpenLayers-3? 解决方案 You can not use the ol.source.Vector with svg files, but OL3 can display svg files as images.The image stays sharp when zoomed.I modified the official static image example, and replaced the png file with a svg file. See the runnable example below. 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> 这篇关于如何在OpenLayers-3上将SVG图像用作图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！