OpenLayersで描画されたボックスの座標を取得するには？

Question

私はOpenLayersの初心者ですので、明らかな（おそらくダムの）質問には申し訳ありませんが、解決のためにさまざまなアプローチを見つけましたが、機能していません。これとそれを試してみましたが、ダースの提案（here、here、here、here、here）が無駄です。

基本的に、描画された矩形の座標を別のWebサービスに渡したいと思います。だから、四角形を描いた後、それは境界ボックスの四隅を私に吐き出すはずです。

私がこれまで持っていることは四角形を描画するための基本的なOL層の例である：

今

var source = new ol.source.Vector({wrapX: false}); 


    vector = new ol.layer.Vector({ 
     source: source, 
     style: new ol.style.Style({ 
      fill: new ol.style.Fill({ 
       color: 'rgba(0, 255, 0, 0.5)' 
      }), 
      stroke: new ol.style.Stroke({ 
       color: '#ffcc33', 
       width: 2 
      }), 
      image: new ol.style.Circle({ 
       radius: 7, 
       fill: new ol.style.Fill({ 
       color: '#ffcc33' 
       }) 
      }) 
     })  
    }); 



    var map = new ol.Map({ 
     target: 'map', 
     layers: [ 
      new ol.layer.Tile({ 
       source: new ol.source.OSM() 
      }), 
      vector 
     ], 
     view: new ol.View({ 
      center: ol.proj.fromLonLat([37.41, 8.82]), 
      zoom: 4 
     }) 
    }); 



    var draw; // global so we can remove it later 
    function addInteraction() 
    { 
     var value = 'Box'; 

     if (value !== 'None') 
     { 
      var geometryFunction, maxPoints; 
      if (value === 'Square') 
      { 
       value = 'Circle'; 
       geometryFunction = ol.interaction.Draw.createRegularPolygon(4); 
      } 
      else if (value === 'Box') 
      { 
       value = 'LineString'; 
       maxPoints = 2; 
       geometryFunction = function(coordinates, geometry) 
       { 
        if (!geometry) 
        { 
         geometry = new ol.geom.Polygon(null); 
        } 
        var start = coordinates[0]; 
        var end = coordinates[1]; 
        geometry.setCoordinates([ 
        [start, [start[0], end[1]], end, [end[0], start[1]], start] 
        ]); 
        return geometry; 
       }; 
      } 

      draw = new ol.interaction.Draw({ 
       source: source, 
       type: /** @type {ol.geom.GeometryType} */ (value), 
       geometryFunction: geometryFunction, 
       maxPoints: maxPoints    
      }); 

      map.addInteraction(draw);    
     } 
    } 


    addInteraction();   

、次に何が来ますか？境界ボックスを抽出する良い方法は何ですか？

ありがとうございました！

Answer 1

リスナーと描画操作を行う必要があります。これと同じように：ここで

draw.on('drawend',function(e){ 
alert(e.feature.getGeometry().getExtent()); 
}); 

は素晴らしいfiddle