Grauskalierung des Kartenlayers von OpenStreetmap

So verändern Sie die Darstellung des OpenStreetmap-Templates via javascript

Um die Darstellung der Karte zu beeinflussen, muss der canvas-Layer explizit via Javascript manipuliert werden. 
Dazu muss das template map.openStreetMap.wItem.php wie folgt angepasst werden:

Auszug aus dem map.openStreetMap.wItem.php

//Auslagern der LayerObjekte um den Kartenlayer einer Variablen zuzuweisen

//Einfügen oberhalb mapObject
var layers = [new ol.layer.Tile({source: new ol.source.OSM()}), vectorLayer<xsl:value-of select="$mapId"/>];
var layer = layers[0]; 

mapObject<xsl:value-of select="$mapId"/> = new ol.Map({

   //ersetzen 
   //layers: [new ol.layer.Tile({source: new ol.source.OSM()}), vectorLayer<xsl:value-of select="$mapId"/>],

   //durch
   layers: layers,

//Weiterer Code hier nichts verändern

});

//Hier wird dem Layer die entsprechende Grauskalierung zugewiesen
layer.on('postrender', function(e){
  var ctx = e.context;
  var canvas = ctx.canvas;
  ctx.save();
  ctx.globalCompositeOperation = 'hue';
  ctx.fillStyle = 'rgba(0,0,0,1)';
  ctx.fillRect(0,0,canvas.width,canvas.height); 
  ctx.restore();                    
});
Zurück zur Übersicht