es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Openlayers ol.ext FontSymbol offset X & Y no funcionando

06 Aug, 2023 Programación

Estoy tratando de crear un ícono desplazado sobre mi ícono regular, como una bala de estado en mi estilo de característica.

this.iconStyle = [
  new ol.style.Style({
    image: new ol.style.FontSymbol({
      form: 'marker',
      radius: 25,
      fill: new ol.style.Fill({
        color: 'white'
      })
    }),
    text: new ol.style.Text({
      text: '\uF0D1',
      font: '900 22px "Font Awesome 5 Free"',
      offsetY: -2,
      fill: new ol.style.Fill({
        color: '#06305c'
      })
    })
  }),

  new ol.style.Style({
    image: new ol.style.FontSymbol({
      form: 'circle',
      radius: 10,
      offsetX: 17,
      offsetY: -20,
      fill: new ol.style.Fill({
        color: 'green'
      })
    }),
    text: new ol.style.Text({
      text: '30m',
      offsetY: -20,
      offsetX: 17,
      fill: new ol.style.Fill({
        color: 'white'
      })
    })
  })
]

Como puedes ver, el texto del estilo de OpenLayers se muestra correctamente, pero el círculo de fontSymbol no parece tener el desplazamiento que escribí.

Aquí está la API para fontSymbol de ol.ext: https://viglino.github.io/ol-ext/doc/doc-pages/ol.style.FontSymbol.html

¿Qué estoy haciendo mal?

aquí está lo que tengo en mi pantalla

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que las propiedades offsetX y offsetY del fontSymbol no están siendo aplicadas. Una solución posible es envolver el fontSymbol y el texto dentro de un elemento div y aplicar los desplazamientos al div en su lugar. Aquí tienes un ejemplo:

    new ol.style.Style({
  image: new ol.style.Icon({
    src: 'regular-icon.png',
    offset: [0, 0]
  }),
  text: new ol.style.Text({
    text: 'Estado',
    offsetY: -25,
    fill: new ol.style.Fill({
      color: 'white'
    })
  }),
  zIndex: 1 // asegúrate de que se muestre encima del icono regular
}),
new ol.style.Style({
  image: new ol.style.Icon({
    src: 'offset-icon.png',
    offset: [17, -20] // ajustar según sea necesario
  }),
  zIndex: 0 // asegúrate de que se muestre debajo del texto
})

    Este método debería funcionar con cualquier tipo de imagen, no solo con fontSymbols.

Comments are closed.