openlayer4地图及图层导出图片问题小结
来源:互联网 发布:java static的作用 编辑:程序博客网 时间:2024/06/03 21:04
直接使用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//叠加显示
var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({}),
new ol.control.ZoomSlider({}),
new ol.control.ZoomToExtent({})]),
target: 'map',
layers: [
tdtTerLayer, edge
// openstreemap,contries
],
view: new ol.View({
maxZoom: 19,
minZoom: 6,
projection: epsgWMproj,
center: ol.proj.transform([120.3351, 31.1918], epsg84proj, epsgWMproj),
zoom: 8
})
});
3//导出函数
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: 'Test.ashx',
traditional: true,
data: { paramInfo: JSON.stringify(paramObj) },
success: function (data) {
//alert("保存图层成功");
defer.resolve(data);
}
})
return defer.promise();
}
4//图片保存
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(@"~2.png"));
}
- openlayer4地图及图层导出图片问题小结
- openlayer4中加载瓦片图层
- openlayer4加载天地图
- 在OpenLayers4中将地图及叠加显示的图层生成图片保存到数据库方法
- openlayer4中获取地图坐标的方法
- WebGIS小结之六(查询地图图层)
- Java 实现图片旋转及问题小结
- 导出EXCEL问题 小结
- openlayer4入门系列一(地图描绘经纬度点)
- 百度地图开发入门【不同图层及覆盖物】
- 百度地图开发之不同图层及覆盖物
- 百度地图图片叠加层切片工具使用及注册说明 2016.2.25
- 渲染地图图层
- 增加地图图层
- 地图图层添加
- C#导出xls,word,图片及样式问题
- 百度地图开发时遇到空白图层的问题
- webpack图片问题小结
- 有return的情况下try catch finally的执行顺序(最有说服力的总结)
- NOIP复赛复习(五)程序对拍与图论模板
- bzoj 1263: [SCOI2006]整数划分
- 实验吧笔记-Metasploit对目标主机SSH爆破
- 2017.11.17(for in,object)
- openlayer4地图及图层导出图片问题小结
- 输入一个一维数组,最大的与第一个元素交换,最小的与最后一个元素交换,输出数组
- gulp架构的推荐目录
- 使用forEach标签让被选中的显示出来
- Celery-4.1 用户指南: Calling Tasks
- C语言:函数笔记
- 《java与模式》-14 代理模式
- GCP扩展数据中心进军伦敦市场
- NOIP复赛复习(六)算法分析与排序模板