Come posso utilizzare un'immagine SVG come marker di mappa in OpenLayers-3?

Question

Sto cercando di creare mappe "pin-drop" (ad esempio indicatori di mappa) in OpenLayers-3 (OL3) utilizzando immagini SVG.

Attualmente, sto usando le immagini PNG come pindrops che fanno riferimento all'attributo di proprietà ol.style.Icon source ("src") corretto. Tuttavia, questo non funziona utilizzando un'immagine SVG. C'è un altro modo di usare un SVG nello stesso modo? Forse usando un riferimento oltre a ol.style.Icon anche? C'è già un sacco di SVG incorporato in Open Layers, quindi questo dovrebbe essere possibile, ma non ho trovato un modo per farlo funzionare in OL3. C'è qualche altro modo per farlo in OL3 che dovrei prendere in considerazione?

Nota: abbiamo già provato ad utilizzare un livello ol.Vector, tuttavia quando l'utente esegue lo zoom in/out, le dimensioni dell'immagine SVG aumentano o diminuiscono, soluzione inadeguata.

---

OL3 (esito negativo):

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

funzionalità molto simili, è l'esempio di seguito ho trovato in rete, è quasi perfetto, se non fosse per il fatto che l'esempio utilizza OpenLayers- 2 (OL2) funzionalità che chiama la libreria openlayers.js (invece della libreria ol.js di OL3). Purtroppo, lo scambio di questi file javascript non riesce.

---

OL2 (opere -ma è la vecchia biblioteca OL):

http://dev.openlayers.org/sandbox/camptocamp/tipi/examples/vector-symbols.html

---

Ricerca online per una soluzione a questo sembra produrre solo altre persone confuse ricerca per una soluzione.

Aiutateci,

freebeer

Answer 1

SVG icone funzionano bene fino a quando il tipo di contenuto del file di immagine in formato SVG è image/svg+xml. Si noti inoltre che nessun riferimento esterno è supportato all'interno di SVG. OpenLayers 3 utilizza semplicemente la funzione drawImage del contesto 2d. Puoi trovare maggiori dettagli sui requisiti del contenuto SVG qui: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas.

Answer 2

Ho anche avuto problemi per mostrare l'immagine dell'icona, ahocevar risposta mi ha aiutato a risolvere il mio problema, ma ho avuto anche per cercare l'intestazione php, per SVG Nel caso in cui ti trovi o altri che vedono questa risposta stia usando PHP per generare lo SVG è necessario utilizzare la funzione di intestazione per identificare il tipo di contenuto

header('Content-type: image/svg+xml'); /* this line will do the magic */ 
echo '<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 
</svg>'; 

Answer 3

in base alla risposta @ahocevar, è possibile utilizzare URI di dati per SVG:

new ol.style.Style({ 
    image: new ol.style.Icon({ 
    anchor: [0, 0], 
    src: 'data:image/svg+xml;utf8,<svg>/* SVG DATA */</svg>' 
    }) 
}); 

Answer 4

ho avuto lo stesso problema, ma nemmeno servendo l'im l'età con il tipo mimo corretto ha aiutato.

Si è ridotto a SVG senza definire correttamente larghezza e altezza.

ho aggiunto gli attributi width e height al tag <svg>, come:

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0.75 0 30 45" xml:space="preserve"> 

Dopo che ero in grado di usare la mia svg come qualsiasi altra immagine.

Answer 5

Convertire l'SVG in Base 64. Questo (Link) mi ha aiutato.

copiata la base 64 e utilizzata come stringa in javascript.

Esempio: var svg = "convertedBase64";

Poi

var icon = new ol.style.Icon({ 
     src:'data:image/svg+xml;base64,'+svg , 
     other props 
}); 

e si è fatto, può essere un paio di Kbs più di SVG, ma questo ha funzionato perfetto per me.

Answer 6

Sulla base della risposta di SoonDead, ho dovuto trovare un modo per aggiungere larghezza e altezza alla svg senza toccare la sorgente. Utilizzando angolare, questo è una sorta di quello che ho fatto:

$http.get('path/to/image.svg').then(function (response) { 
    // create element 
    var svgEl = angular.element(response.data); 

    // set width and height 
    svgEl.attr('width', '50px'); 
    svgEl.attr('height', '50px'); 

    // base64 encode 
    var base64Svg = btoa(unescape(encodeURIComponent(svgEl[0].outerHTML))); 

    // create the style 
    var style = new ol.style.Style({ 
    image: new ol.style.Icon({ 
     src: 'data:image/svg+xml;base64,'+base64Svg, 
     imgSize: [50, 50], 
     size: [50, 50], 
    }) 
    }); 

// apply the style 
feature.setStyle(style); 
}); 

E 'un po' prolisso, ma sembra di fare il lavoro.