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 obtener datos de WFS geoserver en openlayers

13 Jul, 2023 Programación

Tengo algunos puntos con sus datos provenientes de PostGIS a GeoServer, luego agregué estos puntos a mi mapa, pero necesito mostrar su información cuando hago clic en ellos.

const approvedUsers = new ol.layer.Vector({
    title: 'Usuarios encuestados',
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function (extent) {
            return (
                'https://know.ncn.pe/geoserver/wfs?service=WFS&' +
                'version=1.1.0&request=GetFeature&typename=approvedUser&' +
                'outputFormat=application/json&srsname=EPSG:3857&' +
                'bbox=' +
                extent.join(',') +
                ',EPSG:3857'
            );
        },
        strategy: ol.loadingstrategy.bbox,
    }),
    style: new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5, 0.5],
            size: [28, 19],
            offset: [1, 1],
            scale: 1,
            src: 'assets/img/approvedUser.png',
        }),
    }),
});

Intenté obtener los datos de esta manera:

let clickeado = new ol.interaction.Select();
map.addInteraction(clickeado);

map.on('singleclick',function(e){
    approvedUsers.once('precompose',function(e){
        let seleccionado = clickeado.getFeatures();
        readFeatures(seleccionado);
    });
    function readFeatures(features){
        let dataFromWMS = features.item(0);
        console.log(dataFromWMS.get('construido'));
    }
});

Estos son los datos que tengo en GeoServer:
pointa_in_geoserver

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar la información de los puntos al hacer clic, puedes utilizar la función ol.interaction.Select() para escuchar los eventos ‘singleclick’ en el mapa. Aquí tienes un ejemplo de fragmento de código:

    // crear una interacción de selección para la capa approvedUsers
let select = new ol.interaction.Select({
  layers: [approvedUsers],
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'blue',
      width: 2,
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)',
    }),
    image: new ol.style.Circle({
      radius: 6,
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.5)',
      }),
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 2,
      }),
    }),
  }),
});

// añadir la interacción de selección al mapa
map.addInteraction(select);

// escuchar eventos 'select' para obtener las características seleccionadas
select.on('select', function (e) {
  let selectedFeatures = e.target.getFeatures();

  // recorrer las características seleccionadas y mostrar sus propiedades
  selectedFeatures.forEach(function (feature) {
    console.log('Propiedades de la característica seleccionada:', feature.getProperties());
  });
});

    Este código creará una interacción de selección para la capa approvedUsers y la añadirá al mapa. Cuando el usuario haga clic en un punto, se activará el evento ‘select’ y la(s) característica(s) seleccionada(s) estarán disponibles en la propiedad target del objeto de evento. A continuación, podrás recorrer las características seleccionadas y mostrar sus propiedades según sea necesario.

Comments are closed.