openlayer4地图及图层导出图片问题小结

在使用OpenLayers 4时遇到地图导出图片的跨域问题,通过设置图层的crossOrigin属性为'anonymous'来解决。在自定义图层和叠加显示地图时分别设置XYZ和ImageArcGISRest源的crossOrigin属性。导出功能通过监听地图的postcompose事件获取canvas,然后转换为Blob对象进行保存。代码中提供了导出图片的完整流程,包括使用FileReader将Blob转换为DataURL,以及发送异步请求保存图片。
摘要由CSDN通过智能技术生成

直接使用ol4中的地图导出功能在我们的项目中可能会存在跨域问题,导致地图不能正常的转为二进制。

解决方法:

1 //自定义图层中添加crossOrigin,具体如下:
        var tdtTerLayer = new ol.layer.Tile({
            visible: true,
            source: new ol.source.XYZ({
                crossOrigin: 'anonymous',
                url: tdtter
            })
        });


        var edge = new ol.layer.Image({
            source: new ol.source.ImageArcGISRest({
                crossOrigin: 'anonymous',
                ratio: 1,
                params: {},
                url: jsmap
            })
        });

2//叠加显示

v

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值