Html2canvas: Exportar usando Leaflet

Proporcione un ejemplo del problema usando http://jsfiddle.net

Agregué el jsfiddle. https://jsfiddle.net/japiasente/7ybndo5L/

Se necesitan algunos trucos desagradables para que funcione. Aquí hay un ejemplo simple sin arreglos:

http://jsfiddle.net/djwbra47/

Hay varios problemas:

1. El marcador circular se recorta en un cuarto de círculo. Parece que html2canvas está recortando elementos ANTES de aplicar cualquier transformación. El marcador estaría centrado en 0,0 sin ninguna transformación, por lo que se recorta al cuarto de círculo que sería visible en esa posición. Luego, html2canvas lo transforma en la ubicación real. Lo arreglé configurando los márgenes izquierdo y superior en 0 en lugar de negativo (para que todo el marcador fuera visible en 0,0), luego ajusté las transformaciones en la misma cantidad. (Y luego vuelva a cambiar esos valores después de agarrar el lienzo, por supuesto).
2. La línea aparece en el lugar equivocado. Parece que html2canvas está aplicando transformaciones en las rutas SVG DOS VECES. Sin arreglos, la línea aparece demasiado hacia la parte superior izquierda. Si cambia su transformación a 0, muestra la misma distancia demasiado hacia la parte inferior derecha. Tuve que configurar la transformación a la mitad de los valores originales para que funcionara.
3. Cuando desplaza el mapa, los mosaicos se recortan en la extensión original. Este es el mismo problema que el número 1: Leaflet desplaza el mapa transformando el panel del mapa, y html2canvas recorta los mosaicos antes de que se aplique esa transformación. Para solucionarlo, agregue los valores de transformación X e Y a los valores izquierdo y superior de cada imagen, luego establezca sus transformaciones en 0.
4. Cuando desplaza el mapa, html2canvas dibuja los mosaicos sobre el marcador y la línea para que ya no sean visibles. Esto se arregla cuando haces los cambios en el número 3, pero no entiendo por qué. ¿Quizás el orden de dibujo cambia cuando se actualizan las propiedades de un elemento?

Aquí está la versión fija:
http://jsfiddle.net/oo2yms1h/

Todavía hay un problema que aún no he resuelto: cuando desplaza el mapa para que la línea esté cerca del borde derecho, no aparece en el lienzo. Pero supongo que es otro resultado del recorte de html2canvas antes de la transformación.

Una nota más: el marcador de folleto predeterminado es una imagen alojada en cdn.leaflet.com que genera un error CORS, lo que significa que no aparecerá en el lienzo. Cualquiera que lo use con html2canvas necesitaría alojar el icono por sí mismo o cambiar a un estilo de marcador diferente.

JAPiasente, parece que mi solución en el número 3 se puede adaptar para resolver sus problemas de mosaico y panorámica. Además, sus marcadores son rutas SVG y parecen estar sufriendo el mismo problema de doble transformación que mi línea en el número 2, se muestran demasiado en la esquina superior izquierda. Aquí hay una versión con esos cambios:

https://jsfiddle.net/6tn0zy48/

Todo aparece en el lugar correcto, excepto que los marcadores se recortan más arriba que la parte inferior del mapa. Parece que es el mismo problema en el que todavía estoy trabajando.

Solucionar el último problema restante no fue difícil, solo fue cuestión de establecer la transformación en 0 y usar izquierda y arriba en su lugar.

Mi ejemplo simple, actualizado:
http://jsfiddle.net/oo2yms1h/1/

Y mi corrección revisada para tu mapa:
https://jsfiddle.net/6tn0zy48/1/

Estaba trabajando en Chrome y acabo de darme cuenta de que mi solución no funciona en Firefox e IE. Estaban dando los estilos de transformación como traducir en lugar de traducir3d, y mi código asumió que siempre sería traducir3d. Y colocaron los mosaicos usando traducir en lugar de izquierda y arriba como en Chrome. Este ejemplo actualizado se revisó para los tres navegadores. Los íconos de mosaicos y marcadores funcionan en los tres, pero aún no puedo obtener las rutas SVG para que aparezcan en Firefox e IE.

http://jsfiddle.net/oo2yms1h/3/

IE necesitaba html2canvas.svg antes de mostrar la línea, y tampoco funciona cuando se configuran las transformaciones o las propiedades izquierda/superior en la capa SVG. Este ejemplo funciona en IE y casi funciona en Firefox:

http://jsfiddle.net/oo2yms1h/5/

Para que la línea se muestre en Firefox, también debe cambiar a la codificación base64 haciendo el cambio a html2canvas mencionado en #648:
https://github.com/niklasvh/html2canvas/pull/648/files

