套用 openlayers 濾鏡並在我將地圖儲存為影像時保持不變

Question

我製作了一張 openlayers 地圖，上面有各種折線。我正在使用預設的 openstreetmap 圖層，但想將其變暗以使我的折線脫穎而出。我發現我可以按如下方式執行此操作：

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

但是，我還想讓我的用戶能夠以 PNG 格式下載此地圖。為此，我使用以下程式碼，透過點擊按鈕觸發：

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

不幸的是，這並沒有保留我為調整畫布所做的修改。

請問有人可以幫我嗎？感謝您的閱讀。

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';
});