gml-serialize.html 3 KB
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
        #map {
            width: 512px;
            height: 350px;
            border: 1px solid gray;
        }
    </style>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        <!--
        var map, drawControl, g;
        function serialize(feature) {
            feature.attributes = {};
            var name = prompt("Name for feature?");
            feature.attributes['name'] = name;
            s = new XMLSerializer();
            var data = g.write(feature.layer.features);
            $("gml").value = s.serializeToString(data);
        }
        function init(){
            g = new OpenLayers.Format.GML();
            map = new OpenLayers.Map('map');
            
            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", 
                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); 

            var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
            pointLayer.onFeatureInsert = serialize;

            map.addLayers([wmsLayer, pointLayer]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());
            
            drawControls = {
                point: new OpenLayers.Control.DrawFeature(pointLayer,
                            OpenLayers.Handler.Point),
                line: new OpenLayers.Control.DrawFeature(pointLayer,
                            OpenLayers.Handler.Path)
            };
            
            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }
            
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
        }

        function toggleControl(element) {
            for(key in drawControls) {
                var control = drawControls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
        // -->
    </script>
  </head>
  <body onload="init()">
    <h1>OpenLayers Draw Point Example</h1>
    <div style="float:right">
    <ul id="controlToggle">
        <li>
            <input type="radio" name="type" value="none" id="noneToggle"
                   onclick="toggleControl(this);" checked="checked" />
            <label for="noneToggle">navigate</label>
        </li>
        <li>
            <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
            <label for="pointToggle">draw point</label>
        </li>
        <li>
            <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
            <label for="lineToggle">draw line</label>
        </li>
    </ul>
    <p>Check the box to draw points.  Uncheck to navigate normally.</p>
    <textarea id="gml" cols="80" rows="30"></textarea>
    </div>
    <div id="map"></div>
  </body>
</html>