GIS & Chips » OpenLayers

Digitalización web con OpenLayer y WFS-T (Geoserver)

jose — Thu, 16 Sep 2010 16:06:40 +0000

OBJETIVO:
En el contexto de la Web 2.0. cada vez son más los casos de cartografía interactiva donde continuamente se está actualizando la información. El caso más espectacular es el de OpenStreetMap, donde una legión de “mappers” interactuan con el sistema. Nuestro objetivo es mucho más modesto, pero también más fácil de implementar, y todo gracias al uso de estándares y servicios de mapa libres. Perseguimos, en definitiva, una digitalización on-line, en todos los aspectos: creación de nuevos elementos, modificación geométrica de los ya existentes, actualización de atributos, etc. Todo ello con casi todas las ventajas de las aplicaciones de escritorio, pero con la singularidad de que cualquier usuario pueda intervenir sin apenas conocimientos.

Estos son los ingredientes para la receta:

capas geográficas almacenadas en tablas PostgreSQL/PostGIS
servicio de mapas WFS-T con GeoServer
Diseño web con OpenLayers

Digitalizacion WFS-T

En definitiva, nuestro objetivo es ofrecer un servicio de digitalización de elementos geométricos en Internet, utilizando como framework a OpenLayers, que carga una serie de capas servidas por un servicio de mapas de elementos transaccional (WFS-T) almacenadas en una geodatabase PostGIS.

Tengo que reconocer que en un primer momento intenté realizar este juego con un servidor WFS-T poco conocido, pero muy ligero (funciona como CGI, al igual que MapServer), y trabaja con PostGIS, con lo que me las prometía felices, pero las pruebas fueron satisfactorias sólo mientras modificase o crease geometría, pero en ningún momento pude subir o modificar atributos. Para los estudiosos este motor se llama TinyOWS . Seguro que más de uno lo habrá usado satisfactoriamente, con lo que se agradecerían comentarios de como hacerlo . Me gustaba porque la instalación era muy sencilla (colocar el ejecutable en el directorio donde se ejecutan los scripts CGI, generalmente en “cgi-bin”, sin necesidad de tener instaladas otras herramientas. En este enlace tienes un precioso ejemplo de esta implementación: http://dev4.mapgears.com/bdga/bdgaWFS-T.html

Ante este dilema opté por instalar GeoServer (versión 2.0.1) cuya experiencia está más que demostrada para tener servicios de mapa interoperables. Sí quieres ver las características de nuestro servicio consúltalas aquí

http://www.gisandchips.org:8080/geoserver/wfs?service=wfs&VERSION=1.1.1&REQUEST=GetCapabilities

De esta manera me propuse crear un servicio WFS-T sobre tres capas, cada una de una tipología distinta ( puntos, polígonos y líneas), almacenadas en sus correspondientes tablas de PostGIS:

tabla “golf” para puntos de campos de golf. Ver características.
tabla “municipios” para polígonos de términos municipales Ver características.
tabla “vias” para línea de una red de carreteras Ver características.

Para ver su potencial desarrollé tres páginas web para cada uno de los tipos de digitalización

demo 1: Digitalización de Campos de golf
demo2: Digitalización de municipios
demo 3: Digitalización de vías

NOTA: Puedes probar sin miedo cualquiera de estas demos. Los datos se vuelven a cargar cada día. No te desesperes si es un poco lento el servidor web. No da más de sí.

En cada una de las demos he querido incorporar una barra de iconos para hacer uso de las siguientes herramientas:

panel digitalización

Consulta y edición de atributos
Digitalización
Mover elementos (o vértices en el caso de municipios y vías)
Borrar elementos
Guardar las transacciones
Navegación en modo Pan-zoom

El código está implementado de tal forma que la digitalización forma parte de una sesión, y sólo se validan los cambios (transacción) cuando hacemos clic en el botón “salvar”. De esta forma tengo recogido todo el abanico de posibilidades de la digitalización.

OPENLAYERS
Este framework, de sobra conocido es el responsable de articular todos los flujos entre el cliente y la base de datos utilizando WFS-T servido por GeoServer. El código fuente de cada ejemplo lo puedes obtener del propio navegador, por lo que me centraré en desmenuzar las partes:

ESTILO HTML PARA MENÚS
Estilo para la barra de iconos

Aplico en el código de OpenLayers los estilos que tendrá la capa WFS que vamos a cargar

	    // Styles
            var styles = new OpenLayers.StyleMap({
                "default": new OpenLayers.Style(null, {
                    rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                "Point": {
                                    pointRadius: 5,
                                    graphicName: "square",
                                    fillColor: "red",
                                    fillOpacity: 0.25,
                                    strokeWidth: 1,
                                    strokeOpacity: 1,
                                    strokeColor: "#333333"
                                }
                            }
                        })
                    ]
                }),
                "select": new OpenLayers.Style({
                    strokeColor: "#00ccff",
                    strokeWidth: 4
                }),
                "temporary": new OpenLayers.Style(null, {
                    rules: [
                        new OpenLayers.Rule({
                            symbolizer: {
                                "Point": {
                                    pointRadius: 5,
                                    graphicName: "square",
                                    fillColor: "white",
                                    fillOpacity: 0.25,
                                    strokeWidth: 1,
                                    strokeOpacity: 1,
                                    strokeColor: "#333333"
                                }

                            }
                        })
                    ]
                })
            });

