DE:Openlayers Kosmos example
Einleitung | Vorbereitung | HTML-Datei | CSS-Datei | JavaScript-Datei | Karte-als-Popup | eigene Kosmos-Karte online stellen |
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.