使用html2canvas导出arcgis地图为图片

本文记录了一个在使用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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值