En definitivo asigno un estilo para el elemento geométrico, y su comportamiento cuando es seleccionado, cuando está temporal (digitalización), o su valor por defecto.

CAPA WFS
Definimos una capa WFS con Strategy (para indicar que conjunto de datos deben de ser cargados -ej. todos los datos, por BBOX, en clusters, por página, por filtro-)

// Definimos una capa WFS con St
           var saveStrategy = new OpenLayers.Strategy.Save();

           wfs = new OpenLayers.Layer.Vector("golf", {
               //isBaseLayer:true,
               strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
               projection: new OpenLayers.Projection("EPSG:23030"),
               styleMap: styles,
               protocol: new OpenLayers.Protocol.WFS({
                   version: "1.0.0",
                   srsName: "EPSG:23030",
                   url: "http://www.gisandchips.org:8080/geoserver/wfs",
                   featureType: "golf",
                   featureNS: "http://www.opengeospatial.net/cite",
                   geometryName: "geometria",
                   schema: "http://www.gisandchips.org:8080/geoserver/wfs?service=WFS&version=1.0.0&request=DescribeFeatureType&TypeName=cite:golf",
               })
            });
 // Añadimos la capa anterior y los WMS que queramos de fondo
            map.addLayers([tiled,wfs]);

RESALTADO DE ELEMENTOS

El siguiente código controla el resaltado de los elementos cuando se lanzan eventos del ratón (mouseover, selección)

		/* HIGHLIGHT */

	    // inicio highlight mouseover
            var report = function(e) {
                OpenLayers.Console.log(e.type, e.feature.id);
            };

            var highlightCtrl = new OpenLayers.Control.SelectFeature(wfs, {
                hover: true,
                highlightOnly: true,
                renderIntent: "temporary",
                eventListeners: {
                    beforefeaturehighlighted: report,
                    featurehighlighted: report,
                    featureunhighlighted: report
                }
            });

            var selectCtrl = new OpenLayers.Control.SelectFeature(wfs,
                {clickout: true}
            );

            map.addControl(highlightCtrl);
            map.addControl(selectCtrl);

            highlightCtrl.activate();
            selectCtrl.activate();

	    /* END HIGHLIGHT */

SNAP O TOLERANCIAS DE CAZADO Y SPLIT (CORTES)

En ocasiones puede ser útil que la digitalización no sea a mano alzada (donde hagamos clic con el ratón), sino que tenga establecidas tolerancias de cazado para que cuando nos acerquemos a una línea o un polígono pueda pillar el nodo, vértice o eje. En este enlace verás un ejemplo más completo de este tema.
En el caso del Split sólo tiene sentido cuando los elementos son polígonos o líneas. Esto nos permite por ejemplo crear una ruta (R1) desde cualquier punto de otra ruta existente (R2), y mientras con el snapping obtenemos la sujección al vértice o eje, la ruta ya existente (R2) se parte en dos partes.

		/* SNAPPING */
            // Configuración del Snapping
            var snap = new OpenLayers.Control.Snapping({layer: wfs});
            map.addControl(snap);
            snap.activate();

            // Configuración del Split
            var split = new OpenLayers.Control.Split({
                layer: wfs,
                source: wfs,
                tolerance: 1000,
                deferDelete: true,
                eventListeners: {
                    aftersplit: function(event) {
                        var msg = "Split resulted in " + event.features.length + " features.";
                        flashFeatures(event.features);
                    }
                }
            });
            map.addControl(split);
            split.activate();

