使用html2canvas导出arcgis地图为图片

最新推荐文章于 2024-07-19 16:50:58 发布

凡凯乐

最新推荐文章于 2024-07-19 16:50:58 发布

阅读量864

点赞数 1

分类专栏： js html2canvas svg 文章标签： javascript svg

本文链接：https://blog.csdn.net/fkl978830065/article/details/109166071

版权

本文记录了一个在使用html2canvas将arcgis地图导出为图片时遇到的手动拖拽导致的地图偏移问题及解决方案。通过分析DOM元素，发现底图和SVG标签的偏移问题，通过修改CSS属性和SVG标签结构成功解决了问题。

摘要由CSDN通过智能技术生成

使用html2canvas导出arcgis地图为图片

本以为很简单的一个需求
却卡了很长时间
因此记录一下
先说遇到的问题
如果使用代码移动和缩放地图
使用html2canvas导出无异常
但是手动拖拽地图
导出会发生偏移
看浏览器的dom元素对比一下
它的偏移主要发生在两个位置
一个是底图
另一个是svg标签
导致偏移问题的属性是

transform:translate()

这个属性
底图使用top和left替代以后完美解决底图的偏移问题
但是svg依旧不行
再次观察svg标签
发现把transform属性放入g标签中即可
代码如下

 $("#daochu").on("click", function () {
   
            let transformLay = $("#map_layer1").css('transform');//这个是底图图层
            let mapGcDiv = $("#map_gc").css('transform');//这个是svg的id
            let layArray = transformLay.replace(")", "").split(",");
            let svgArray = mapGcDiv.replace(")", "").split(",");
            // 若layArray[4] 或者layArray[5]不为0,导出图片则会发生偏移,要进行属性替换操作
            if (parseInt(layArray[4]) !== 0 || parseInt(layArray[5]) !== 0 || parseInt(svgArray[4]) !== 0 || parseInt(svgArray[5]) !== 0) {
   
                // 底图,乘以2处理底图偏移
                $("#map_layer1").css({
   
                    'transform': 'tra