Rechteck

Hallo zusammen,

ich scheine mal wieder an den einfachsten Dingen des Alltages zu scheitern.

Ich versuche, ein Rechteck auf eine Karte zu “zeichnen”.

var box_extents = [[53, 11, 56, 12]];
                        
                        
                                var boxes  = new OpenLayers.Layer.Boxes( 'Boxes' );
                        
                                    for (var i = 0; i < box_extents.length; i++) {
                                       ext = box_extents[i];
                                        bounds = OpenLayers.Bounds.fromArray(ext);
                                        box = new OpenLayers.Marker.Box(bounds);
                                        box.events.register('click', box, function (e) {
                                            this.setBorder('yellow');
                                        });
                                        boxes.addMarker(box);
                                    }
                        
                                    map.addLayers([boxes]);

Doch egal, was ich an Koordinaten angebe, ich lande vor Afrika.

Ich wäre hier für einen Tip dankbar, woran es haken könnte.

Vielen Dank im Voraus

Schau mal den Quellcode von diesem Beispiel an: http://openlayers.org/dev/examples/boxes-vector.html

vielleicht hilf das weiter.

Ist so ein bisschen ins Blaue hinein, aber es käme auch ein Projektionsproblem in Frage:

Wenn die Karte nicht so aussieht wie im von efred verlinkten Bsp. (höhere Breitengraden gestaucht), sondern “wie man es gewohnt ist” (Merkartor-Projektion), müssten m.E. die Werte deutlich größer sein, etwa so wie diese hier (mit noch ein bisschen Erläuterungen, das kann Mr Wolf besser als ich):
http://forum.openstreetmap.org/viewtopic.php?id=15307
(bzw. wenn sie so nicht vorliegen, müssen sie in diese Projektion transformiert werden)

Die kleinen Werte würden sonst nahe 0,0 (vor Ghana) abgebildet.

Vors Init

var box_extents = [
                [-10, 50, 5, 60],
                [-75, 41, -71, 44],
                [-122.6, 37.6, -122.3, 37.9],
                [10, 10, 20, 20]
            ]; 
    var map;

Ins Init

var boxes  = new OpenLayers.Layer.Vector( "Boxes" );
    
                for (var i = 0; i < box_extents.length; i++) {
                    ext = box_extents[i];
                    bounds = OpenLayers.Bounds.fromArray(ext);
                    
                    box = new OpenLayers.Feature.Vector(bounds.toGeometry());
                    boxes.addFeatures(box);
                }

                map.addLayers([ol_wms, boxes]);
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                var sf = new OpenLayers.Control.SelectFeature(boxes);
                map.addControl(sf);
                sf.activate();
                map.zoomToMaxExtent();

Dann ist der Browser leider nicht gewillt, ein Rechteck anzuzeigen.

Könnte es am

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

                var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} );

liegen, was ich nicht übernehme?

Wenn Du vor Afrika bei bei (0,0) landest, hast Du entweder Koordinaten von (0,0) oder Du hast irgendwo ein

.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

vergessen. Ausserdem hast Du die Koordinaten in der falschen Reihenfolge (falls die Box in Deutschland sein soll). So z.B. würde es gehn.

Grüße, Max

PS: Der Unterschied zwischen dem openlayers-Beispiel und meinem ist, dass die dort eine Plattkarte haben, mit (Längengrad/Breitengrad). OSM ist in Mercator. Das misst in soetwas ähnlichem wie “Meter” und wenn Du eine Box mit (53, 11, 56, 12) malst, ist die nur 1m breit und 3m hoch und wirkt sehr klein auf der Weltkarte.

Nachtrag: Und da das Beispiel wegen Provider kaputt grad nicht erreichbar ist:

var box_extents = [[11,53,12,56],[12.5,53.5,14.5,56.5]];
var boxes  = new OpenLayers.Layer.Boxes('Boxes');
for (var i = 0; i < box_extents.length; i++) {
  ext = box_extents[i];
  bounds = OpenLayers.Bounds.fromArray(ext);
  bounds.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
  box = new OpenLayers.Marker.Box(bounds);
  boxes.addMarker(box);
}

@Ghostrider… Ich habe es mir nochmals kurz angeschaut. Hierzu sollte man folgendes wissen:Wo neben Afrika landest Du mit den Koordinaten 53,11,56,12? Irgendwo bei 0,0 oder doch eher neben Somalia im Meer?

Wenn Du neben Somalia landest - was ich vermute - musst Du nur die Koordinaten anders setzen:Mit var box_extents = [[11, 53, 12, 56]]; statt var box_extents = [[53, 11, 56, 12]]; sollte das Rechteck nicht mehr neben Afrika sein, sondern in Norddeutschland.

Halloo zusammen,

ihr habt mal wieder Licht ins Dunkel gebracht, ganz herzlichen Dank dafür schon einmal.

Konkret waren es die Reihenfolge der Koordinaten, ich habe dann noch ein wenig mit der Transformation herumgespielt, dann lief es wie geschmiert.

Ich versuche nun, mehrere Rechtecke aus einer Datenbank zu holen, was bis dahin auch klappt.
Auch gelingt es mir nun, diese auf die Karte zu projezieren.

Was aber merkwürdig aussieht ist, dass (ich habe 3 Rechtecke definiert->DB), Hamburg, Berlin, München.

Nun packt er mir aber 2 übereinander, das Hamburger Rechteck fehlt.

Code:


echo "var box_extents = [];
              
                  $sqlGetrechtecke = "SELECT * FROM rechtecke";
                  $queryGetrechtecke = mysql_query($sqlGetrechtecke);
                  
                  while($rowGetrechtecke = mysql_fetch_object($queryGetrechtecke))
                  {
                  $id              =         $rowGetrechtecke->id;
                  $left_down_lat              = $rowGetrechtecke->left_down_lat;
                  $left_down_lng              = $rowGetrechtecke->left_down_lng;
                  $right_up_lat         = $rowGetrechtecke->right_up_lat;
                  $right_up_lng         = $rowGetrechtecke->right_up_lng;
                  
                  echo "box_extents.push([$left_down_lng,$left_down_lat,$right_up_lng,$right_up_lat]);\r\n";
                  echo "style = new OpenLayers.Style({fillColor: '#F6FF00', fillOpacity: 0.5, strokeColor: '#FF2F00', strokeWidth: 3, fontColor: 'red', fontSize: '16px', label: 'sdfsfds $id'});\r\n";
                  echo "var boxes  = new OpenLayers.Layer.Vector('Test',{styleMap: new OpenLayers.StyleMap(style)});";
                  
                  
                  
                  echo "for (var i = 0; i < box_extents.length; i++) { 
                 
                       ext = box_extents[i];
                       bounds = OpenLayers.Bounds.fromArray(ext);
                       bounds.transform(new OpenLayers.Projection('EPSG:4326'), new OpenLayers.Projection('EPSG:900913'));
                       box = new OpenLayers.Feature.Vector(bounds.toGeometry());
                       boxes.addFeatures(box);
                       
                       map.addLayers([boxes]);
                       
                       
                }";
                  
                  }
                  echo "



Hier als Bild:

http://s14.directupload.net/images/130412/9zy3rkai.png

Ich stehe irgendwie auf dem Schlauch -.-

Kommando zurück -.-

? konntest Du also das Problem beheben der überlappenden Rechtecke? Was war der Fehler? (wäre vielleicht interessant, falls mal jemand anderes das gleiche Problem haben sollte).