Eksport/muat turun peta Mapbox dengan tindanan dan penanda daripada HTML

Question

Saya mahu membina halaman HTML di mana pelanggan boleh membina peta peribadi mereka. Saya menggunakan Mapbox untuk mencipta ini. Terdapat tindanan di atas peta ini dan pelanggan juga boleh meletakkan penanda pada peta. Tetapi saya sedang bergelut dengan dua masalah besar:

1. Cara mendapatkan imej peta berkualiti tinggi termasuk tindanan dan penanda. Kerana saya ingin mencetaknya di poster.

2. Bagaimana saya boleh melaksanakan logik ini di kedai online saya supaya selepas pelanggan mengklik "Simpan" dan membuat pembelian, imej ini akan dihantar ke pelayan saya supaya saya boleh mencetaknya.

https://www.cartida.de/map/ (Logiknya sepatutnya seperti ini) https://midi-hazel-palm.glitch.me/ (ketika ini kelihatan seperti ini)

Saya menulis kod ini untuk memuat turun peta:

function downloadMap() {
    // Get the canvas element that represents the current map view
    var canvas = map.getCanvas();

    // Create a temporary link element
    var link = document.createElement('a');
    link.download = 'map.png';
    link.href = canvas.toDataURL('image/png');

    // Add the link element to the document and click it to trigger the download
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

Tetapi tindanan dan penanda tidak ditambah.

Terima kasih. Kami berharap untuk mendengar daripada anda.

Saya mahukan imej berkualiti tinggi Mapbox API dalam format Html

Answer 1

API Imej Statik akan membolehkan anda menyelesaikan tugas ini. Di sini ialah tutorial yang menunjukkan kes penggunaan yang hampir serupa dengan anda. Kod itu sepatutnya sangat serupa, anda hanya perlu membuat beberapa perubahan pada fungsi addLayerStyle untuk mencipta SymbolLayer dengan penanda tersuai dan bukannya LineLayer yang ditunjukkan dalam contoh.