從 HTML 匯出/下載帶有疊加層和標記的 Mapbox 地圖

Question

我想建立一個 HTML 頁面，客戶可以在其中建立他們的個人化地圖。我使用 Mapbox 來創建這個。在此地圖之上有一個覆蓋層，客戶也可以在地圖上放置標記。但我正在努力解決兩個大問題：

1. 如何獲得高品質的地圖圖片，包括疊加層和標記。因為我想把它們印在海報上。

2. 我如何在我的網上商店中實現此邏輯，以便在客戶單擊“保存”並進行購買後，這張圖片將發送到我的伺服器，以便我可以列印它。

https://www.cartida.de/map/ （邏輯應該是這樣的） https://midi-hazel-palm.glitch.me/（目前看起來像這樣）

我寫了這段程式碼來下載地圖：

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

但是未新增疊加層和標記。

謝謝你們。期待您的來信。

我想要 Html 格式的 Mapbox API 的高品質圖片

Answer 1

靜態圖像 API 將允許您完成此任務。 這裡是一個教程，展示了非常相似的用例給你的。程式碼應該非常相似，您只需對 addLayerStyle 函數進行一些更改即可建立帶有自訂標記的 SymbolLayer，而不是範例中所示的 LineLayer。