Actualizando el atributo TEXT en un punto de OpenLayers

Question

Tengo la siguiente declaración de mapa y capa de vector que está funcionando:

var map;
var vectorLayer = new ol.layer.Vector({
  target: "points",
  source: new ol.source.Vector(),
  style: new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 0.5],
      anchorXUnits: "fraction",
      anchorYUnits: "fraction",
      src: "RedDot.svg",
      }),
            label: "My Junk", 
            text: new ol.style.Text({
                font: '15px Calibri,sans-serif',
                fill: new ol.style.Fill({ color: '#000' }),
                stroke: new ol.style.Stroke({
                    color: '#fff', width: 2
                    }),
                text: "My Truck",
                offsetY: 18,
                })
    })
  });

(info clave: Nota la etiqueta predeterminada "My Truck" para cada punto)

Tengo la siguiente función que agrega un punto al mapa (honestamente no sé si está creando una nueva capa para cada punto o agregando todos los puntos a la capa predeterminada):

function add_map_point(lat, lng, txt) {
  var source = vectorLayer.getSource();
  var pointFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
    });
  source.addFeature(pointFeature);
  }

Todo esto funciona bien, sin problemas.

Lo que me gustaría hacer es usar la variable TXT pasada a esa función para actualizar la etiqueta DE TEXTO ("My Truck" por defecto). Parece que debería poder hacer algo simple como source.getStyle().setStyle(getText().setText(text: txt)); (supongo que es demasiado simplificado).

¿Alguien podría indicar cómo se podría hacer esto?

He estado buscando toda la mañana, y todo lo que puedo encontrar es volver a declarar el estilo, lo cual parece innecesario.

Answer 1

Primero define un estilo, con opciones de estilizado de texto pero sin texto

var estilo = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        anchorXUnits: "fracción",
        anchorYUnits: "fracción",
        src: "RedDot.svg",
    }),
    text: new ol.style.Text({
        font: '15px Calibri,sans-serif',
        fill: new ol.style.Fill({ color: '#000' }),
        stroke: new ol.style.Stroke({
             color: '#fff', width: 2
        }),
        offsetY: 18,
    })
});

Luego asigna a tu capa una función de estilo que establezca el texto de estilo desde una propiedad de una característica

var capaVector = new ol.layer.Vector({
    target: "points",
    source: new ol.source.Vector(),
    style: function (característica) {
        estilo.getText().setText(característica.get('texto'));
        return estilo;
    }
});

Cuando crees características, incluye una propiedad de texto

function add_map_point(lat, lng, txt) {
    var fuente = capaVector.getSource();
    var característicaPunto = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lng), parseFloat(lat)], 'EPSG:4326', 'EPSG:3857')),
        text: txt
    });
    fuente.addFeature(característicaPunto);
}