PANEL Y CONTROLES

Como ya hemos comentado es preferible tener los iconos a mano en el mapa en vez de los típicos radio button, ya que resultan más elegantes.

/* PANEL */
// crear un panel y añadirle iconos con funcionalidad
var panel = new OpenLayers.Control.Panel(
    {displayClass: 'customEditingToolbar'}
);

// Control para digitalizar puntos (draw)
var draw = new OpenLayers.Control.DrawFeature(
    wfs, OpenLayers.Handler.Point,
    {
        title: "Draw Feature",
        displayClass: "olControlDrawFeaturePoint",
        handlerOptions: {freehand: false, multi: false},
        // Muy importante: Si la capa postGIS es POINT poner multi:false.
        // Si es MULTIPOINT poner multi:true
        featureAdded: onFeatureInsert,
        //onFeatureInsert es el método que se ejecuta una vez que hemos terminado de digitalizar
    }
);

/*
En el caso de digitalizar polígonos este sería el código
            var draw = new OpenLayers.Control.DrawFeature(
                wfs, OpenLayers.Handler.Polygon,
                {
                    title: "Draw Feature",
                    displayClass: "olControlDrawFeaturePolygon",
                    handlerOptions: {multi: true},
                    featureAdded: onFeatureInsert,
                }
            );
*/

// Control para modificar elementos. En el caso de puntos sólo se pueden desplazar
// a otra posición
modify = new OpenLayers.Control.ModifyFeature(
    wfs, {displayClass: "olControlModifyFeature", title: "Modify Feature"}
);

// Control para borrar elementos
var del = new DeleteFeature(wfs, {title: "Delete Feature"});

// Control para salvar la sesión de digitalización
var save = new OpenLayers.Control.Button({
    title: "Save Changes",
    trigger: function() {
        if(modify.feature) {
            modify.selectControl.unselectAll();
        }
        saveStrategy.save();
    },
    displayClass: "olControlSaveFeatures"
});

/*
Control de Información. Es el típico control que una vez que seleccionas un elementos obtenemos los atributos, en este caso englobado en un popUp. Aquí hemos pensado reutilizar este formulario para actualizar datos de cada elemento (UPDATE de atributos).
*/
 selectControl = new OpenLayers.Control.SelectFeature(wfs,
 {
   onSelect: onFeatureInsert,
   onUnselect: onFeatureUnselect,
   displayClass: "olControlSelectFeature",
   title: "Info",
});

// Añadimos los controles al panel
panel.addControls([
    new OpenLayers.Control.Navigation({title: "Pan and zoom"}),
    save, del, modify, draw, selectControl
]);

// Definimos el control de navegación como el activo por defecto
panel.defaultControl = panel.controls[0];
map.addControl(panel);

FUNCIONES DE CADA CONTROL
Borrar elementos

 var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
      initialize: function(layer, options) {
          OpenLayers.Control.prototype.initialize.apply(this, [options]);
          this.layer = layer;
          this.handler = new OpenLayers.Handler.Feature(
              this, layer, {click: this.clickFeature}
          );
      },
      clickFeature: function(feature) {
          // sí no tiene fid eliminarlo
          if(feature.fid == undefined) {
              this.layer.destroyFeatures([feature]);
          } else {
              feature.state = OpenLayers.State.DELETE;
              this.layer.events.triggerEvent("afterfeaturemodified",
                                             {feature: feature});
              feature.renderIntent = "select";
              this.layer.drawFeature(feature);
          }
      },
      setMap: function(map) {
          this.handler.setMap(map);
          OpenLayers.Control.prototype.setMap.apply(this, arguments);
      },
      CLASS_NAME: "OpenLayers.Control.DeleteFeature"
  });

