Exportieren/laden Sie Mapbox-Karten mit Overlays und Markierungen aus HTML herunter

Question

Ich möchte eine HTML-Seite erstellen, auf der Kunden ihre personalisierte Karte erstellen können. Ich habe Mapbox verwendet, um dies zu erstellen. Über dieser Karte befindet sich ein Overlay, und Kunden können auch Markierungen auf der Karte platzieren. Aber ich kämpfe mit zwei großen Problemen:

1. So erhalten Sie hochwertige Kartenbilder, einschließlich Overlays und Markierungen. Weil ich sie auf ein Poster drucken möchte.

2. Wie kann ich diese Logik in meinem Online-Shop implementieren, damit dieses Bild, nachdem der Kunde auf „Speichern“ klickt und einen Kauf tätigt, an meinen Server gesendet wird, damit ich es ausdrucken kann?

https://www.cartida.de/map/ (Die Logik sollte so sein) https://midi-hazel-palm.glitch.me/ (sieht derzeit so aus)

Ich habe diesen Code geschrieben, um die Karte herunterzuladen:

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

Überlagerungen und Markierungen werden jedoch nicht hinzugefügt.

Vielen Dank. Wir freuen uns von Ihnen zu hören.

Ich möchte qualitativ hochwertige Bilder der Mapbox API im HTML-Format

Answer 1

静态图像 API 将允许您完成此任务。 这里是一个教程，展示了非常相似的用例给你的。代码应该非常相似，您只需对 addLayerStyle 函数进行一些更改即可创建带有自定义标记的 SymbolLayer，而不是示例中所示的 LineLayer。