截图

二维地图中截图步骤如下：

• 创建矩形绘制工具，在地图上框出截图范围
• 使用html2canvas库将页面的dom转化为canvas
• 使用BorderAxisTool工具添加经纬度信息
• 下载图片

创建矩形绘制工具

地图绘制工具的详细教程请查看地图工具

const createDrawTool = () => {
  const style: IFeatureStyleOptions = {
    polygon: {
      color: new Spectra(predefinedColorNames.white).alpha(0.3),
      lineStyle: {
        color: "rgba(65, 118, 233, 1)",
        width: 2
      }
    }
  }
  const toolRenderer = new LVectorMapToolRenderer({}).setDrawOptions(style);
  const tool = new LVectorMapTool({
    drawType: PlotTypes.RECTANGLE,  //绘制类型：矩形       
    continious: false,              //不连续绘制     
    renderer: toolRenderer
  });
}

获取矩形范围

因为截图不需要连续绘制，所以我们 continious 设置为false。因为我们需要所绘制的矩形范围，我们可以通过注册LVectorMapTool.EventTypes.pointAdd事件存储绘制矩形时的开始点和结束点。

let rectPoints:{x:number, y:number}[] = [];
tool.on(LVectorMapTool.EventTypes.pointAdd, (args) => {
  rectPoints.push({x:args.msg.source.originalEvent.clientX, y:args.msg.source.originalEvent.clientY})
})

在绘制结束时清除绘制的内容，并开始截图。

tool.on(LVectorMapTool.EventTypes.drawFinish, (args) => { 
  toolRenderer.clear();
  const startX = rect[1].x - rect[0].x > 0 ? rect[0].x : rect[1].x;
  const startY = rect[1].y - rect[0].y > 0 ? rect[0].y : rect[1].y;
  setTimeout(() => {
    screenshot(startX, startY, Math.abs(rect[1].x - rect[0].x), Math.abs(rect[1].y - rect[0].y))
  }, 100)
})

使用html2canvas库

screenshot为根据起始点，以及宽高截取图片的方法

const screenshot = (startX:number, startY:number, width: number, height: number) => {
  html2canvas(map.getContainer(), {  
    scale: 1,                             
    allowTaint: true,                     
    useCORS: true,                        
    x: startX,
    y: startY,
    width: width,
    height: height,
  } as any).then(canvas => {
    const borderAxis = new BorderAxisTool({
      map: map,                                  
      screenRange: {                             
        xMin: startX,
        yMin: startY
      },
      canvas: canvas                             
    });
    borderAxis.draw();                             
    downloadImage(canvas.toDataURL(), "test.png"); 
  });
}

关于html2canvas的内容，查看html2canvas文档。

BorderAxisTool

BorderAxisTool是框架中创建坐标轴标签的工具。 BorderAxisTool除了上面三个必传的参数外，还有一些选填的配置项，比如经纬线属性的设置，具体查看接口IBorderAxisOptions。

const borderAxis = new BorderAxisTool({
    map: currentMap,                           //地图
    screenRange: {                             //绘制的开始位置在原始地图中的屏幕坐标（截图开始的坐标）
        xMin: 0,
        yMin: 0
    },
    canvas: canvas                             //基于此canvas中的内容进行绘制
    gridLine: { 
        majorLonLine: {                        //经度主刻度线属性
            visible: true,                     //是否显示
            lineStyle: "brown",                //线条颜色
            lineDash: [5,5,5,5],               //虚线样式
            lineWidth: 1                       //线条宽度
        },                         
        majorLatLine:{                        //纬度主刻度线属性
            visible: true,
            lineStyle: "green",
            lineDash: [5,5,5,5],
            lineWidth: 1
        },                                   
        minorLonLine:{                        //经度次刻度线属性
            visible: true,
            lineStyle: "orange",
            lineDash: [5,5,5,5],
            lineWidth: 1
        },                  
        minorLatLine: {                        //纬度次刻度线属性
            visible: true,
            lineStyle: "gray",
            lineDash: [5,5,5,5],
            lineWidth: 1
        },                  
    }
});

截图格点填色图层

如果截图时，包含格点填色图层，需要注意的是，格点填色图层的构建参数 preserveDrawingBuffer 需设置为 true。

示例中坐标轴设置略为花哨，主要为了演示可以单独设置线条颜色等。

完整示例