在OpenLayers4中将地图及叠加显示的图层生成图片保存到数据库方法

WebGIS 专栏收录该内容
20 篇文章 0 订阅

在调用自己发布的图层服务时注意在图层源属性中加入跨域

new ol.layer.Image({
                   source: new ol.source.ImageArcGISRest({
                       ratio: 1,
                       params: {},
                       crossOrigin: 'anonymous',
                       url: "http://10.5.1.186:6080/arcgis/rest/services/thly/thlyfq/MapServer"
                   })
               })

否则在图片转换时报错。

navigator.msSaveBlob(canvas.msToBlob(), 'map.png'); 中提示canvas.msToBlob()发生严重性错误。

 

openlayers4获取地图及叠加图层的代码如下:

//*****************************************************************************************************
//*****************************************图片持久化转换**********************************************
//*****************************************************************************************************
        function readBlobAsDataURL(blob, callback) {
            var a = new FileReader();
            a.onload = function (e) {
                callback(e.target.result);
            }
            a.readAsDataURL(blob);
        }




        $("#savemap").click(function () {
            map.once('postcompose', function (event) {
                var canvas = event.context.canvas;
                var SLT_pic = new ArrayBuffer();


                if (navigator.msSaveBlob) {
                    var ttt = canvas.msToBlob();
                    


                    readBlobAsDataURL(ttt, function (dataurl)
                    {
                        var name = "testpic.png";
                        post_webservice_async_json({ "oper": "SaveIMG","picname":name,"oge": dataurl });
                    })


                } else {
                    canvas.toBlob(function (blob) {
                        var mmm = blob;
                        alert("Binary pic",mmm);
                    });
                }
            });
            map.renderSync();
        });


        function post_webservice_async_json(paramObj) {
            var returnStr = "";
            var defer = $.Deferred();
            $.ajax({
                type: 'post',
                async: true,
                dataType: 'json',
                url: 'JiangSu.ashx',
                traditional: true,
                data: { paramInfo: JSON.stringify(paramObj) },//图片转成二进制长度很大,故采用Json格式进行处理。
                success: function (data) {
                    //alert("保存图层成功");
                    defer.resolve(data);
                }
            })
            return defer.promise();
        }

 

JiangSu.ashx代码如下:

 //js通过ajax传递参数至该模块
    public void ProcessRequest (HttpContext context) {
        string res;
        string paramInfo = null;
        paramInfo = context.Request.Form["paramInfo"];
        //图片读取
        if (paramInfo != null && paramInfo != "")
        {
            JavaScriptSerializer aa = new JavaScriptSerializer();


            Dictionary<string, string> dic = aa.Deserialize<Dictionary<string, string>>(paramInfo);


            string obj = dic["oge"].Replace(" ", "+").Split(',')[1];


            byte[] array = Convert.FromBase64String(obj);//转成二进制数组


            string oper = dic["oper"];
            string picname = dic["picname"];


            MemoryStream ms = new MemoryStream(array);

            Image image = new Bitmap(ms);

            image.Save(context.Server.MapPath(@"~1.png"));

          //调用持久化函数,将图片二维数组进行保存
            res = JS_PicBinaryFunc("SaveCons", oper, picname, array);

}

 

 

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

David_SIAT

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值