使用react-leaflet的地图如何不开启preferCanvas实现带视图内容的截图？

核心思路 #

目前主流截图库要求开启preferCanvas大多是旧版本对SVG、多层DOM元素的捕获兼容不足，使用新版截图库配合正确的跨域配置即可在默认DOM渲染模式下完成截图，不需要修改leaflet渲染配置。 #

具体实现步骤 #

步骤1：修改瓦片层配置，支持跨域 #

在你的TileLayer组件上添加crossOrigin属性，允许截图库跨域读取瓦片资源：

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

步骤2：安装并使用html2canvas实现截图 #

1. 安装依赖：npm install html2canvas
2. 引入并添加截图逻辑，修改你的组件代码如下：

import {useState} from "react";
import {useSelector} from "react-redux";
import {MapContainer, TileLayer} from "react-leaflet";
import html2canvas from "html2canvas";
import {mapLimit, parisCoordinates} from "../Utils/constants";
import '../Styles/MapMenu.scss'

const MapContainerBox = () => {
    const [gridShow, setGridShow] = useState(false)
    const [stationShow, setStationShow] = useState(false)

    const handleScreenshot = async () => {
      // 选中地图容器元素
      const mapDom = document.querySelector('.leaflet-container')
      const canvas = await html2canvas(mapDom, {
        useCORS: true, // 开启跨域资源加载
        allowTaint: false,
        scale: window.devicePixelRatio, // 适配高DPI屏幕，保证清晰度
        logging: false
      })
      // 导出为png图片
      const downloadLink = document.createElement('a')
      downloadLink.download = '地图截图.png'
      downloadLink.href = canvas.toDataURL('image/png')
      downloadLink.click()
    }

    return (
        <MapContainer center={[22,0]}
                            zoom={3}
                            minZoom={1.5}
                            scrollWheelZoom={true}
                            style={{height: '80vh'}}
                            maxBounds={mapLimit}>
            <TileLayer 
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              crossOrigin="anonymous"
            />
            {stationShow ? <GroundStationVisualizer curStation={parisCoordinates}/> : null}
            {gridShow ? <MapGridVisualizer/> : null}
            <div className={'map-menu'}>
                <button onClick={() => setGridShow(!gridShow)}>Toggle Grid</button>
                <button onClick={() => setStationShow(!stationShow)}>Toggle Station</button>
                <button onClick={handleScreenshot}>导出截图</button>
            </div>
        </MapContainer>
    )
}

export default MapContainerBox;

备选方案：使用dom-to-image库 #

如果html2canvas对自定义覆盖物的捕获有瑕疵，可以替换为dom-to-image库，配置逻辑一致，同样不需要开启preferCanvas。 #

注意事项 #

• 所有自定义的图片、SVG覆盖物资源都需要支持CORS，否则会出现截图空白的问题
• 该方案已兼容OpenStreetMap默认瓦片、自定义DOM/SVG覆盖物的混合截图需求

内容的提问来源于stack exchange，提问作者Andrea