问支持翻译3d的Leaflet.js客户端-系统屏幕截图

EN

    var mainpane = $(map.getContainer()).clone();
    var mapPane = mainpane.find(".leaflet-map-pane")[0];
    var mapTransform = mapPane.style.transform.split(",");
    this.mapX = parseFloat(mapTransform[0].split("(")[1].replace("px", ""));
    this.mapY = parseFloat(mapTransform[1].replace("px", ""));
    var canvas = document.createElement("canvas");
    canvas.className = "screenShotCanvas";
    canvas.width = map.getSize().x;
    canvas.height = map.getSize().y;
    canvas.style.left = -this.mapX;
    canvas.style.top = -this.mapY;
    var ctx = canvas.getContext("2d");



drawSVGOnCanvas: function(map, mainpane, ctx) {
    var overlayClass = $(map.getPanes().overlayPane).attr('class');
    var svgE = mainpane.find('.' + overlayClass.replace(' ', '.')).find('svg');
    var xml;
    var svgElements = svgE[0];
    var svgElementsTransform = svgElements.style.transform.split(",");
    var svgElementsX = parseFloat(svgElementsTransform[0].split("(")[1].replace("px", ""));
    var svgElementsY = parseFloat(svgElementsTransform[1].replace("px", ""));
    svgElements.style.transform = " ";
    svgElements.style.left = svgElementsX + "px";
    svgElements.style.top = svgElementsY + "px";

    var svgCanvas = document.createElement("canvas");
    svgCanvas.className = "screenShotTempCanvas";
    svgCanvas.id = "SvgToCanvas";
    svgCanvas.width = map.getSize().x;
    svgCanvas.height = map.getSize().y;
    var svgCtx = svgCanvas.getContext("2d");

    svgE.each(function() {
        L.DomUtil.getPosition(svgE);
        xml = new XMLSerializer().serializeToString(this);
        canvg(svgCanvas, xml);
    });
    ctx.drawImage(svgCanvas, svgElementsX + that.mapX, svgElementsY + that.mapY);
},

        var that  = this,
            map_c = that.map.getContainer();

        //Check if have svg on map
        var svg     =  map_c.querySelector('svg');
        var _canvas = map_c.querySelector('canvas');

        if(svg) {

            var svg_attr = {
                w: parseInt(svg.attributes.width.value),
                h: parseInt(svg.attributes.height.value)
            };

            _canvas.width  = svg_attr.w;
            _canvas.height = svg_attr.h;

            _canvas.style.display = 'block';

            var serializer = new XMLSerializer();

            var c   = _canvas;
            var ctx = c.getContext('2d');
            ctx.clearRect(0, 0, svg_attr.w, svg_attr.h);

            var trans_val = map_c.querySelector('.leaflet-map-pane').style['transform'].replace('translate','').replace(/px/g,'').replace('(','').replace(')','').split(',');

            var trans_y = parseInt(trans_val[trans_val.length - 1]) ,
                trans_x = parseInt(trans_val[trans_val.length - 2]);


            ctx.translate(trans_x,trans_y);
            ctx.drawSvg("<svg>"+serializer.serializeToString(svg)+"</svg>", 0, 0, svg_attr.w, svg_attr.h);
            svg.style.display = 'none';
        }