ArcGIS API for JS 地图打印

本文介绍了一种使用html2canvas插件实现地图打印功能的方法,适用于各种底图服务,包括天地图、高德底图等。通过将地图容器转换为Base64字符串,并将其发送到后端生成图片,解决了直接前端下载的限制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近的项目中有一个地图打印的功能需求,将地图底图和叠加的图层服务输出成图片保存。

实现该功能通常有两钟方法,一是利用ArcGIS API For JS提供的PrintTask接口(https://developers.arcgis.com/javascript/3/jssamples/#search/PrintTask),但是该方法适用于ArcGIS Server发布的图层服务,如果底图为天地图、高德底图等,则输出为空白;第二种则是利用html2canvas插件进行通用的屏幕截图输出,这种方法适用于各种类型的底图服务。下面实现的地图打印功能也是基于html2canvas插件实现的。

实现的过程也是比较简单的,直接贴代码了。

 html2canvas($("div.map-container"), {
                    useCORS: true,
                    imageTimeout:0,
                    onrendered: function (canvas) {
                        //将长字符分段传输
                        var imgBase64Str = canvas.toDataURL(); // 获取生成的图片的url  
                        //转到后台生成图片
                        $.ajax({
                            type: "POST",
                            url: $tools.getServerBase() + "FileTool/createImgByBase64",
                            dataType: 'json',
                            data: {
                                base64Str: imgBase64Str
                                },
                            success: function (resultObj) {
                                if (resultObj.code == '1') window.open($tools.getServerBase() + resultObj.path);
                                else alert("截屏出错!" + resultObj.message);
                                unloading();
                            },
                            error: function () {
                                unloading();
                            }
                        });
                    }
                });
 public string createImgByBase64()
        {
            string path = "";
            Dictionary<string,string> resultObj = new Dictionary<string,string>();
            try
            {
                string folder = AppDomain.CurrentDomain.BaseDirectory + "output";
                string savePath = folder + @"\\ouput.jpg";
                string req = Request["base64Str"].Replace("data:image/png;base64,", "");
                byte[] arr = Convert.FromBase64String(req);
                MemoryStream ms = new MemoryStream(arr);
                Bitmap bmp = new Bitmap(ms);
                if (!System.IO.Directory.Exists(folder)) System.IO.Directory.CreateDirectory(folder);
                bmp.Save(savePath, System.Drawing.Imaging.ImageFormat.Jpeg);
                ms.Close();
                path = "output//ouput.jpg";
                resultObj.Add("code", "1");
                resultObj.Add("path", path);
            }
            catch (Exception ex)
            {
                resultObj.Add("code", "0");
                resultObj.Add("message", ex.Message);
            }
            JavaScriptSerializer jsonSerializer = new JavaScriptSerializer();
            string s = jsonSerializer.Serialize(resultObj);
            return s;
        }

在实现功能过程中遇到一些问题,一是直接在前端利用a标签进行截图下载出现了问题,后面转为将base64字符串传到后台生成图片路径返回到前端,这时候遇到url字符串过长的问题,需要在webConfig中进行以下设置:

<system.web>
    <authentication mode="None"/>
    <compilation debug="true" targetFramework="4.5.2"/>
    <httpRuntime targetFramework="4.5.2" maxUrlLength="10999" maxQueryStringLength="2097151" maxRequestLength="10000" useFullyQualifiedRedirectUrl="true"/>
  </system.web>
  <security>
       <requestFiltering>
       <requestLimits maxUrl="10999" maxQueryString="2097151" />
       </requestFiltering>
   </security>
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值