[Gfoss] Openlayers e popup
Paolo Corti
pcorti a gmail.com
Gio 21 Maggio 2009 14:06:55 CEST
>
> si si gią fatto ma nessun errore, invece per quanto riguarda lo stile
> sai qualcosa di pił?
>
ti allego un esempio completo con il popup funzionante su un WFS e con
i markers rappresentati da un simbolo differente da quello di default
ciao
<html>
<head>
<title>OpenLayers MapServer WFS, WFS Sample</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"
type="text/javascript" charset="utf-8"></script>
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"
type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
var lat=42
var lon=13.4
var zoom=5
var map_server_host = "localhost"
var map;
var layerWMS;
var layerWFS;
function init() {
OpenLayers.ProxyHost = "cgi-bin/proxy.cgi?url=";
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.Attribution()
],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,
20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm'
});
// Mapnik
var layerMapnik = new
OpenLayers.Layer.OSM.Mapnik("Mapnik");
// WMS from mapserver
layerWMS = new OpenLayers.Layer.WMS(
"My WMS Layer",
"http://" + map_server_host + "/cgi-bin/mapserv?",
{
map: '/var/www/wms_op.map',
transparent: 'true',
layers: 'stabilimenti',
projection: "EPSG:900913",
format: 'image/png'
}
);
// WFS from mapserver
var styleMap = new OpenLayers.StyleMap({pointRadius: 5,
fillColor: "red", fillOpacity: 0.7, strokeColor: "black", strokeWidth:
2});
layerWFS = new OpenLayers.Layer.WFS(
"My WFS Layer",
"http://" + map_server_host + "/cgi-bin/mapserv?",
{
map: '/var/www/wfs_op.map',
maxfeatures: 100,
typename: 'stabilimenti'
},
{
extractAttributes: true,
styleMap: styleMap
}
);
//visibility iniziale
layerWFS.setVisibility(false);
//creo il layer per la selezione
selectControl = new OpenLayers.Control.SelectFeature(layerWFS,
{onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
map.addControl(selectControl);
selectControl.activate();
//aggiungo i layers
map.addLayers([layerMapnik,layerWMS,layerWFS]);
var lonLat_obj = new OpenLayers.LonLat(lon, lat)
var lonLat = lonLat_obj.transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
);
map.setCenter (lonLat, zoom);
//registrazione eventi
map.events.register("zoomend", map, updateLayers);
}
function updateLayers() {
if (this.zoom >= 8) {
layerWFS.setVisibility(true);
}
}
function onPopupClose(evt) {
selectControl.unselect(selectedFeature);
}
function onFeatureSelect(feature) {
selectedFeature = feature;
messaggio = "<div style='font-size:.8em'><strong>ID:
</strong>" + feature.attributes.id +
"<br><strong>Nome: </strong>" +
feature.attributes.nome_stabilimento + "</div>",
popup = new OpenLayers.Popup.FramedCloud(
"InformazioniStabilimento",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(200,200),
messaggio, null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
</script>
<body onload="init()">
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript" />
</body>
</html>
Maggiori informazioni sulla lista
Gfoss