303 lines
11 KiB
Vue
303 lines
11 KiB
Vue
(function(){
|
||
var PrintMap = {};
|
||
var LAYER_COUNT = 0;
|
||
var LAYER_LENGTH = 0;
|
||
window.MapToImg = PrintMap;
|
||
|
||
PrintMap.excute = function(map){
|
||
var canvas = document.createElement("canvas");
|
||
var broz = SuperMap.Browser.name;
|
||
if(!canvas.getContext||(broz=='msie'&&!canvas.msToBlob)){
|
||
alert("您的浏览器版本太低，请升级。");
|
||
return;
|
||
}
|
||
if(document.location.toString().match(/file:\/\//)){
|
||
alert("该功能需要在服务器中发布出来后，方可使用");
|
||
return;
|
||
}
|
||
LAYER_COUNT = 0;
|
||
|
||
var layers = map.layers.concat([]);
|
||
|
||
//layers排序，将markers放到最上边
|
||
var layers1 = [];
|
||
for(var i=0;i<layers.length;){
|
||
if(layers[i].CLASS_NAME == "SuperMap.Layer.Markers"){
|
||
var templayer = layers.splice(i,1);
|
||
layers1.push(templayer[0]);
|
||
} else if(layers[i].CLASS_NAME == "SuperMap.Layer.GOAnimationLayer" ||
|
||
layers[i].CLASS_NAME == "SuperMap.Layer.PlottingLayer.Temporary" ||
|
||
(layers[i].CLASS_NAME == "SuperMap.Layer.PlottingLayer" && !layers[i].getVisibility()) ||
|
||
layers[i].CLASS_NAME == "SuperMap.Layer.PlottingLayer.RootContainer"){
|
||
//处理标绘图层的动画图层和图层不显示
|
||
layers.splice(i,1);
|
||
} else {
|
||
i++;
|
||
}
|
||
}
|
||
layers = layers.concat(layers1);
|
||
|
||
LAYER_LENGTH = layers.length;
|
||
var imgUrls = [];
|
||
for(var i=0;i<layers.length;i++){
|
||
var layer = layers[i];
|
||
if(layer.CLASS_NAME == "SuperMap.Layer.TiledDynamicRESTLayer"){
|
||
if(layer.useCanvas==false){
|
||
draw(getImgLayerData(layer,map),i,imgUrls);
|
||
}
|
||
else{
|
||
draw(getCanvasLayerData(layer),i,imgUrls);
|
||
}
|
||
}
|
||
else if(layer.CLASS_NAME == "SuperMap.Layer.Markers"){
|
||
draw(getImgLayerData(layer,map),i,imgUrls);
|
||
}
|
||
else if(layer.CLASS_NAME == "SuperMap.Layer.Vector"){
|
||
getVectorLayerData(layer,map,function(imgUrls,i){
|
||
return function(img){
|
||
draw(img,i,imgUrls);
|
||
}
|
||
}(imgUrls,i))
|
||
}
|
||
else if(layer.CLASS_NAME == "SuperMap.Layer.PlottingLayer"){
|
||
getPlottingLayerData(layer,map,function(imgUrls,i){
|
||
return function(img){
|
||
draw(img,i,imgUrls);
|
||
}
|
||
}(imgUrls,i))
|
||
}
|
||
}
|
||
};
|
||
|
||
function draw(img,i,imgUrls){
|
||
imgUrls[i] = img;
|
||
LAYER_COUNT++;
|
||
|
||
if(LAYER_COUNT>=LAYER_LENGTH){
|
||
var canvas = document.createElement("canvas");
|
||
var size = map.getSize();
|
||
canvas.height = size.h;
|
||
canvas.width = size.w;
|
||
var ctx = canvas.getContext("2d");
|
||
|
||
canvas.style.position = "relative";
|
||
canvas.style.border = "1px solid #4c4c4c";
|
||
|
||
//document.body.appendChild(canvas);
|
||
|
||
var panel = document.createElement("div");
|
||
|
||
panel.style.position = "absolute";
|
||
panel.style.left = "0px";
|
||
panel.style.top = "0px";
|
||
panel.style.height = "100%";
|
||
panel.style.width = "100%";
|
||
// panel.style.background = "#e6e8eb";
|
||
panel.style.background = "#ffffff";
|
||
document.body.appendChild(panel);
|
||
|
||
|
||
var buttonPanel = document.createElement("div");
|
||
buttonPanel.style.position = "relative";
|
||
panel.appendChild(buttonPanel);
|
||
panel.appendChild(canvas);
|
||
|
||
window.setTimeout(function(){
|
||
for(var i=0;i<imgUrls.length;i++){
|
||
ctx.drawImage(imgUrls[i],0,0);
|
||
}
|
||
|
||
if(canvas.msToBlob){
|
||
var button = document.createElement("input");
|
||
buttonPanel.appendChild(button);
|
||
button.type = "button";
|
||
button.value = "保存";
|
||
|
||
button.onclick = function(){
|
||
window.navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
|
||
}
|
||
}
|
||
else{
|
||
var aa = document.createElement("a");
|
||
buttonPanel.appendChild(aa);
|
||
aa.target = "_blank";
|
||
aa.download="map.png";
|
||
aa.href=canvas.toDataURL();
|
||
|
||
var button = document.createElement("input");
|
||
aa.appendChild(button);
|
||
button.type = "button";
|
||
button.value = "保存";
|
||
}
|
||
|
||
var button = document.createElement("input");
|
||
buttonPanel.appendChild(button);
|
||
button.type = "button";
|
||
button.value = "关闭";
|
||
button.onclick = function(){
|
||
document.body.removeChild(panel);
|
||
}
|
||
},30);
|
||
}
|
||
}
|
||
//截取图片图层
|
||
function getImgLayerData(layer,map){
|
||
var div = layer.div;
|
||
var pdiv = div.parentNode;
|
||
var offsetX = parseInt(pdiv.style.left.replace(/px/,""));
|
||
var offsetY = parseInt(pdiv.style.top.replace(/px/,""));
|
||
|
||
var canvas = document.createElement("canvas");
|
||
var size = map.getSize();
|
||
canvas.height = size.h;
|
||
canvas.width = size.w;
|
||
var ctx = canvas.getContext("2d");
|
||
|
||
canvas.style.position = "absolute";
|
||
canvas.style.left = "5px";
|
||
canvas.style.top = "600px";
|
||
canvas.style.border = "1px solid #f00";
|
||
|
||
//document.body.appendChild(canvas);
|
||
|
||
var divs = div.getElementsByTagName("div");
|
||
for(var i=0;i<divs.length;i++){
|
||
var div1 = divs[i];
|
||
if(div1.style.display!="none"){
|
||
var left = parseInt(div1.style.left.replace(/px/,""));
|
||
var top = parseInt(div1.style.top.replace(/px/,""));
|
||
var img = div1.getElementsByTagName("img")[0];
|
||
var imgWidth = img.style.width;
|
||
var imgHeight = img.style.height;
|
||
var imgW = null,imgH = null;
|
||
if(imgWidth!=null||imgWidth!=""){
|
||
imgW = parseInt(imgWidth.replace(/px/,""));
|
||
}
|
||
if(imgHeight!=null||imgHeight!=""){
|
||
imgH = parseInt(imgHeight.replace(/px/,""));
|
||
}
|
||
if(imgW!=null&&imgH!=null){
|
||
ctx.drawImage(img,left+offsetX,top+offsetY,imgW,imgH);
|
||
}
|
||
else{
|
||
ctx.drawImage(img,left+offsetX,top+offsetY);
|
||
}
|
||
}
|
||
}
|
||
|
||
var imageUrl = canvas.toDataURL("image/png");
|
||
var img = new Image();
|
||
img.src = imageUrl;
|
||
return img;
|
||
}
|
||
//截取canvas图层
|
||
function getCanvasLayerData(layer){
|
||
var div = layer.div;
|
||
var canvas0 = div.getElementsByTagName("canvas")[0];
|
||
var imageUrl = canvas0.toDataURL("image/png");
|
||
var img = new Image();
|
||
img.src = imageUrl;
|
||
|
||
return img;
|
||
}
|
||
//截取Vector图层
|
||
function getVectorLayerData(layer,map,callback){
|
||
var printLayer,
|
||
strategies = [],
|
||
features1 = [],
|
||
features = layer.features,
|
||
layerStrategies = layer.strategies;
|
||
//GeoText无法截图问题修复
|
||
if(layerStrategies){
|
||
for(var i = 0; i<layerStrategies.length; i++){
|
||
if (layerStrategies[i].CLASS_NAME === "SuperMap.Strategy.GeoText"){
|
||
strategies.push(layerStrategies[i].clone());
|
||
}else{
|
||
strategies.push(layerStrategies[i]);
|
||
}
|
||
}
|
||
printLayer = new SuperMap.Layer.Vector("PRINT_LAYER", {strategies: strategies, visibility: true, renderers: ["Canvas"]});
|
||
}else{
|
||
printLayer = new SuperMap.Layer.Vector("PRINT_LAYER", {visibility: true, renderers: ["Canvas"]});
|
||
}
|
||
map.addLayer(printLayer);
|
||
for(var j=0;j<features.length;j++){
|
||
var feature = features[j];
|
||
var feature1 = new SuperMap.Feature.Vector();
|
||
feature1.geometry = feature.geometry.clone();
|
||
feature1.style = feature.style;
|
||
|
||
features1.push(feature1);
|
||
}
|
||
if(layer.style){
|
||
printLayer.style = layer.style;
|
||
}
|
||
|
||
printLayer.setOpacity(0);
|
||
printLayer.addFeatures(features1);
|
||
|
||
window.setTimeout(function(printLayer,map,callback){
|
||
return function(){
|
||
var div = printLayer.div;
|
||
var canvas1 = div.getElementsByTagName("canvas")[0];
|
||
var cxt1 = canvas1.getContext("2d");
|
||
var imageUrl = canvas1.toDataURL("image/png");
|
||
|
||
map.removeLayer(printLayer);
|
||
printLayer.destroy();
|
||
|
||
var img = new Image();
|
||
img.src = imageUrl;
|
||
|
||
callback(img);
|
||
}
|
||
}(printLayer,map,callback),30);
|
||
}
|
||
|
||
//截取Plotting图层
|
||
function getPlottingLayerData(layer,map,callback){
|
||
var printLayer,
|
||
features1 = [],
|
||
features = layer.features,
|
||
|
||
printLayer = new SuperMap.Layer.PlottingLayer("PRINT_LAYER", layer.serverUrl, {visibility: true, renderers: ["Canvas"]});
|
||
//printLayer.spatialAnalystUrl = layer.spatialAnalystUrl;
|
||
|
||
map.addLayer(printLayer);
|
||
for(var j=0;j<features.length;j++){
|
||
if(features[j].geometry instanceof SuperMap.Geometry.PlottingGeometry){
|
||
var feature = features[j];
|
||
var feature1 = SuperMap.Plot.PlottingUtil.copyFeature(feature);
|
||
features1.push(feature1);
|
||
} else {
|
||
var feature1 = new SuperMap.Feature.Vector();
|
||
feature1.geometry = features[j].geometry.clone();
|
||
feature1.style = features[j].style;
|
||
features1.push(feature1);
|
||
}
|
||
}
|
||
if(layer.style){
|
||
printLayer.style = layer.style;
|
||
}
|
||
|
||
printLayer.setOpacity(0);
|
||
printLayer.addFeatures(features1);
|
||
|
||
window.setTimeout(function(printLayer,map,callback){
|
||
return function(){
|
||
var div = printLayer.div;
|
||
var canvas1 = div.getElementsByTagName("canvas")[0];
|
||
var cxt1 = canvas1.getContext("2d");
|
||
var imageUrl = canvas1.toDataURL("image/png");
|
||
|
||
map.removeLayer(printLayer);
|
||
printLayer.destroy();
|
||
|
||
var img = new Image();
|
||
img.src = imageUrl;
|
||
|
||
callback(img);
|
||
}
|
||
}(printLayer,map,callback),30);
|
||
}
|
||
})(); |