如何从react-leaflet打印图像？

Question

我正在尝试从反应传单地图打印图像，你有解决方案吗？

function MapLeaflet(props) {
const [adressArray, setAdressArray] = useState(false);
const [position, setPosition] = useState([51.505, -0.09]);
const [newPos, setNewPos] = useState(false);
const [mapCenter, setMapCenter] = useState([51.505, -0.09]);
const [mapReady, setMapReady] = useState(false);
const [mapLoading, setMapLoading] = useState(false);
const [currentMapCenter, setCurrentMapCenter] = useState(false);
const [currentMapZoom, setCurrentMapZoom] = useState(false);
const [updateMapCenter, setUpdateMapCenter] = useState(false);

const RefMap = useRef();
const RefCanvas = useRef(null);

const onChangeMapReady = () => {
    setMapReady(true);
}

const AddBigImage = () => {
    let map = useMap();
    BigImage().addTo(map);
    return null
}

return (
    <div>
        <div
            className={'mapLeaflet'}
            style={{'height': props.height, 'width': '100%', 'paddingTop': '20px'}}
        >
            <MapContainer
                style={{'height': '400px', 'width': '100vw'}}
                center={props.mapCenter ? props.mapCenter : mapCenter}
                zoom={props.mapZoom ? props.mapZoom : 19}
                ref={RefMap}
                whenReady={() => {
                    onChangeMapReady()
                }}

                scrollWheelZoom={true}>
                <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>

                {mapReady ?
                    <AddBigImage/>
                    : ''
                }
                {props.takePicture ?
                    <TakePictures/> : ''
                }
                )
            </MapContainer>
        </div>
   
    </div>
)

}

我尝试了不同的“传单”插件，但我在将它们导入到 React 中时遇到了问题。

我目前正在使用“simple-map-screenshoter”，但我遇到了错误（我认为来自“document.createElement”）。

  const TakePictures = () => {
    const map = useMap();
    const snapshotOptions = {
        hideElementsWithSelectors: [
            ".leaflet-control-container",
            ".leaflet-dont-include-pane",
            "#snapshot-button"
        ],
        hidden: true
    };
    // Add screenshotter to map
    const screenshotter = new SimpleMapScreenshoter(snapshotOptions);
    screenshotter.addTo(map);

    // new SimpleMapScreenshoter().addTo(map)
    const takeScreenShot = () => {
        // Get bounds of feature, pad ot a but too
        const featureBounds = map.getBounds().pad(0.1);
        // Get pixel position on screen of top left and bottom right
        // of the bounds of the feature
        const nw = featureBounds.getNorthWest();
        const se = featureBounds.getSouthEast();
        const topLeft = map.latLngToContainerPoint(nw);
        const bottomRight = map.latLngToContainerPoint(se);
        // Get the resulting image size that contains the feature
        const imageSize = bottomRight.subtract(topLeft);
        // Set up screenshot function
        screenshotter
            .takeScreen("image")
            .then((image) => {
                // Create <img> element to render img data
                var img = new Image();

                // once the image loads, do the following:
                img.onload = () => {
                    // Create canvas to process image data
                    const canvas = document.createElement("canvas");
                    // const canvas = L.tileLayer.canvas;
                    const ctx = canvas.getContext("2d");

                    // Set canvas size to the size of your resultant image
                    canvas.width = imageSize.x;
                    canvas.height = imageSize.y;
                    // Draw just the portion of the whole map image that contains
                    // your feature to the canvas
                    // from https://stackoverflow.com/questions/26015497/how-to-resize-then-crop-an-image-with-canvas
                    ctx.drawImage(
                        img,
                        topLeft.x,
                        topLeft.y,
                        imageSize.x,
                        imageSize.y,
                        0,
                        0,
                        imageSize.x,
                        imageSize.y
                    );
                    // Create URL for resultant png
                    let imageurl = canvas.toDataURL("image/png");
                    console.log(imageurl);
                    let data = {};
                    data['snapshot'] = imageurl;
                    props.pictureDone(imageurl, map.getCenter(), map.getZoom());
                };
                img.src = image;
            })
            .catch((e) => {
                alert(e.toString());
            });
    };
    takeScreenShot();
    return null
}

我对'BigImage'感兴趣，显示多个图标但没有交互。

    const AddBigImage = () => {
    let map = useMap();
    L.control.BigImage().addTo(map);
    return null
}

我走的路对吗？

Answer 1

请使用

react-leaflet-easyprint

。

查看 npm 上的包：https://www.npmjs.com/package/react-leaflet-easyprint

通过运行以下命令进行安装：

npm i react-leaflet-easyprint