
<html>


  <head>


  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


    <script src="http://localhost/OpenLayers-2.10/OpenLayers.js"></script>


    <script type="text/javascript">


      var map = null;


      // ベクタレイヤー


      var vectorLayer = null;


      // 初期化処理


      function init(){


          map = new OpenLayers.Map("map");


          // 背景となるWMSレイヤーを作成


          var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",


                                                   "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});


          // 描画用レイヤーを作成


          vectorLayer = new OpenLayers.Layer.Vector("Polygon Layer");


          // Mapにレイヤーを追加


          map.addLayers([wmsLayer, vectorLayer]);


          map.addControl(new OpenLayers.Control.LayerSwitcher());


          map.addControl(new OpenLayers.Control.MousePosition());


          // ポリゴン描画用のコントロールを作成してMapに追加


          var ctrls = {


              "draw": new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Polygon),


              "modify": new OpenLayers.Control.ModifyFeature(vectorLayer)


          }


          for(var key in ctrls){


              map.addControl(ctrls[key]);


              ctrls[key].activate();


          }


          map.setCenter(new OpenLayers.LonLat(0,0), 3);


      }


      // ベクタ情報を出力する


      function writeFeatures(){


          // 選択されているフォーマット名を取得


          var type = document.getElementById("selFormat").value;


          // 選択されている形式にあわせてOpenLayers.Formatを作成


          var format = null;


          switch(type){


              case "WKT":


                  format = new OpenLayers.Format.WKT();


                  break;


              case "KML":


                  format = new OpenLayers.Format.KML();


                  break;


              case "GML":


                  format = new OpenLayers.Format.GML();


                  break;


              case "GeoJSON":


                  format = new OpenLayers.Format.GeoJSON();


                  break;


          }


          // ベクタレイヤーの持つベクタ情報をOpenLayers.Formatを利用して出力


          var res = format.write(vectorLayer.features);


          document.getElementById("result").value = res;


      }


    </script>


  </head>


  <body onload="init()">


      <div id="map" style="width:500px;height:300px;float:left"></div>


      <select id="selFormat">


        <option value="WKT">WKT</option>


        <option value="KML">KML</option>


        <option value="GML">GML</option>


        <option value="GeoJSON">GeoJSON</option>


      </select>


      <input type="button" onclick="writeFeatures()" value="ベクタ出力" />


      <span style="clear:all"/>


      <textarea id="result" rows="15" cols="50"></textarea>


  </body>


</html>