मैं react-map-gl के साथ deck.gl

मैं परतों के साथ नक्शे की एक पीएनजी छवि निर्यात करने की कोशिश कर रहा हूं, लेकिन जब छवि डाउनलोड होती है तो परतें नहीं दिखाती हैं।

परतें हैं: एक जियोजोन लेयर और एक हेक्सागोनल लेयर।

मेरे पीएनजी में परतें कैसे दिखा सकते हैं ??

<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
Javier 5 मई 2020, 19:29

1 उत्तर

सबसे बढ़िया उत्तर

अंत में, मैंने किया !!!

मैंने मैपबॉक्स से कैनवास और डेकग्ल से कैनवास को संयोजित करने के लिए एक समाधान तैयार किया।

  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. मैपबॉक्स कंपोनेंट में रेफरी जोड़ें और पास इमेज डाउनलोड करने की क्रिया होगी

  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);
        });
    };
    
2
Javier 7 मई 2020, 17:53