vue + html2canvas + ArcGIS 3.x 地图一键截图功能踩坑之路(三)

 4、地图移动之后再截图，截图的点线位置和视图的不一样，图片有偏移

这个问题表现在，地图底图正常，绘制的点线层和截图前不一样。点线层偏的老远。

最终解决方案： html2canvas用onclone(), 把svg的位移从transform换成用viewbox控制。

先看渲染出来的代码，地图底图是一个div，然后地图上自己画的线、打的点什么的全都在一个svg里面。

后面测出来好像和电脑的分辨率有点关系，又发现是在html2canvas转换的时候svg的transform有点失灵，查资料说可以把svg的定位方式改成另外一种。于是先试试用绝对定位top、left来控制位移。

先在html2canvas之前复制一个dom进行操作，为了不影响视图界面上的地图呈现，后面使用html2canvas的时候记得也要换成这个新的dom。

因为html2canvas的目标dom是一定要渲染出来的，所以还要给这个newDom加上一个绝对定位append到页面上。测试的时候暂时放在最上层不管他。

bug1：这里有一个坑，在外面复制dom的这种方法，html2canvas要去掉scrollX 和 scrollY，否则截图不全。

然后找到svg的transform，得到一个translate(xxx,xxx)或者matrix(x,x,x,x,x,x)的字符串。这两种我都获得过，好在偏移量的xy值是括号里面的后两位，用

        let trans = svgDom.style.transform;

        let transArr = trans.substring(10, trans.length - 1).split(",");

        svgDom.style.transform = "";  /