Jak mogę użyć obrazu SVG jako warstwy na OpenLayers-3

Jak mogę użyć obrazu SVG jako warstwa (więc nie jako znacznik na mapie) z OpenLayers-3Jak mogę użyć obrazu SVG jako warstwy na OpenLayers-3

nie byłem w stanie uzyskać żadnych wyjście mój obraz SVG podczas korzystania z instancji ol.source.Vector i .

Mały przykład: (?)

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 
    }), 
});

udało mi się uzyskać moc podczas korzystania z ImageStatic warstwę, ale używa/generuje statyczny obraz tak zalety SVG zniknęły.

Przykład:

// 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 
    }) 
});

Próbowałem już sprawę z ustawieniem Content-type: do image/svg+xml ale mi to nie pomaga w ogóle.

Tak, znowu: Jak mogę (jeśli to możliwe) użyć obrazu SVG jako warstwy z OpenLayers-3?

Źródło

2015-12-22 Matthijs

jestem ciekaw, w jaki sposób chcesz wykorzystać zalety SVG, inne niż w postaci statycznego obrazu? – PSorey

No cóż, do moich pomysłów (i proszę mnie poprawić, jeśli się mylę) powinienem móc dodać "powiększalną" warstwę SVG, więc nawet gdy powiększysz obraz nie dostaniesz pikselu i pozostaniesz ostry. Zwykle używamy go do planów pięter, więc SVG (lub może inny format wektorowy) będzie świetny. Obraz statyczny jest nadal możliwy, ale po powiększeniu zawsze będzie on niewyraźny. – Matthijs

Ciągle pracuję z OL3 i zastanawiam się nad SVG. Potrzebuję również rysunków wektorowych w stylu CAD na warstwach bazowych, a z komentarzy, które przeczytałem, może SVG nie jest jeszcze obsługiwany? Można jednak zdecydowanie użyć typów Punkt, LiniaLinia i Wielokąt, aby utworzyć warstwę z możliwością powiększania. Mam zamiar spróbować [ogr2ogr, aby przetłumaczyć DXF na GeoJSON.] (Http://ogre.adc4gis.com/) – PSorey

Nie można używać pliku ol.source.Vector z plikami SVG, ale OL3 może wyświetlać pliki SVG jako obrazy.

Obraz pozostaje ostry podczas powiększania.

Zmodyfikowałem oficjalny static image example i zastąpiłem plik png plikiem svg. Zobacz działający przykład poniżej.

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="http://openlayers.org/en/v3.14.2/build/ol.js"></script> 
 
<link href="http://openlayers.org/en/v3.14.2/css/ol.css" rel="stylesheet"/> 
 
<div id="map" class="map"></div>

Źródło

2016-03-23 16:33:16

Hej, Alvinie, dobrze cię znów "widzieć". –

Dzięki za tę odpowiedź. Czy wiesz, jak zastosować style z samego SVG (atrybut "style"), a także powiedzmy zdarzenia "onmousehover"? na przykład '' – fuzz

Po umieszczeniu znacznika na obrazie statycznym, został on zgubiony. Jakiś pomysł, dlaczego tak się dzieje? – Renjith

Obecnie , przykładem dla openlayers 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>

zobaczyć oryginalny post:

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

Źródło

2018-01-12 21:26:49

Jak mogę użyć obrazu SVG jako warstwy na OpenLayers-3

Odpowiedz

Powiązane problemy