2016-08-02 12 views
3

Ich bin ein Neuling für OpenLayers, so leid für eine offensichtliche (und vielleicht dumme) Frage, für die ich verschiedene Lösungsansätze fand, aber keine funktionierte. Versucht dies und das, ein Dutzend verschiedene Vorschläge (here, here, here, here, here) aber vergeblich.Wie erhalten Sie die Koordinaten einer gezeichneten Box in OpenLayers?

Grundsätzlich möchte ich die Koordinaten eines gezeichneten Rechtecks ​​an einen anderen Webservice übergeben. Also, nachdem ich das Rechteck gezeichnet habe, sollte es mich aus den vier Ecken der Bounding Box ausspucken.

Was ich habe, so weit ist die grundlegende OL Schichten Beispiel zum Zeichnen eines Rechtecks:

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();   

Nun, was als nächstes kommt? Was ist eine gute Möglichkeit, die Bounding Box zu extrahieren?

Danke für Hinweise!

Antwort

5

Sie müssen einen Listener der Zeicheninteraktion zuweisen. Wie so:

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

Hier ist ein fiddle

+0

Ah great! Vielen Dank. Interessant ist jedoch, dass die Geige in Safari funktioniert, aber nicht ihre Umsetzung auf meiner Seite - was auf der anderen Seite in Firefox und Chrome (allen Mac) funktioniert ... – luftikus143

+0

Es ist ein offizielles ol3-Beispiel (http: // openlayers. org/de/latest/examples/draw-features.html), ich habe gerade den Listener hinzugefügt. Es ist seltsam, dass es auf Safari nicht funktioniert. Ich habe keine Safari, also kann ich es nicht testen. Froh, dass ich Helfen kann – pavlos

Verwandte Themen