Personalización de ventanas emergentes en Openlayers

Question

¿Es posible personalizar la forma de pop-ups en OpenLayers? Por ejemplo, estoy creando una ventana emergente con el siguiente enfoque:

var popup = new OpenLayers.Popup.FramedCloud(
                "popup",
                OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
                null,
                '<div style="color:#FF0000">'+feature.data.Name + '</br><a href="http://test.url">test.url</a>' + '</div>',
                null,
                true
            );

Esto crea una ventana emergente con el siguiente aspecto:

¿Es posible cambiar desde las esquinas redondeadas y una conexión de curva a un pop-up más cuadrado?

Answer 1

al lado de una respuesta a todo, usted puede hacer su emergente como google mapa emergente estilo. echa un vistazo a este enlace que te ayudará a hacer g-estilo emergente...

emergente de secuencia de comandos de códigos,

emergente de imágenes,

y así css...

espero te sirva de ayuda..

Answer 2

En los archivos de la biblioteca, hay img/cloud-popup-relative.png archivo. Tienes que personalizar para conseguir el infowindow que te gusta

Answer 3

Sólo una nota, de mi trabajo reciente - crear popup personalizado en OpenLayers para WMSGetFeatureInfo.

Qué hacer:

var highlightControl = new OpenLayers.Control.WMSGetFeatureInfo({
    url: 'url to wms', 
    infoFormat: 'text/html',
    queryVisible: true,
    eventListeners: {
        getfeatureinfo: function(event) { 
            this_is_popup_handler_function(event);
        }
    }
}); 

this_is_popup_handler_function(event) {
  alert(event.text);
}

Espero que esto te ayudará. :)

Answer 4

Para obtener prueba de xy event.xy .

Por ejemplo:

...
new OpenLayers.Popup.FramedCloud(
             'chicken',
             map.getLonLatFromPixel(event.xy),
             ...
);
...