Información de los elementos, actualización de atributos e inserción de nuevos elementos (geometría + atributos):

// Funciones para cerrar el popUp
  function onPopupClose(evt) {
      selectControl.unselect(selectedFeature);
  }

// Función para cuando se quita la selección
 function onFeatureUnselect(feature) {
      map.removePopup(feature.popup);
      feature.popup.destroy();
      feature.popup = null;
  }

Función para insertar un nuevo elemento o actualizar atributos en uno ya existente

// PopUp para insert/update
  function onFeatureInsert(feature)
  {
  		selectedFeature = feature;
                // mapeo de los atributos
		var fid = selectedFeature.id;
     	        var nombre = selectedFeature.attributes['nombre'];
     	        var municipio = selectedFeature.attributes['municipio'];
		var codive = selectedFeature.attributes['codive'];
		var hoyos = selectedFeature.attributes['hoyos'];
                // Compruebo si existe un valor para el atributo nombre.
                // Sí no tiene atributos es un "INSERT" y muestro el formulario para cumplimentar
		if (nombre == null)
		{
 			// formulario
	            htmlForm = ""+
	            "AÑADIR CAMPO DE GOLF\n" +
	            "FID: "+ fid + "
\n" +
	            "" +
	            //"GEOMETRIA: "+ feature.geometry + "
\n" +
	            "UBICACION: "+ feature.geometry + "
\n" +
	            "Rellene los siguientes datos: 
 \n" +
	            "NOMBRE: 
\n" +
	            "HOYOS: 
\n" +
	            "MUNICIPIO: 
\n" +
		    "IVE: 
\n" +
	            "" +
	            "";
             }
/* Sí nombre tiene valor ofrezco los atributos en el formulario para modificarlos, añadiendo al popUp
    un botón para "Actualizar" el registro.
*/
                 else
            {
	         htmlForm = ""+
	         "ACTUALIZAR CAMPO DE GOLF\n" +
	         "FID: "+ fid + "
\n" +
	         "" +
	         "Rellene los siguientes datos: 
 \n" +
	         "NOMBRE: 
\n" +
	         "HOYOS: 
\n" +
	         "MUNICIPIO: 
\n" +
		 "IVE: 
\n" +
	         "";
      }
// Defino el objeto popUp
      popup = new OpenLayers.Popup.FramedCloud("info",
    		feature.geometry.getBounds().getCenterLonLat(),
         null,
         htmlForm,
         null,
         true,
         onPopupClose);

      feature.popup = popup;
      map.addPopup(popup);

  }

   // Trigger y función para pasar atributos del formulario
	var btnInsert = new OpenLayers.Control.Button({trigger: onTriggerInsertar});

	function onTriggerInsertar(fid)
	// se le pasa el fid como parametro para seleccionarlo mediante getFeatureById
	{
      //alert("has llegado a trigger insertar");
      var fid =  OpenLayers.Util.getElement('fid').value;// recojo el fid del formulario
      var miFeature = wfs.getFeatureById(fid);// hago la selección de la feature a partir del fid del form
      //alert(miFeature.id);
      // Paso atributos del formulario al elemento
		miFeature.attributes.nombre = OpenLayers.Util.getElement('nombre').value;
		miFeature.attributes.municipio = OpenLayers.Util.getElement('municipio').value;
		miFeature.attributes.hoyos = OpenLayers.Util.getElement('hoyos').value;
		miFeature.attributes.codive = OpenLayers.Util.getElement('codive').value;
		// elimina el popup
		onFeatureUnselect(miFeature);
	}
	// fin trigger insert

   // Trigger y función para pasar atributos del formulario en el update
	var btnUpdate = new OpenLayers.Control.Button({trigger: onTriggerUpdate});

	function onTriggerUpdate()
	{
      // defino miFeature como el array de elementos seleccionados, miFeature[0] será el único elemento del array
      miFeature = [selectedFeature]; //alert(miFeature.length);
      // Paso atributos del formulario al elemento
                var fid =  OpenLayers.Util.getElement('fid').value;
                miFeature[0].id = fid;
		miFeature[0].attributes.nombre = OpenLayers.Util.getElement('nombre').value;
		miFeature[0].attributes.municipio = OpenLayers.Util.getElement('municipio').value;
		miFeature[0].attributes.hoyos = OpenLayers.Util.getElement('hoyos').value;
		miFeature[0].attributes.codive = OpenLayers.Util.getElement('codive').value;
		// comprobar que se le pasan los atributos al feature. Descomentar para comprobación
		/*alert (  miFeature[0].id + "," +
				   miFeature[0].attributes.nombre + "," +
					miFeature[0].attributes.municipio  + "," +
					miFeature[0].attributes.hoyos  + "," +
					miFeature[0].attributes.codive );
               */

		miFeature[0].state = OpenLayers.State.UPDATE;
		// elimina el popup
		map.removePopup(miFeature[0].popup);
                selectControl.unselectAll();
                miFeature[0].popup = null;
	}
	// fin trigger

