Tiles über HTTPS

Ich hatte bereits mithilfe eines PHP-Skriptes HTTPS-Tiles-Layer ermöglicht. Leider hatte diese Variante einige Nachteile. Es war langsam, da der Server jedes Tile noch einmal verarbeiten musste und es gab nur einen Server, was zu einem langsameren Aufbau der Karte führte. Grund ist, dass der Browser nur eine bestimmte Anzahl an Anfragen an einen Server schickt. Verteilt man das Tilesladen auf verschiedene Server, so baut sich die Karte schneller auf.

Jetzt verwende ich den Apache als simplen Proxy:

[cce lang=’apache‘]

ServerName s.stadtplan-ilmenau.de
ServerAlias s1.stadtplan-ilmenau.de s2.stadtplan-ilmenau.de s3.stadtplan-ilmenau.de s4.stadtplan-ilmenau.de
DocumentRoot /weg/zum/stadtplan
ALIAS /robots.txt „/weg/zur/norobots.txt“
ProxyRequests On
ProxyPass /openlayers http://openlayers.org/api
ProxyPass /mapnik http://tile.openstreetmap.org
ProxyPass /mapnikde http://a.tile.openstreetmap.de/tiles/osmde
ProxyPass /cycle http://a.tile.opencyclemap.org/cycle
ProxyPass /transport http://a.tile2.opencyclemap.org/transport
ProxyPass /mapquest http://otile1.mqcdn.com/tiles/1.0.0/osm
ProxyPass /toner http://a.tile.stamen.com/toner
ProxyPass /watercolor http://tile.stamen.com/watercolor
ProxyPass /hike http://topo.wanderreitkarte.de/topo
CacheRoot /tmp/
CacheDefaultExpire 3600
SSLEngine on
SSLCertificateKeyFile /weg/zum/ilmenau.key
SSLCertificateFile /weg/zum/ilmenau.crt

[/cce]

Was tut diese Definition?

  1. Es werden mehrere Subdomains definiert
  2. Werden Tiles in einem bestimmten Unterordner geladen, so wirkt in dem Moment der Apache als Proxy und leitet die Anfrage ungesichert an den Tiles-Server weiter und gibt die Antwort SSL-gesichert an den Client zurück.

Damit diese Definition funktioniert müssen eventuell die Apache-Module proxy, cache und disk_cachen installiert und aktiviert werden.

Für die Einbindung in OpenLayers habe ich die OpenStreetMap.js etwas angepasst. Beispielhaft hier, was ich für fast alle Karten gemacht habe:

[cce lang=’javascript‘]
/**
* Class: OpenLayers.Layer.OSM.Mapnik
*
* Inherits from:
* – <OpenLayers.Layer.OSM>
*/
OpenLayers.Layer.OSM.Mapnik = OpenLayers.Class(OpenLayers.Layer.OSM, {
/**
* Constructor: OpenLayers.Layer.OSM.Mapnik
*
* Parameters:
* name – {String}
* options – {Object} Hashtable of extra options to tag onto the layer
*/
initialize: function(name, options) {
var url1 = [
„http://a.tile.openstreetmap.org/${z}/${x}/${y}.png“,
„http://b.tile.openstreetmap.org/${z}/${x}/${y}.png“,
„http://c.tile.openstreetmap.org/${z}/${x}/${y}.png“
];
var url2 = [
„//s1.stadtplan-ilmenau.de/mapnik/${z}/${x}/${y}.png“,
„//s2.stadtplan-ilmenau.de/mapnik/${z}/${x}/${y}.png“,
„//s3.stadtplan-ilmenau.de/mapnik/${z}/${x}/${y}.png“,
„//s4.stadtplan-ilmenau.de/mapnik/${z}/${x}/${y}.png“
];
var url = („https:“ == document.location.protocol) ? url2 : url1;
options = OpenLayers.Util.extend({
numZoomLevels: 20,
attribution: „&copy; <a href=’http://www.openstreetmap.org/copyright‘>OpenStreetMap</a> contributors“,
buffer: 0,
transitionEffect: „resize“
}, options);
var newArguments = [name, url, options];
OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
},

CLASS_NAME: „OpenLayers.Layer.OSM.Mapnik“
});
[/cce]

label, , ,

4 Comments

  1. Paul 25. Mai 2014 Reply
    • AndreasAuthor 27. Mai 2014 Reply

Kommentar verfassen