wfs-t.html 3.77 KB
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="../lib/Firebug/firebug.js"></script>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map, wfs;
        OpenLayers.ProxyHost = "proxy.cgi?url=";

        function init() {
            map = new OpenLayers.Map('map');
            var wms = new OpenLayers.Layer.WMS(
                "State",
                "http://sigma.openplans.org/geoserver/wms",
                {layers: 'topp:tasmania_state_boundaries'}
            );
            
            //
            // Word to the Wise from an anonymous OpenLayers hacker:
            //             
            // The typename in the options list when adding/loading a wfs 
            // layer not should contain the namespace before, (as in the 
            // first typename parameter to the wfs consctructor).
            // 
            // Specifically, in the first parameter you write typename: 
            // 'topp:myLayerName', and in the following option list 
            // typeName: 'myLayerName'. 
            // 
            // If you have topp included in the second one you will get 
            // namespace 14 errors when trying to insert features.
            //
            wfs = new OpenLayers.Layer.WFS(
                "Cities",
                "http://sigma.openplans.org/geoserver/wfs",
                {typename: 'topp:tasmania_cities'},
                {
                    typename: "tasmania_cities",
                    featureNS: "http://www.openplans.org/topp",
                    extractAttributes: false,
                    commitReport: function(str) {
                        OpenLayers.Console.log(str);
                    }
                }
            );
           
            map.addLayers([wms, wfs]);

            var panel = new OpenLayers.Control.Panel({
                displayClass: "olControlEditingToolbar"
            });

            var draw = new OpenLayers.Control.DrawFeature(
                wfs, OpenLayers.Handler.Point,
                {
                    handlerOptions: {freehand: false},
                    displayClass: "olControlDrawFeaturePoint"
                }
            );
            
            var save = new OpenLayers.Control.Button({
                trigger: OpenLayers.Function.bind(wfs.commit, wfs),
                displayClass: "olControlSaveFeatures"
            });

            draw.featureAdded = function(feature) {
                var oldgeom = feature.geometry;
                feature.layer.renderer.eraseGeometry(oldgeom);
                feature.geometry = new OpenLayers.Geometry.MultiPoint(oldgeom);
                feature.state = OpenLayers.State.INSERT;   	                  
                feature.layer.drawFeature(feature);
            }
           
            panel.addControls([
                new OpenLayers.Control.Navigation(),
                save, draw
            ]);

            map.addControl(panel);
            
            map.zoomToExtent(new OpenLayers.Bounds(140.64,-44.42,151.89,-38.80));
        }
        
    </script>
</head>
<body onload="init()">

    <h1 id="title">WFS Transaction Example</h1>
    
    <div id="tags">
    </div>
    <p id="shortdesc">
        Shows the use the WFS layer for transactions.
    </p>
    
    <div id="map" class="smallmap"></div>
    
    <p id="docs">
    This is an example of using a WFS layer type. Note that it requires a 
    working GeoServer install, which the OpenLayers project does not maintain;
    however, if you're interested, you should be able to point this against
    a default GeoServer setup without too much trouble.
    </p>



    </body>
</html>