x

Anzuzeigenden Bereich einstellen


  1. Anzuzeigenden Bereich einstellen · Leon_Cremer (Gast) · 26.07.2012 03:19 · [flux]

    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?


    • Re: Anzuzeigenden Bereich einstellen · quasilotte (Gast) · 26.07.2012 06:13 · [flux]

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

    • Re: Anzuzeigenden Bereich einstellen · Leon_Cremer (Gast) · 26.07.2012 09:48 · [flux]

      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?


    • Re: Anzuzeigenden Bereich einstellen · maxbe (Gast) · 26.07.2012 10:07 · [flux]

      Leon_Cremer wrote:

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

    • Re: Anzuzeigenden Bereich einstellen · Leon_Cremer (Gast) · 26.07.2012 17:01 · [flux]
      <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.


    • Re: Anzuzeigenden Bereich einstellen · maxbe (Gast) · 26.07.2012 18:31 · [flux]

      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