地图多层级截图

绘制leaflet地图功能，然后就绘制好的地图截图存成缩率图

定义一个地图

  <div ref="imageTofile" id="mymap"></div>

绘制地图，bounds 为地图的对角线

  //定义遮罩层
                      var maskLayer = L.mask(feature, {
                        color: "#3388FF",
                        weight: 2,
                        fillColor: "#FFFFFF",
                        fillOpacity: 0.8
                      });
                      console.log(maskLayer);
                      // 加入对应key的图层
                      this.administrativeLayer[name].addLayer(maskLayer);
                      // 获取图形所在矩形框坐标
                      var bounds = layer.getBounds();
                      this.chartingObjform.frameBounds = bounds;
                      // 创建mask图层并将图框添加到地图上
                      var maskBounds = this.convertToGeoJSON(bounds);
                      var maskBoundsLayer = L.mask(maskBounds);
                      // 加入对应key的图层
                      this.administrativeLayer[name].addLayer(maskBoundsLayer);
                      // 放大地图
                      this.map.fitBounds(bounds);

使用dom-to-image对屏幕进行截图,安装dom-to-image，注意node版本

npm install dom-to-image

import domtoimage from 'dom-to-image';

先获取你绑定的dom进行整个截图

    // 获取原图
    getAllDom() {
      //使用插件domtoimage
      domtoimage
        .toPng(this.$refs.imageTofile)
        .then(dataUrl => {
          this.imgUrl = dataUrl;
        })
        .catch(function(error) {
          console.error("oops, something went wrong!");
        });
    },

对地图的图层框用latLngToContainerPoint函数转换成屏幕的像素坐标

  getCoordinate() {
      //计算右上角、左下角的像素坐标——经纬度转像素坐标
      this.screenCoor1 = this.map.latLngToContainerPoint([
        this.chartingObjform.frameBounds._northEast.lat,
        this.chartingObjform.frameBounds._northEast.lng
      ]);
      this.screenCoor2 = this.map.latLngToContainerPoint([
        this.chartingObjform.frameBounds._southWest.lat,
        this.chartingObjform.frameBounds._southWest.lng
      ]);
    },

截图

 getLastImg() {
      const that = this;
      const img = new Image();
      img.src = this.imgUrl;
      img.onload = function() {
        // 截取方格右上角横坐标
        const x = that.screenCoor2.x;
        // 截取方格左下角纵坐标
        const y = that.screenCoor1.y;
        // 截取方格宽度
        const width = that.screenCoor1.x - that.screenCoor2.x;
        // 截取方格高度
        const height = that.screenCoor2.y - that.screenCoor1.y;
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, x, y, width, height, 0, 0, width, height);
        const url = canvas.toDataURL("image/png");
        // base64转二进制图片（我需要返回给后端）
        that.blob = that.dataURLtoBlob(url, "image/png");
        //下载
        that.downloadImage(url);
      };
    },
    // base64转二进制图片
    dataURLtoBlob(dataurl) {
      var arr = dataurl.split(",");
      //注意base64的最后面中括号和引号是不转译的
      var _arr = arr[1].substring(0, arr[1].length - 2);
      var mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(_arr),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {
        type: mime
      });
    },
    //下载
    downloadImage(url) {
      // 如果是在网页中可以直接创建一个 a 标签直接下载
      let a = document.createElement("a");
      a.href = url;
      a.download = "截图";
      a.click();
    },

除了dom-to-image可以截图以外，可以用leaflet自带的一些打印输出插件

网站：Plugins - Leaflet - 一个交互式地图 JavaScript 库

但是使用的体验没有那么好，你可以用html2canvas进行截图操作

Getting Started | html2canvas

    printMapImg() {
      // console.log(L.ImageExport);

      // // 手动创建一个 canvas 标签
      const canvas = document.createElement("canvas");

      // imageTofile是给截图范围内的父级元素自定义的ref名称
      const canvasBox = this.$refs.imageTofile;
      // const canvasBox = document.getElementById('mymap');
      // 获取父级的宽高
      //  const width = parseInt(window.getComputedStyle(canvasBox).width);
      // const height = parseInt(window.getComputedStyle(canvasBox).height);
      const width = canvasBox.clientWidth;
      const height = canvasBox.clientHeight;
      canvas.width = width;
      canvas.height = height;
      console.log(canvas.width, canvas.height, "width,height", height);
      const context = canvas.getContext("2d");
      const options = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true,
        allowTaint: false,
        scale: 1
      };

      html2canvas(canvasBox, options).then(canvas => {
        // toDataURL 图片格式转成 base64
        let dataURL = canvas.toDataURL("image/png");
        this.downloadImage(dataURL);
        // console.log(dataURL, 'dataURL');
        // window.open(dataURL);
        // this.blob = this.dataURLtoBlob(dataURL, "image/png");
      });
    },