Экспорт png из карты Deckl - PullRequest
Новая
       54

Экспорт png из карты Deckl

0 голосов
/ 05 мая 2020

Я использую response-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);
    });
};

1 Ответ

2 голосов
/ 07 мая 2020

Наконец, я сделал это !!!

Я нашел решение для объединения холста из mapbox и холста из deckgl.

  1. Добавить идентификатор в компонент 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);
};

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