从deck地图导出png

Question

我用的是 react-map-gl 与 甲板.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的画布和deckl的画布结合起来的解决方案。

1. 在Deckgl组件中添加id，然后将其引用到deckl组件中。

   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. 添加引用到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);
       });
   };