<html>
<head>
<title>地图服务底图</title>
<script type="text/javascript"
src="../framework/jquery_2.1.4/jquery.min.js"></script>
<script type="text/javascript"
src="../framework/iclient/include-leaflet.js"
include="iclient9-leaflet,iclient9-leaflet-css,leaflet.draw,leaflet.markercluster"></script>
</head>
<body>
<div id="map"
style="width: 500px;height: 500px;left:0px;position: fixed;"></div>
<canvas id="mapImg"
style="position: fixed;right:2px;top:0px;height: 500px;width:500px;border:1px solid #000;"></canvas>
<div style="position:fixed;bottom:20px;">
<input type="button" value="生成图片" onClick="readyAddImg()" /> <input
type="button" value="下载PNG图片" onClick="saveMap()" />
</div>
</body>
<script type="text/javascript">
var host = "http://support.supermap.com.cn:8090";
var map, url = host + "/iserver/services/map-world/rest/maps/World";
map = L.map('map', {
crs : L.CRS.EPSG4326,
center : [ 0, 0 ],
renderer : L.svg(),
maxZoom : 18,
zoom : 1
});
L.supermap.tiledMapLayer(url).addTo(map);
//**************************************************宝物位置**************************
//下边是Canvas绘制
var canvasMap;
var ctx;
//程序执行入口
function readyAddImg() {
var id = "map";
canvasMap = document.createElement('canvas'); //准备空画布document.getElementById("mapImg");
ctx = canvasMap.getContext("2d");
canvasMap.width = document.getElementById(id).width;
canvasMap.height = document.getElementById(id).height;
addMapFunNew(id);
setTimeout(function () { addMapFunNew(id);}, 1000);
}
//定义画布
function addMapFunNew(id) {
$("#"+id+" img").each(function(k, y) {
if(y.alt != "SuperMap iClient"){
var PointXY = y.style.transform;
var ArrayPointXY = PointXY.split("px");
var PointX = ArrayPointXY[0].substr(12,ArrayPointXY[0].length);
var PointY = ArrayPointXY[1].substr(2,ArrayPointXY[1].length);
newImage(canvasMap,y.src,parseFloat(PointX),parseFloat(PointY));
}
});
}
//Canvas将Img添加到画布中
function newImage(canvasMap,ImgUrl, x, y) {
var img = new Image();
img.setAttribute("crossOrigin", 'Anonymous');
img.src = ImgUrl;
ctx.drawImage(img, x, y, 256, 256);
}
//保存canvas画布到png图片
function saveMap() {
var canvas = canvasMap;
//3. 图片导出为 png 格式
var type = 'png';
var imgData = canvas.toDataURL(type);
// 加工image data，替换mime type
imgData = imgData.replace(_fixType(type), 'image/octet-stream');
// 下载后的图片名
var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
// download
saveFile(imgData, filename);
}
function _fixType(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
function saveFile(data, filename) {
var save_link = document.createElementNS(
'http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
save_link.dispatchEvent(event);
};
//**************************************************宝物位置**************************
//下边是SVG绘制
/* var imgObj;
function printMap(id) {
//1.将div转成svg
var divContent = document.getElementById(id).innerHTML;
var newData = "";
for(var i = 0; i < divContent.length; i++){
if(divContent.substr(i,1) == "#"){
newData += '%23';
}else{
newData += divContent.substr(i,1);
}
}
var data = "data:image/svg+xml,"
+ "<svg id='abcdddd' xmlns='http://www.w3.org/2000/svg' width='500' height='500'>"
+ "<foreignObject width='100%' height='100%'>"
+ "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:16px;font-family:Helvetica'>"
+ newData + "</div>" + "</foreignObject>" + "</svg>";
var img = new Image();
img.src = data;
document.getElementById(id + "Img").appendChild(img);
imgObj = img;
}
function saveMap() {
var img = imgObj;//document.getElementById("ssssssssssss").getElementsByTagName("img");
//2.svg转成canvas
var canvas = document.createElement('canvas'); //准备空画布
canvas.width = img.width;
canvas.height = img.height;
var context = canvas.getContext('2d'); //取得画布的2d绘图上下文
context.drawImage(img, 0, 0);
//var a = document.createElement('a');
//a.href = canvas.toDataURL('image/png'); //将画布内的信息导出为png图片数据
//a.download = "MapByMathArtSys"; //设定下载名称
//a.click(); //点击触发下载
//3. 图片导出为 png 格式
var type = 'png';
var imgData = canvas.toDataURL(type);
// 加工image data，替换mime type
imgData = imgData.replace(_fixType(type), 'image/octet-stream');
// 下载后的图片名
var filename = 'baidufe_' + (new Date()).getTime() + '.' + type;
// download
saveFile(imgData, filename);
}
var _fixType = function(type) {
type = type.toLowerCase().replace(/jpg/i, 'jpeg');
var r = type.match(/png|jpeg|bmp|gif/)[0];
return 'image/' + r;
};
var saveFile = function(data, filename) {
var save_link = document.createElementNS(
'http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0,
false, false, false, false, 0, null);
save_link.dispatchEvent(event);
}; */
</script>
</html>