Faltan algunos elementos más, pero en esencia aquí está la lógica de la digitalización. Observa cada caso, puntos, polígonos y líneas para ver las diferencias existentes.

CONCLUSIÓN:
Quizás lo más relevante de este tema es que con un sólo fichero HTML hemos abordado la complejidad de la digitalización, utilizando siempre servicios y tecnologías estándar y abiertas. Con este tipo de soluciones tan sencillas podemos acercar a un número mayor de usuarios, menos especializados quizás, pero que de otra forma se hubieran visto imposibilitados de actuar por razones técnicas, económicas o de formación.

OpenLayers y Panoramio

jose — Tue, 04 May 2010 09:59:47 +0000

Tras leer el excelente post de Pepe relativo a la integración de servicios de geo-localización en un ambiente Google Maps llegué a la conclusión de que resulta muy fácil aplicarlo con dicha API, pero mi inquietud me llevó a investigar en la posibilidad de integrarlo en otra API de tipo mapping de reconocido prestigio, como es el caso de OpenLayers, que además es 100% Open Source, lo que nos permite añadir múltiples fuentes de datos (wms, wfs, gml, xml, geojson, georss, conjunto de tiles, proveedores de mapa mundiales -OpenStreetMap, GMaps, Virtual Earth, Yahoo Maps, etc.), además de esa libertad de movimientos que le confieren una cierta ventaja sobre su homónima, sin que ello suponga una crítica hacia Google Maps, que entre otras virtudes ha popularizado el uso de los servicios de mapa vía web, acercándolo a un público genérico sin apenas conocimientos.

Openlayers con Panoramio

A la hora de “copiar” el ejemplo descrito en dicho post para OpenLayer, no he planteado integrar todos los geoservicios, entre otras cosas porque algunos de ellos forman parte de la API casi desde su inicio, y no supone un gran esfuerzo incorporarlo, salvo el de YouTube, que no tuve tiempo de ver, aunque tampoco creo que haya muchos videos geoposicionados. Ejemplos de integración de KML en OL hay muchos en la red, al igual que de GML, GeoJSON o GeoRSS, y también de Flickr, que en el fondo es acceder a un documento XML. Para más información consultas los ejemplos on-line del portal Openlayers.org

De todos los geoservicios, al que más atención ha prestado ha sido al de Panoramio, entre otras cosas por la ingente cantidad de fotografías georreferenciadas que integra, lo que lo hace muy atractivo para el webmaster. Como muchos sabéis este portal dispone de un servicio REST público que nos permite ejecutar una URL con ciertos parámetros, que finalmente nos devuelve un documento estructurado en formato JSON

{
"count": 110,
"photos": [
{
"upload_date": "20 May 2007",
"owner_name": "Carlos Sieiro del Nido",
"photo_id": 2313090,
"longitude": -0.516679,
"height": 75,
"width": 100,
"photo_title": "UNIVERSIDAD DE ALICANTE-Campus de San Vicente del Raspeig.",
"latitude": 38.386611000000002,
"owner_url": "http://www.panoramio.com/user/134716",
"owner_id": 134716,
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/thumbnail/2313090.jpg",
"photo_url": "http://www.panoramio.com/photo/2313090"
},
{
"upload_date": "16 January 2007",
"owner_name": "\u00a9 www.fotoseb.es - Sebastien Pigneur Jans",
"photo_id": 453228,
"longitude": -0.51438300000000003,
"height": 66,
"width": 100,
"photo_title": "Foto Aerea Universidad Alicante 2 (Foto_Seb)",
"latitude": 38.381700000000002,
"owner_url": "http://www.panoramio.com/user/55833",
"owner_id": 55833,
"photo_file_url": "http://mw2.google.com/mw-panoramio/photos/thumbnail/453228.jpg",
"photo_url": "http://www.panoramio.com/photo/453228"
}]

}

