mapbox-gl-js - 从deckl地图导出png
问题描述
我正在使用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);
});
};
解决方案
最后,我做到了!!!
我犯了一个将mapbox中的画布和deckgl中的画布结合起来的解决方案。
将 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); };
将 ref 添加到 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); }); };