OpenStreetMap Forum

Leon_Cremer

Member

From: 39517 Schelldorf

Registered: 2012-07-23

Posts: 7

Website

Anzuzeigenden Bereich einstellen

Hallo.

Ich stelle eine Karte mit

<div style="width: 100%; height: 100%;" id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>  <?php 
  $bildn = "stat_sys_battery_charge_anim3.png"; 
  $gr = getimagesize($bildn); ?>
<script>
    OpenLayers.Lang.setCode('de');  
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
    epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
    projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)
    var lonLat = new OpenLayers.LonLat( <?php echo $_GET['lon']; ?> ,<?php echo $_GET['lat']; ?> ).transform(epsg4326, projectTo);
    var zoom=<?php echo $radius; ?>;
    map.setCenter (lonLat, zoom);
    
    var vectorLayer = new OpenLayers.Layer.Vector("Overlay");
    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( <?php echo $_GET['lon']; ?> ,<?php echo $_GET['lat']; ?> ).transform(epsg4326, projectTo),
            {description:'Standort'} ,
            {externalGraphic: '<?php echo $bildn; ?>', graphicHeight: <?php echo $gr[1]; ?>, graphicWidth: <?php echo $gr[0]; ?>, graphicXOffset:<?php echo -$gr[0]/2; ?>, graphicYOffset:<?php echo -$gr[1]; ?>  }
        );    
    vectorLayer.addFeatures(feature);
    
    map.addLayer(vectorLayer);
    
    
    //Add a selector control to the vectorLayer with popup functions
    var controls = {
      selector: new OpenLayers.Control.SelectFeature(vectorLayer, { onSelect: createPopup, onUnselect: destroyPopup })
    };
    function createPopup(feature) {
      feature.popup = new OpenLayers.Popup.FramedCloud("pop",
          feature.geometry.getBounds().getCenterLonLat(),
          null,
          '<div class="markerContent">'+feature.attributes.description+'</div>',
          null,
          true,
          function() { controls['selector'].unselectAll(); }
      );
      //feature.popup.closeOnMove = true;
      map.addPopup(feature.popup);
    }
    function destroyPopup(feature) {
      feature.popup.destroy();
      feature.popup = null;
    }
    
    map.addControl(controls['selector']);
    controls['selector'].activate();
    
   
  </script>

dar, was auch funktioniert. Jetzt ist mir nicht klar, wie ich osm/openlayers anweisen kann, innerhalb des

<div style="width: 100%; height: 100%;" id="mapdiv"></div>

nur den Abschnitt anzuzeigen zwischen bestimmten Koordinaten - und bestenfalls den Rest auszublenden; das heißt, wenn herausgezoomt wird, wird nur der Bereich zwischen den Koordinaten angezeigt, sonst ist alles weiß. Also etwa LATLON links oben und rechts unten.

Wie würdest du das bei meinem Code tun?

quasilotte

Member

Registered: 2011-01-29

Posts: 379

Re: Anzuzeigenden Bereich einstellen

Mit dem Code kannst du den Bereich begrenzen, allerdings wird bei kleineren Zoomstufen die Anzeige immer gefüllt auch mit Karten auserhalb des Bereichs.

        map = new OpenLayers.Map ('map', {
        controls:[],
                maxExtent:
                 new OpenLayers.Bounds(-20037508.34,-20037508.34,
                                    20037508.34, 20037508.34),
 
 
           restrictedExtent: new OpenLayers.Bounds(83400, 5167000,
                                    989100, 7486800),
                                     minZoom:10,
                                     maxZoom:16
                                      });

Leon_Cremer

Member

From: 39517 Schelldorf

Registered: 2012-07-23

Posts: 7

Website

Re: Anzuzeigenden Bereich einstellen

Wie wandle ich LATLON links oben und rechts unten in Werte bei

maxExtent: new OpenLayers.Bounds

um?
Wie wandle ich LATLON links oben und rechts unten in Werte bei

restrictedExtent: new OpenLayers.Bounds

um?

maxbe

Member

Registered: 2010-01-19

Posts: 3,255

Website

Re: Anzuzeigenden Bereich einstellen

Wie wandle ich LATLON links oben und rechts unten in Werte bei

maxExtent: new OpenLayers.Bounds

um?

mit

irgendeinExtent: new OpenLayers.Bounds(längengrad,breitengrad,längengrad,breitengrad).transform(epsg4326,projectTo))

Leon_Cremer

Member

From: 39517 Schelldorf

Registered: 2012-07-23

Posts: 7

Website

Re: Anzuzeigenden Bereich einstellen

<div style="width: 100%; height: 100%;" id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>  <script>
    //OpenLayers.Lang.setCode('de');    
    epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection   
     projectTo = OpenLayers.Map("mapdiv").getProjectionObject();
        map = new OpenLayers.Map ('mapdiv', {
        controls:[],
                maxExtent: new OpenLayers.Bounds(6.949911, 50.930664, 6.969911, 50.950664).transform(epsg4326,projectTo), 
                  
           restrictedExtent: new OpenLayers.Bounds(83400, 5167000,
                                    989100, 7486800),
                                     minZoom:10,
                                     maxZoom:11
                                      });  
  </script>

Zeigt gar nichts an.

maxbe

Member

Registered: 2010-01-19

Posts: 3,255

Website

Re: Anzuzeigenden Bereich einstellen

Deine Fehlerkonsole wird sicher aussagekräftigere Hinweise liefern, aber im 1. Beitrag steht

map = new OpenLayers.Map("mapdiv"); ....; projectTo = map.getProjectionObject();

da hab ich das "projecto" als Beispiel für die Transformation rauskopiert. Im 5. Beitrag schreibst Du etwas, was ich für falsch halte, weil OpenLayers.Map("mapdiv") vermutlich nichts liefern wird:

projectTo = OpenLayers.Map("mapdiv").getProjectionObject(); ...; map = new OpenLayers.Map ()

Ganz allgemein geht die Transformation so:

OpenLayers.Bounds.transform(OpenLayers.Projection, OpenLayers.Projection);

Beispiele gibts z.B. im Wiki, wobei man da ein bisschen vorsichtig sein muss, weil OL gelegentlich geupdated wird und das Wiki hinterherhinkt. (Diese Warnung trifft aber bei ol.transform nicht zu).

Grüße, Max