从 deckl 地图导出 png

Question

我正在使用 react-map-gl with deck.gl 将图层加载到 mapbox。

我正在尝试导出带有图层的地图的 png 图像，但下载图像时不显示图层。

图层是：一层 GeojsonLayer 和一层 HexagonalLayer。

如何在我的 png 中显示图层？

<MapGL
  ref={this.mapRef}
  {...viewport}
  className="mapbox"
  mapStyle={mapStyle}
  mapboxApiAccessToken={MAPBOX_TOKEN}
  preserveDrawingBuffer={true}
  attributionControl={false}
  onLoad={this.handleLoad}
  onViewportChange={(viewport) => {
    viewport.width = "100%";
    viewport.height = "400px";
    this.setState({ viewport });
  }}
>
  <DeckGL layers={layers} onHover={this.onHoverDeckgl} viewState={viewport} />
</MapGL>;

//这是我下载图片的方法。

downloadImage = () => {
    const fileName = `${"Mapa"}_${moment().format(
        "DD_MM_YYYY_ HH_mm"
    )}.png`;

    const canvas = this.state.mapGL.getCanvas();
    canvas.toBlob(blob => {
        FileSaver.saveAs(blob, fileName);
    });
};

Answer 1

我终于做到了！！！

我犯了一个解决方案，将 mapbox 的 canvas 和 deckgl 的 canvas 结合起来。

将 id 添加到 Deckgl 组件和 ref

return (
     <DeckGL
        id="deck-gl-canvas"
        ref={this.deckRef}
        layers={layers}
        onHover={this.onHoverDeckgl}
        onLoad={this.handleLoad}
        viewState={viewport}
     >
        {this.renderTooltip()}
     </DeckGL>
);

// pass deck reference where will be action to download image
handleLoad = () => {
    const deck = this.deckRef.current.deck;
    this.props.onGetDeckGL(deck);
};

向 Mapbox 组件添加 ref 并传递将是下载图像的操作
调用重绘到牌组

合并 canvas 第三个 canvas

downloadImage = () => {
    const fileName = "Map.png";

    const { mapGL, deck } = this.state;
    const mapboxCanvas = mapGL.getCanvas(
        document.querySelector(".mapboxgl-canvas")
    );
    deck.redraw(true);
    const deckglCanvas = document.getElementById("deck-gl-canvas");

    let merge = document.createElement("canvas");
    merge.width = mapboxCanvas.width;
    merge.height = mapboxCanvas.height;

    var context = merge.getContext("2d");

    context.globalAlpha = 1.0;
    context.drawImage(mapboxCanvas, 0, 0);
    context.globalAlpha = 1.0;
    context.drawImage(deckglCanvas, 0, 0);

    merge.toBlob(blob => {
        FileSaver.saveAs(blob, fileName);
    });
};

从 deckl 地图导出 png

Export png from deckl map

mapbox-gl-js

deck.gl

react-map-gl