DE:Openlayers Kosmos example

From OpenStreetMap Wiki
Jump to: navigation, search
Einleitung   Vorbereitung   HTML-Datei   CSS-Datei   JavaScript-Datei   Karte-als-Popup   eigene Kosmos-Karte online stellen    
Beispiel eigene Kosmos-Karte

Ihr habt mit Kosmos eine wunderschöne Karte erstellt, aber Ihr bekommt sie nicht online? Dieser Artikel hilft.

Als erstes erstellt Ihr bitte eine Webseite nach dieser Anleitung: OpenStreetMap Karten in eine Webseite einbinden

Wenn diese Webseite online ist, zeige ich euch nun, wie man seine eigene Kosmos-Karte dort einbindet.

Ändere die Datei OpenStreetMap.js

Lade die Datei http://www.openstreetmap.org/openlayers/OpenStreetMap.js ins eigene Verzeichnis.

Suche in der Datei OpenStreetMap.js folgende Stelle:

/**
 * Class: OpenLayers.Layer.OSM.Mapnik
 *
 * Inherits from:
 *  - <OpenLayers.Layer.OSM>
 */
OpenLayers.Layer.OSM.Mapnik = OpenLayers.Class(OpenLayers.Layer.OSM, {

Füge vor diesem Code folgendes ein:

/**
 * Class: OpenLayers.Layer.OSM.Kosmos
 *
 * Inherits from:
 *  - <OpenLayers.Layer.OSM>
 */
OpenLayers.Layer.OSM.Kosmos = OpenLayers.Class(OpenLayers.Layer.OSM, {
    /**
     * Constructor: OpenLayers.Layer.OSM.Kosmos
     *
     * Parameters:
     * name - {String}
     * options - {Object} Hashtable of extra options to tag onto the layer
     */
    initialize: function(name, options) {
        var url = [
            "http://www.xyz.de/verz1/tiles/"
        ];
        options = OpenLayers.Util.extend({ numZoomLevels: 19 }, options);
        var newArguments = [name, url, options];
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
    },

    CLASS_NAME: "OpenLayers.Layer.OSM.Kosmos"
});

Dabei steht xyz natürlich für Deine URL und verz1 für das entsprechende Verzeichnis.


XHTML Code

suche die Zeile:

...
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>

in der htm Datei und ersetze sie durch:

...
<script type="text/javascript" src="OpenStreetMap.js"></script>

Dadurch wird nicht mehr die OpenStreetMap.js aus dem Netz verwendet, sondern die eigene, die wir geändert haben.

Kosmos-Layer im XHTML-Code einbinden

suche die Zeile:

...
    layer_mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"), 
    	                                          visibility: true, displayInLayerSwitcher: false });

    map.addLayers([layer_mapnik, layer_markers]);

im der htm-Datei und ersetze sie durch:

...
    layerKosmos = new OpenLayers.Layer.OSM.Kosmos("Kosmos");

    layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
    layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");

    map.addLayer(layerKosmos);

    map.addLayer(layerMapnik);
    map.addLayer(layerCycleMap);

    layer_markers = new OpenLayers.Layer.Markers("Address", { projection: new OpenLayers.Projection("EPSG:4326"), visibility: true, displayInLayerSwitcher: false });

    map.addLayer(layer_markers);

Die Layer Mapnik, TilesAtHome und CycleMap braucht man nur einzufügen, wenn man es möchte.


Erstelle die "Tiles" mit Kosmos

Starte die Eingabeaufforderung, und wechsle in das Verzeichnis, in dem sich die Datei Kosmos.Console.exe befindet. Dann gib folgenden Befehl ein:

Kosmos.Console.exe tilegen "..\Samples\Isle of Wight\Isle of Wight.kpr" 50.5 -1.75 51 -1 0 17 -ts tiles

Die Paremeter sind:

"<Pfad zur Projektdatei>" <min. Nordwert> <min. Ostwert> <max. Nordwert> <max. Ostwert> <von Zoom-Stufe> <bis Zoom-Stufe>

Die Tiles werden im Ordner "tiles" gespeichert. Mehr dazu unter Kosmos_Tile_Map_Server

Kopiere die Kosmos-Tiles auf den Webserver

Als letztes muß man jetzt nur noch die erstellten Kosmos-Tiles auf den eigenen Webserver in das oben angegebene Verzeichnis kopieren.

Aber Achtung: Je nach Kartengröße sind das viele MBytes.

Daher ist im Beispiel nur ein kleiner Bereich als eigene Kosmos-Karte eingebunden. Der Rest wird über die anderen "Layer" angezeigt.


Beispiel