lib - ¿Cómo puedo usar una imagen SVG como marcador de mapa en OpenLayers-3?

openlayers html

Question

Estoy tratando de crear mapas de "pin-drops" (es decir, marcadores de mapa) en OpenLayers-3 (OL3) usando imágenes SVG.

Actualmente, estoy usando imágenes PNG como pindrops que hacen referencia al atributo de propiedad ol.style.Icon source ("src") muy bien. Sin embargo, esto falla al usar una imagen SVG. ¿Hay alguna otra forma de usar un SVG de la misma manera? Tal vez mediante el uso de una referencia además de ol.style.Icon incluso? Ya hay una gran cantidad de SVG incorporados en capas abiertas, así que esto debería ser posible, pero no he encontrado una forma de hacer que esto funcione en OL3. ¿Hay alguna otra forma de hacer esto en OL3 que deba considerar?

Tenga en cuenta: ya hemos intentado utilizar una capa ol.Vector, sin embargo, cuando el usuario amplía y reduce, el tamaño de la imagen SVG aumenta / disminuye, lo que constituye una solución inadecuada.

OL3 (falla):

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

Funcionalidad muy similar, es el siguiente ejemplo que encontré en línea, es casi perfecto si no fuera por el hecho de que el ejemplo usa la funcionalidad OpenLayers-2 (OL2) que llama a la biblioteca de openlayers.js (en lugar de la biblioteca ol.js de OL3). Lamentablemente, el intercambio de estos archivos javascript falla.

OL2 (funciona, pero es la antigua biblioteca OL)

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

Buscar en línea una solución para esto parece producir solo otras personas confundidas que buscan una solución.

Por favor ayuda,

Cerveza gratis

Answer 1

Según la respuesta de @ahocevar, puede usar los URI de datos para SVG:

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

Answer 2

Los iconos de SVG funcionan bien siempre que el tipo de contenido de su archivo de imagen SVG sea image/svg+xml . También tenga en cuenta que no se admiten referencias externas dentro de SVG. OpenLayers 3 simplemente usa la función drawImage del contexto 2d. Puede encontrar más detalles sobre los requisitos del contenido de SVG aquí: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas .

Answer 3

Tuve el mismo problema, pero ni siquiera serví la imagen con el tipo de mimo adecuado.

Se redujo al SVG que no define el ancho y la altura correctamente.

Agregué los atributos de width y height a la etiqueta <svg> , como:

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

Después de eso, pude usar mi svg como cualquier otra imagen.

Answer 4

Convierta el SVG a Base 64. Este ( Enlace ) me ayudó.

copió la base 64 y la usó como una cadena en javascript.

Por ejemplo: var svg = "convertedBase64";

Entonces

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

Y terminaste, pueden ser algunos Kbs más que SVG, pero esto funcionó perfecto para mí.

Answer 5

Sobre la base de la respuesta de SoonDead, tuve que encontrar una manera de agregar el ancho y la altura a la svg sin tocar la fuente. Usando angular, esto es una especie de lo que hice:

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

Es un poco detallado, pero parece hacer el trabajo.

Answer 6

También tuve problemas para mostrar la imagen del icono, una respuesta ahocevar me ayudó a resolver mi problema, pero también tuve que buscar el encabezado php, para SVG. En caso de que usted u otras personas que ven esta respuesta estén usando php para generar el SVG que tiene. usar la función de encabezado para identificar el tipo de contenido

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>'';