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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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'; });