OpenLayers-3でレイヤーとして(マップマーカーとしてではなく)SVG画像を使用するにはどうすればよいですか?
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
が、これはまったく私を助けていませんでした。
だから、再び:OpenLayers-3でレイヤー(可能な場合)にSVG画像とレイヤーを使用するにはどうすればよいですか?
ol.source.Vector
with 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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加