[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