Como podéis ver por cada foto disponemos de un array con los datos que nos interesan, y de forma particular los siguientes:

owner_name: autor
photo_title: título
latitude y longitude: coordenadas geográficas de geoposicionamiento en datum WGS 84
photo_id: identificador de foto
photo_file_url: URL de la imagen
photo_url: URL del recurso en la web de Panoramio

Integrar Panoramio en OpenLayers no resulta tan elegante como en GM, donde sólo hay que escribir 2 líneas, pero con un poco de esfuerzo y el apoyo de la comunidad seguro que alguien es capaz de escribir una clase derivada de JSON que facilite las cosas. Por ahora me limitaré a desmenuzar el código de forma secuencial para que se entienda el proceso

Lo primero que debemos de hacer es preparar nuestro proxy para que admita peticiones al host de Panoramio. En este enlace explica como hacerlo

OpenLayers.ProxyHost= "/cgi-bin/proxy.cgi?url=";

Posteriormente creamos un par de variables con la URL del servicio REST y los parámetros

url = "http://www.panoramio.com/map/get_panoramas.php";
parametros = {
   order:'popularity',
   set:'full',
   from:0,
   to:20,
   minx: minx,
   miny: miny,
   maxx: maxx,
   maxy: maxy,
   size:'thumbnail'
}

Consulta la documentación de la API de Panoramio para más información. Por ahora los parámetros que más nos interesan son:

“to”: indica el nº de fotografías que queremos cargar. Máximo 50
“minx”,”miny”,”maxx”,”maxy”: coordenadas de la BBOX donde buscará fotos. Debén de estar en coordenadas geográficas (EPSG: 4326). En mi caso los he obtenido utilizando este código:

// Obtener extensiones.
ext = map.getExtent();
var minx = ext.left;
var miny = ext.bottom;
var maxx = ext.right;
var maxy = ext.top; //alert (minx + " " + miny + " " + maxx + " " + maxy);

Por último sólo nos queda invocar a un HttpRequest de AJAX que ejecute la URL con los parámetros y los envíe a nuestra función: mostrarfotos

OpenLayers.loadURL(url, parametros, this, mostrarfotos);

Función mostrarfotos
Es la encargada de procesar el documento JSON que recibe como argumento

function mostrarfotos(response) {

El documento JSON, que todavía es una cadena de texto es parseada con OpenLayers.Format.JSON, que la convierte en un objeto que ya podemos tratar:

var json = new OpenLayers.Format.JSON();
var panoramio = json.read(response.responseText);

Creamos un array de featutes con el total de fotos (panoramio.photos.length)

var features = new Array(panoramio.photos.length);

Aplicamos un bucle “for” para recorrer cada fotografía.

for (var i = 0; i < panoramio.photos.length; i++)
{

Declaramos y almacenamos cada dato de la foto en una variable para recorrerla con comodidad.

var upload_date = panoramio.photos[i].upload_date;
var owner_name = panoramio.photos[i].owner_name;
var photo_id = panoramio.photos[i].photo_id;
var longitude =panoramio.photos[i].longitude;
var latitude = panoramio.photos[i].latitude;
var pheight = panoramio.photos[i].height;
var pwidth = panoramio.photos[i].width;
var photo_title = panoramio.photos[i].photo_title;/
var owner_url = panoramio.photos[i].owner_url;
var owner_id = panoramio.photos[i].owner_id;
var photo_file_url = panoramio.photos[i].photo_file_url;
var photo_url = panoramio.photos[i].photo_url;

Opcionalmente podemos recoger todas las fotografías en código HTML para ser ubicadas en el BODY con un DIV, en forma de “galería de fotos”

OpenLayers.Util.getElement('galeria').innerHTML +=
     " ";

Posteriormente en el BODY para representar esta galería sólo hay que escribir:

Creamos un objeto point con las coordenadas de la foto

var fpoint = new OpenLayers.Geometry.Point(longitude,latitude);

Creo un array de atributos

var atributos = {
   'upload_date' : upload_date,
   'owner_name':owner_name,
   'photo_id':photo_id,
   'longitude':longitude,
   'latitude':latitude,
   'pheight':pheight,
   'pwidth':pwidth,
   'pheight':pheight,
   'photo_title':photo_title,
   'owner_url':owner_url,
   'owner_id':owner_id,
   'photo_file_url':photo_file_url,
   'photo_url':photo_url
}

Por cada foto creo un elemento (feature) que contiene su posición y sus atributos

features[i] = new OpenLayers.Feature.Vector(fpoint,atributos);

Terminamos el bucle

Fuera del bucle, todavía en la función mostrar foto nos queda:

Definir el estilo para representar la foto. Tenemos dos opciones
a) Crear un icono único para cada fotografía

// estilo punto
var panoramio_style1 = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({
   pointRadius: 15,
   fillColor: "red",
   fillOpacity: 1,
   strokeColor: "black",
   externalGraphic: "${photo_file_url}"
}, OpenLayers.Feature.Vector.style["default"]));

