Wenden Sie den Openlayers-Filter an und lassen Sie ihn unverändert, wenn ich die Karte als Bild speichere

Question

Ich habe eine OpenLayers-Karte mit verschiedenen Polylinien darauf erstellt. Ich verwende den Standard-Openstreetmap-Layer, möchte ihn aber abdunkeln, um meine Polylinien hervorzuheben. Ich habe herausgefunden, dass ich das wie folgt machen kann:

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

Ich möchte jedoch auch, dass meine Benutzer diese Karte im PNG-Format herunterladen können. Dazu verwende ich folgenden Code, ausgelöst durch einen Klick auf einen Button:

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();

Leider bleiben die Änderungen, die ich zur Größenänderung der Leinwand vorgenommen habe, nicht erhalten.

Kann mir bitte jemand helfen? Vielen Dank fürs Lesen.

Answer 1

在元素上设置样式过滤器不会影响 toBlob() 或 toDataURL() 的输出。如果您想更改画布上下文而不是浏览器渲染画布的方式，您将需要一个 globalCompositeOperation （从您正在使用的代码来看，我假设您正在使用 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';
});