Gunakan penapis lapisan terbuka dan biarkan ia tidak berubah apabila saya menyimpan peta sebagai imej

Question

Saya membuat peta lapisan terbuka dengan pelbagai garis poli padanya. Saya menggunakan lapisan openstreetmap lalai, tetapi mahu menggelapkannya untuk menyerlahkan polyline saya. Saya mendapati bahawa saya boleh melakukan ini seperti berikut:

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

Namun, saya juga mahu pengguna saya boleh memuat turun peta ini dalam format PNG. Untuk ini saya menggunakan kod berikut, dicetuskan dengan mengklik butang:

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

Malangnya, ini tidak mengekalkan pengubahsuaian yang saya buat untuk mengubah saiz kanvas.

Bolehkah seseorang tolong saya? Terima kasih kerana membaca.

Answer 1

Menetapkan penapis gaya pada elemen tidak akan menjejaskan output toBlob() 或 toDataURL(). Jika anda ingin menukar konteks kanvas dan bukannya cara pelayar memaparkan kanvas, anda memerlukan GlobalCompositeOperation (berdasarkan kod yang anda gunakan, saya andaikan anda menggunakan 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';
});