如何获取带有标记的自定义区域地图截图？

问题描述 #

我想获取特定区域的地图截图并显示该区域内的标记，但使用现有代码生成的截图只有完整地图，看不到标记。

现有代码 #

const handleSnapshotClick = () => {
    console.log("Snapshot clicked");
    map.current?.getMap().triggerRepaint()
    map.current?.getMap().once('render', () => {
      const img = map.current?.getMap().getCanvas().toDataURL()
      console.log("Snapshot img -", img);
    });
  }

return (
    <>
      <div className="info_icon">
        <IconButton
          size="large"
          aria-label="account of current user"
          aria-controls="menu-appbar"
          aria-haspopup="true"
          onClick={handleMenu}
          color="inherit"
        >
          <InfoIcon />
        </IconButton>
        <Menu
          id="menu-appbar"
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          keepMounted
          transformOrigin={{
            vertical: 'top',
            horizontal: 'right',
          }}
          open={Boolean(anchorEl)}
          onClose={handleClose}
          className="info_icon_menu"
        >
          <MenuItem>lat: {viewport.latitude}</MenuItem>
          <MenuItem>long: {viewport.longitude}</MenuItem>
          <MenuItem>zoom: {viewport.zoom}</MenuItem>
          <MenuItem>mode: {modeId}</MenuItem>
        </Menu>
      </div>
      <Container className="main_container">
        <ReactMapGL
          ref={map}
          {...viewport}
          mapboxApiAccessToken={token}
          mapStyle="mapbox://styles/link"
          onViewportChange={(viewport: ViewPort) => {
            setViewport(viewport);
          }}
          onClick={selectOnClick}
          onMouseMove={highlightHoveredRegion}
        >
          {markers}
          <NavigationControl className={styles.navControlStyle} />
          <Editor
            // to make the lines/vertices easier to interact with
            ref={editor}
            clickRadius={12}
            mode={modeHandler}
            modeConfig={{ dragToDraw: modeId === 'drawPolygonDrag' }}
            onSelect={onSelect}
            onUpdate={onUpdate}
            selectedFeatureIndex={selectedFeatureIndex}
            features={editFeatures}
            editHandleShape={'circle'}
          />
        </ReactMapGL>
          <button onClick={handleSnapshotClick}>Take Snapshot</button>
        <Backdrop
          sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
          open={isLoading}
        >
          <CircularProgress color="inherit" />
        </Backdrop>
      </Container>
    </>
  );

问题根源 #

react-map-gl的标记（包括<Marker>组件）是渲染在地图Canvas之外的独立DOM元素，getCanvas()只能获取地图本身的Canvas内容，因此截图无法包含标记。同时现有代码也未处理特定区域的裁剪需求。

解决步骤 #

1. 使用html2canvas捕获完整地图容器（含标记） #

放弃直接获取地图Canvas，改用html2canvas捕获包含地图和所有DOM标记的容器：

• 给地图外层容器添加ref
• 安装依赖：npm install html2canvas
• 修改截图函数：

import html2canvas from 'html2canvas';

// 新增容器ref
const mapContainerRef = useRef(null);

const handleSnapshotClick = async () => {
  if (!mapContainerRef.current || !map.current) return;
  
  // 触发地图重绘，确保最新状态
  map.current.getMap().triggerRepaint();
  
  // 短暂等待，确保标记完全渲染
  await new Promise(resolve => setTimeout(resolve, 100));
  
  // 捕获容器内所有内容
  const canvas = await html2canvas(mapContainerRef.current, {
    useCORS: true, // 处理地图瓦片跨域问题
    logging: false
  });
  
  const imgData = canvas.toDataURL();
  console.log("截图数据：", imgData);
};

更新JSX，将地图放入带ref的容器：

<Container className="main_container" ref={mapContainerRef}>
  <ReactMapGL
    // 原有属性保持不变
  >
    {/* 标记、Editor等组件 */}
  </ReactMapGL>
</Container>

2. 裁剪到特定区域 #

如果需要只截取地图上的指定区域，可通过地图API将经纬度转为像素坐标，再裁剪canvas：

// 示例：定义特定区域的西南、东北经纬度
const targetBounds = [
  [minLongitude, minLatitude], // 西南角
  [maxLongitude, maxLatitude]  // 东北角
];

const handleSnapshotClick = async () => {
  // ... 前面的捕获代码 ...
  
  const mapInstance = map.current.getMap();
  // 将经纬度转为容器内的像素坐标
  const [swPixel, nePixel] = targetBounds.map(coord => mapInstance.project(coord));
  
  // 创建裁剪后的canvas
  const croppedCanvas = document.createElement('canvas');
  const ctx = croppedCanvas.getContext('2d');
  
  // 设置裁剪尺寸
  croppedCanvas.width = nePixel.x - swPixel.x;
  croppedCanvas.height = swPixel.y - nePixel.y;
  
  // 绘制裁剪区域
  ctx.drawImage(
    canvas,
    swPixel.x, nePixel.y, // 源图像起始坐标
    croppedCanvas.width, croppedCanvas.height, // 源图像裁剪尺寸
    0, 0, // 目标图像起始坐标
    croppedCanvas.width, croppedCanvas.height // 目标图像尺寸
  );
  
  const croppedImgData = croppedCanvas.toDataURL();
  console.log("裁剪后截图数据：", croppedImgData);
};

3. 注意事项 #

• 确保所有标记组件都在mapContainerRef对应的容器范围内
• 若地图使用第三方瓦片或自定义样式，需确保瓦片服务器允许跨域请求，否则需开启useCORS并配置相应跨域头
• 等待时间（setTimeout）可根据地图复杂度调整，确保标记完全渲染完成

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