mapbox-gl-js - 从deckl地图导出png

Question

我正在使用react-map-gl和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中的画布和deckgl中的画布结合起来的解决方案。

1. 将 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);
   };
   

2. 将 ref 添加到 Mapbox 组件并传递将是下载图像的操作

3. 调用重绘到甲板

4. 在第三个画布上合并画布

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