Satelliten-Karten mit OpenLayer einbinden

Communities Deutschland (Germany)
1

Hallo,

meine ersten Versuche mit OpenLayers und OpenStreetmap-Tiles funktionieren, d.h. ich habe ein paar Tiles lokal abgespeichert und mittels


layer_osm = new OpenLayers.Layer.OSM("t@h", "http://lokaler_webserver/tiles/osm/${z}/${x}/${y}.png", {
...

eingebunden.

Gerne möchte ich auch einen Layer mit Satelliten-Karten lokal abspeichern und einbinden. Lokal ist mir übrigens wichtig, da der Webserver in einer Gegend betrieben wird, in der Internet nicht verfügbar ist.

Auf der Webseite http://www.celestiamotherlode.net/catalog/earth.php werden ein paar Tiles angeboten.

Ich habe 64K Jestr Earth Mark II von dieser Seite auf meinem lokalen Webserver abgespeichert, aber vorher mit IrfanView in png umgewandelt.

Mein erster Ansatz ist wie folgt


        function init() {
            map = new OpenLayers.Map('map', {
                projection: new OpenLayers.Projection("EPSG:4326"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                tileSize: new OpenLayers.Size(1024, 1024),
                ...

            layer_dds= new OpenLayers.Layer.XYZ("dds", "http://lokaler_webserver/tiles/world/64K-Jestr-Earth-Mark-II/JMII_DDS_Level${z}/tx_${x}_${y}.png", {
                ...

aber das funktioniert nicht. Die Tiles werden nicht angezeigt und mit dem DOM-Tool vom Opera-Browser sieht man auch ganz klar, dass es nicht am Dateinamen liegen kann.

Hat jemand eine Idee ODER ein funktionierendes Beispiel mit anderen Satelliten-Karten? Ich freue mich natürlich auch über Webseiten mit Satelliten-Karten zum Download, die noch detaillierter sind.

Grüße
Coach

2

Ich hab mal mit mit den “64K Jestr Earth Mark I JPG” gespielt, ich denke die sind nicht viel anders organisiert als Deine. Und damit funktionierts:

        map = new OpenLayers.Map("Map",
                  {
                   projection: new OpenLayers.Projection("EPSG:4326"),
                   displayProjection: new OpenLayers.Projection("EPSG:4326"),
                   tileSize:  new OpenLayers.Size(1024,1024),
                   maxExtent: new OpenLayers.Bounds(-180,-90,180,90),
                   maxResolution: 0.1757812500,
                   units: 'degrees'});

        var tiles = new OpenLayers.Layer.XYZ("test",
        "http://localhost/tiles/world/JestrMarble/level${z}/tx_${x}_${y}.jpg");

        map.addLayer(tiles);

Wichtig ist wohl, dass man die passende “maxResolution” angibt. Und da hab ich leider ein Problem. Weil mit 0.1757812500 funktionierts bei mir. Meiner Meinung nach müsste das aber 360Grad/1024Pixel=0.3515625000 Grad/Pixel für Zoomlevel 0 sein. Und im Code da oben steht genau die Hälfte davon…

Max

3

Hi,

bin ich blind? Hier ist mein kompletter HTML-Code. Javascript, Stylesheets alles vorhanden, die Tiles Zoom 0-2 habe ich umgewandelt in .png und ich möchte gerne explizit Zoom-Stufe 1 angezeigt bekommen. Ich sehe nur die Navigation mit hoch/runter sowie plus/minus, aber keine Karte.


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test 64K-Jestr-Earth-Mark-II</title>

    <link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="style.css" type="text/css" />

    <script src="./lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;

        function init() {
            map = new OpenLayers.Map('map', {
                projection: new OpenLayers.Projection("EPSG:4326"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                tileSize: new OpenLayers.Size(1024,1024),
                maxExtent: new OpenLayers.Bounds(-180,-90,180,90),
                maxResolution: 0.1757812500,
                units: 'degrees'}
            );

            var layer_sat = new OpenLayers.Layer.XYZ("Test", "http://lokaler_webserver/tiles/world/64K-Jestr-Earth-Mark-II/JMII_DDS_Level${z}/tx_${x}_${y}.png");
            map.addLayer(layer_sat);
        }

        //map.zoomToMaxExtent();
        map.zoomTo(1);
    </script>
  </head>
  <body onload="init()">
    <div id="map" class="smallmap"></div>
  </body>
</html>

Was kann ich noch verkehrt machen?

Coach

4

Wenn Du dann weiter reinzoomst, kommt dann was? Ich frage, weil Deine Karte wird erst gezoomt (beim durchlaufen von Zeile 9-28) und erst später initialisiert, wenn onload=“init()” ausgeführt wird.

Setz mal die schliessende Klammer nach “map.addLayer(layer_sat);” hinter “map.zoomTo(1);”:

<script type="text/javascript">
        var map;

        function init() {
            map = new OpenLayers.Map('map', {
                projection: new OpenLayers.Projection("EPSG:4326"),
                displayProjection: new OpenLayers.Projection("EPSG:4326"),
                tileSize: new OpenLayers.Size(1024,1024),
                maxExtent: new OpenLayers.Bounds(-180,-90,180,90),
                maxResolution: 0.1757812500,
                units: 'degrees'}
            );

            var layer_sat = new OpenLayers.Layer.XYZ("Test", "http://lokaler_webserver/tiles/world/64K-Jestr-Earth-Mark-II/JMII_DDS_Level${z}/tx_${x}_${y}.png");
            map.addLayer(layer_sat);
        // <----hier keine Klammer mehr

        //map.zoomToMaxExtent();
        map.zoomTo(1);
     } // <--- hier Klammer einfuegen
    </script>

Grüße, Max

5

Hi Max,

blind :wink:

Danke
Coach