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中的画布结合起来。

将ID添加到Deckgl组件并引用

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组件并传递将是下载图片的动作

在第三个画布上合并画布

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

从甲板地图导出png

1 个答案: