html2canvas 截屏 SuperMap（内涵一个可移动的自定义图例）

1.页面布局

<div id="can">
    <a-button type="primary" @click="dl()">下载</a-button>
    <!--地图-->
    <div id="map"></div>
    <!--自定义的图例 图例数据需要自己获取,rgb颜色格式为#ffffff,也可切换成自定义图标-->
    <div class="tuli" id="tl">
      <h1 style="font-size: 20px">图例</h1>
      <span v-for="(tl,index) in tldata">
          <button class = "tlimg" :style="{backgroundColor: tl.rgb}"  />
            <!--<img  alt class="tlimg" />-->
          {{tl.name}}
          <br />
        </span>
    </div>
</div>

2.前置条件

在加载地图时候，需要设置  crossOrigin: 'anonymous'  ，不设置这个属性在截图时只会加载空白地图。

source: new TileSuperMapRest({
            crossOrigin: 'anonymous',
            url: this.baseUrl,
            wrapX: true
          })

html2canvas 安装vue插件  npm install --save html2canvas

import html2canvas from 'html2canvas';

3.下载方法

//下载地图
    dl() {

      var ca = document.getElementById('can');
      html2canvas(ca,{
        useCORS: true,  //允许跨域 因为截图内存在地图 必须为true
        async: false,  
        allowTaint: false,  //是否允许污染画布 必须为false 污染的画布无法进行额外操作
        taintTest: true,

      }).then((canvas) => {
        //下载的文件类别
        var type = 'png'
        //上方allowTaint为true时,toDataURL会报错
        var imgData = canvas.toDataURL(type)
        var _fixType = function (type) {
          type = type.toLowerCase().replace(/jpg/i, 'jpeg')
          var r = type.match(/png|jpeg|bmp|gif/)[0]
          return 'image/' + r
        }
        // 加工image data，替换mime type
        imgData = imgData.replace(_fixType(type), 'image/octet-stream')
        /**
         * 在本地进行文件保存
         * @param  {String} data     要保存到本地的图片数据
         * @param  {String} filename 文件名
         */
        var saveFile = function (data, filename) {
          var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
          save_link.href = data
          save_link.download = filename

          var event = document.createEvent('MouseEvents')
          event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
          save_link.dispatchEvent(event)
        }

        // 下载后的文件名
        var filename = new Date().getTime() + '.' + type
        // download
        saveFile(imgData, filename)
      })

    }

4.自定义图例样式

.tlimg {
  width: 20px;
  height: 20px;
  /* border-radius:50%; */
  border: none;
}
//图例初始位置依据实际情况调整
.tuli {
  position: absolute;
  /* bottom:-240px; */
  top: 53%;
  right: 40px;
  width: 187px;
  padding-left: 10px;
  /*height:380px;*/
  border: 2px solid #e2e3e4;
}

5.图例控件拖动

//拖动图例div
    tuodong(){
      //获取元素
      var tl = document.getElementById('tl');
      var x = 0;
      var y = 0;
      var l = 0;
      var t = 0;
      var isDown = false;
      //鼠标按下事件
      tl.onmousedown = function(e) {
        //获取x坐标和y坐标
        x = e.clientX;
        y = e.clientY;

        //获取左部和顶部的偏移量
        l = tl.offsetLeft;
        t = tl.offsetTop;
        //开关打开
        isDown = true;
        //设置样式
        tl.style.cursor = 'move';
      }
      //鼠标移动
      window.onmousemove = function(e) {
        if (isDown == false) {
          return;
        }
        //获取x和y
        var nx = e.clientX;
        var ny = e.clientY;
        //计算移动后的左偏移量和顶部的偏移量
        var nl = nx - (x - l);
        var nt = ny - (y - t);

        tl.style.left = nl + 'px';
        tl.style.top = nt + 'px';
      }
      //鼠标抬起事件
      tl.onmouseup = function() {
        //开关关闭
        isDown = false;
        tl.style.cursor = 'default';
      }
    }