Gunakan penapis lapisan terbuka dan biarkan ia tidak berubah apabila saya menyimpan peta sebagai imej
P粉951914381
P粉951914381 2023-09-10 09:51:05
0
1
589

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.

P粉951914381
P粉951914381

membalas semua(1)
P粉252423906

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';
});
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan