从 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。