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.

Cómo rotar marcadores individualmente en OpenLayers

02 Aug, 2023 Programación

Quiero mostrar las posiciones de los taxis en servicio utilizando OpenLayers.
Tengo las coordenadas y la dirección de cada taxi, pero cuando intento mostrarlos, las coordenadas están bien, pero las direcciones no se muestran correctamente. Esto se debe a que tengo el mismo estilo para cada marcador y los agrego a la misma capa vectorial.
Me gustaría mostrar cada vehículo con su propia dirección.
Se agradecerán cualquier solución para este problema.

Mi código:

var taxiMarker = new ol.style.Style({
     image: new ol.style.Icon({
       scale: 0.7, anchor: [0.5, 0.5],
       src: 'uploads/taxiMarker.png'
     })
});
var taxi_vector = new ol.layer.Vector({
    source: new ol.source.Vector({
    }),
    style: [taxiMarker]
});

for(let i = 0; i < res.length; i++) {
     let tCoords = res[i][0].split(',');
     let heading = parseFloat(res[i][1]);
     let marker = new ol.geom.Point(tCoords);
     let featureMarker = new ol.Feature(marker);
     taxiMarker.getImage().setRotation(heading);
     taxi_vector.getSource().addFeature(featureMarker);
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar cada vehículo con su propio encabezado, debes crear un nuevo estilo para cada marcador en lugar de usar el mismo estilo para todos los marcadores. Puedes hacer esto modificando tu código de la siguiente manera:

    1. Reemplaza la variable taxiMarker con una función que devuelva un nuevo estilo para cada marcador:
    function getTaxiMarker(heading) {
    return new ol.style.Style({
        image: new ol.style.Icon({
            scale: 0.7, anchor: [0.5, 0.5],
            src: 'uploads/taxiMarker.png',
            rotation: heading
        })
    });
}
    1. Reemplaza la opción style de taxi_vector con una función que devuelva el estilo para cada elemento:
    var taxi_vector = new ol.layer.Vector({
    source: new ol.source.Vector(),
    style: function(feature) {
        var heading = parseFloat(feature.get('heading'));
        return getTaxiMarker(heading);
    }
});
    1. Establece el atributo heading en cada elemento cuando lo agregues a la fuente:
    for (let i = 0; i < res.length; i++) {
    let tCoords = res[i][0].split(',');
    let heading = parseFloat(res[i][1]);
    let marker = new ol.geom.Point(tCoords);
    let featureMarker = new ol.Feature({
        geometry: marker,
        heading: heading
    });
    taxi_vector.getSource().addFeature(featureMarker);
}

    Con estos cambios, deberías poder mostrar cada taxi con su propio encabezado.

Comments are closed.