b) Por cada posición añadimos una miniatura de la foto.

var panoramio_style2 = new OpenLayers.StyleMap(OpenLayers.Util.applyDefaults({
   pointRadius: 7,
   fillColor: "red",
   fillOpacity: 1,
   strokeColor: "black",
   externalGraphic: "panoramio-marker.png"
}, OpenLayers.Feature.Vector.style["default"]));

Imagen: Ejemplos de estilos

Estilos para Panoramio

Ahora creamos la vector layer asignándole el estilo escogido

var vectorPano = new OpenLayers.Layer.Vector("Panoramio fotos", {
   styleMap: panoramio_style2
});

Añadimos los elementos:

vectorPano.addFeatures(features);

Añadimos la layer al mapa

map.addLayer(vectorPano);

Definimos para terminar la función el comportamiento del evento que se desencadenará cuando seleccionemos ( click con el ratón) cada fotografía

selectControl = new OpenLayers.Control.SelectFeature(vectorPano,
   {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
map.addControl(selectControl);
selectControl.activate();
}

Como ves, se ejecutará la función “onFeatureSelect” cada vez que se selecciona un feature, y “onFeatureUnselect” cuando no hay nada seleccionado.

Con este código tenemos toda la lógica para obtener un vector layer con su posición y atributos. Ahora sólo nos queda definir el comportamiento de los eventos. En este caso vamos a crear un “popup” por cada elemento.

// popups
function onPopupClose(evt) {
   selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
   selectedFeature = feature;

   // HTML del PopUp
      mensaje = "
"+
	      ""+ feature.attributes.photo_title + "
" +
	      "
" +
	      "autor: "+feature.attributes.owner_name +"";

   popup = new OpenLayers.Popup.FramedCloud("chicken",
      feature.geometry.getBounds().getCenterLonLat(),
      null,
      mensaje,
      null, true, onPopupClose);
   feature.popup = popup;
   map.addPopup(popup);
}
function onFeatureUnselect(feature) {
   map.removePopup(feature.popup);
   feature.popup.destroy();
   feature.popup = null;
}

Ya lo tenemos todo listo. Sólo nos queda verlo en un navegador. ¿A que esperas?

Ver demo en proyección Mercator con fondo de OpenStreetMap
Ver demo en WGS84

Nota de interés:

Por último nos gustaría hacer una consideración de especial relevancia. Este código tiene sentido cuando todas las layers (WMS y vector layer de Panoramio) se encuentran en la misma proyección, en este caso se utiliza el datum WGS84 en coordenadas geográficas (EPSG: 4326). En el caso de que utilices en el mapa otra proyección debes de recordar que has de pasarle a la URL de Panoramio los parámetros de caja en WGS84, y lo mismo ocurre cuando el servicio te devuelve los puntos de cada foto, que ahora debes de hacer lo contrario, es decir, convertirla de EPSG:4326 a la proyección que estés utilizando.