Gracias por toda su ayuda hasta ahora. El único último problema ahora es que si tengo una superposición de svg encima, IE no está jugando bien con él. El mapa y la superposición svg funcionan muy bien en cromo. ¿Algunas ideas?

@CraigVA Eres increíble. Acabo de pasar los últimos dos días tratando de solucionar este problema. Desearía haberme encontrado con tus jsfiddles antes. ¡¡¡Gracias!!!

Tuve un problema al usar la solución @CraigVA en el que, si panoramizaba el mapa, las superposiciones estarían descentradas de los mosaicos.

Para combatirlo, todo lo que hice fue una función redibujar () que estableció la vista en otro lugar del océano por un segundo y luego volvió a establecer la vista donde estaba. Funciona bien.

function redraw() {
    var lat_tmp = map.getCenter().lat;
    var lng_tmp = map.getCenter().lng;
    map.setView([-66.22149259832975, -1.142578125]);
    setTimeout(function () {
        waitForTilesToLoad()
    }, 50000);
    map.setView([lat_tmp, lng_tmp]);
}

En caso de que alguien se encuentre con esto y tenga el mismo problema.

Hola, gracias por este truco, funciona bien a excepción de las capas Path y los TileLayers grandes.

• Si una parte de una capa de Ruta (polígono/polilínea) está fuera de los límites del mapa original, html2canvas la recorta cuando muevo el mapa.
  Actualicé su código aquí http://jsfiddle.net/c8LL4qfo/ con una polilínea más larga. Intenta mover el mapa, verás que la línea está recortada en el lienzo.
  ¿Alguna idea sobre cómo solucionar este error?

• Segundo punto: si los tilesLayers son demasiado grandes, html2canvas no está esperando a que se represente el mapa. Incluso con UseCors=true. ¿Hay alguna forma de esperar a que se carguen los TileLayers? Estaba pensando en usar el evento de carga, pero no tengo idea de cómo podría hacerlo.

Gracias

¿Sigue siendo un problema con v1.0.0 ? Si es así, ¿podría compartir un ejemplo en jsfiddle ?

Resolví este problema usando React: el componente del folleto se restablece después de mover el mapa, manteniendo el estado del último centro y el nivel de zoom. Ya no hay conflicto con html2canvas ya que el mapa provisto es un mapa nuevo.

Ok, hice la actualización en el código jsfiddle aquí: http://jsfiddle.net/2zkLkLxc/
No hay más problemas de recorte con V1.0.0, pero tenemos problemas con el recorte de iconos (en cualquier momento) y el recorte de mosaicos al mover el mapa.
Traté de eliminar los trucos en los mosaicos y no cambia nada.

Es extraño, porque actualicé a v.1.0.0 en mi código y no tengo iconos recortados.

Este problema se ha cerrado automáticamente porque no ha habido respuesta a nuestra solicitud de más información del autor original. Con solo la información que se encuentra actualmente en el problema, no tenemos suficiente información para tomar medidas. Comuníquese si tiene o encuentra las respuestas que necesitamos para que podamos investigar más a fondo.

Tengo el mismo problema, pero utilicé Leaflet Map en lugar de Google Map.
El código está debajo

var transform=$(".leaflet-map-pane").css("transform");
si (transformar) {
var c = transformar.split(",");
var d = parseFloat(c[4]);
var h = parseFloat(c[5]);
$(".panel-mapa-folleto").css({
"transformar": "ninguno",
"izquierda": d,
"arriba": h
})
}
html2canvas(documento.cuerpo).then(función(lienzo){
$(".panel-mapa-folleto").css({
izquierda: 0,
superior: 0,
"transformar": transformar
})
} // Aquí se usa html2canvas 1.0.0-alpha.9

@CraigVA ¡MUCHAS GRACIAS!

Tengo un problema en este momento en stackoverflow con respecto al problema de recorte. Estoy usando el folleto 1.3.1. Si alguien me puede dar alguna orientación, se lo agradecería mucho. El problema está aquí.

@niklasvh El problema sigue ahí: http://jsfiddle.net/x3jzsg9b/4/

El problema sigue ahí: https://jsfiddle.net/x512pgjt/269/

@amarandon @bomba1990

Intente eliminar el relleno del renderizador de su mapa. Funcionó para mí.

mapa.getRenderer(mapa).opciones.relleno = 0;

¡Esto funcionó muy bien!

html2canvas(document.querySelector("#mapid"), {
allowTaint: cierto,
usarCORS: verdadero
}).entonces(lienzo => {
documento.cuerpo.appendChild(lienzo)
});