Appliquer le filtre openlayers et le laisser inchangé lorsque j'enregistre la carte en tant qu'image

Question

J'ai créé une carte openlayers avec diverses polylignes. J'utilise le calque openstreetmap par défaut, mais je souhaite l'assombrir pour faire ressortir mes polylignes. J'ai trouvé que je pouvais faire cela comme suit :

map.getLayers().getArray()[0].on('postcompose', function (evt) {
   evt.context.canvas.style.filter="invert(99%)";
});

Cependant, je souhaite également que mes utilisateurs puissent télécharger cette carte au format PNG. Pour cela j'utilise le code suivant, déclenché en cliquant sur un bouton :

map.once('postcompose', function(event) {
   var canvas = event.context.canvas;
   if (navigator.msSaveBlob) {
      navigator.msSaveBlob(canvas.msToBlob(), 'mymap.png');
   } else {
      canvas.toBlob(function(blob) {
         saveAs(blob, 'mymap.png')
      });
   }
});
map.renderSync();

Malheureusement, cela ne conserve pas les modifications que j'ai apportées pour redimensionner la toile.

Quelqu’un peut-il m’aider s’il vous plaît ? Merci pour la lecture.

Answer 1

La définition d'un filtre de style sur un élément n'affectera pas la sortie de toBlob() 或 toDataURL(). Si vous souhaitez modifier le contexte du canevas plutôt que la façon dont le navigateur restitue le canevas, vous aurez besoin d'une globalCompositeOperation (à en juger par le code que vous utilisez, je suppose que vous utilisez OpenLayers 5) :

map.getLayers().getArray()[0].on('postcompose', function (evt) {
  evt.context.globalCompositeOperation = 'difference';
  evt.context.fillStyle = 'white';
  evt.context.fillRect(0, 0, evt.context.canvas.width, evt.context.canvas.height);
  evt.context.globalCompositeOperation = 'source-over';
});