2

Se ha puesto un mapa de Open Street Map y se han dibujado objetos sobre el mismo en un hecho con leaflet, la pantalla muestra correctamente el mapa y los objetos dibujados, pero cuando quiero convertir el en una imagen .png para descargarla en una carpeta del servidor la imagen muestra un desplazamiento de los objetos dibujados sobre el mapa, podrian ayudarme a saber porque esta sucediendo esto si simplemente quiero crear un .png de la imagen que se muestra correctamente en pantalla, es importante mencionar que cuando vuelvo a llamar el mapa, se obtiene correctamente sin el desplazamiento, solo sucede en el .png, gracias por su ayuda, les comparto el código:

<script>     

    function guardarMapa() {

        drawnItems.getBounds();
        var todosJSON = [];
          drawnItems.eachLayer(function(layer) {
            var type1 = layer.options.type;
            var coordinates = layer.toGeoJSON().geometry.coordinates;
            var area = L.GeometryUtil.geodesicArea(layer._defaultShape());
            var areaLegible = L.GeometryUtil.readableArea(area, true);
            var objetoJSON = {
              "layerType": type1,
              "coordinates": coordinates
            };
            todosJSON.push(objetoJSON);
          });
           var zoom = map.getZoom(); 
           var center = map.getCenter()   
           var zoomMapaJSON = {
            "zoom": zoom,
            "centro": center
          };
          todosJSON.push(zoomMapaJSON);
          var todosJSONString = JSON.stringify(todosJSON);

          html2canvas(document.getElementById('map'), {
          useCORS: true
              
            }).then(canvas => {document.body.appendChild(canvas)
                var imagenBase64 = canvas.toDataURL("image/png");
                var xhr = new XMLHttpRequest();
                xhr.open("POST", "guardar_mapa.php", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");              
                var data =                
                  "&clado=" + encodeURIComponent("<?php echo $foldo; ?>") +
                  "&imagen=" + encodeURIComponent(imagenBase64);
                xhr.send(data);
            });
            xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {var response = xhr.responseText;}};
    }   
 </script>
8
  • El contenedor tiene un tamaño fijo??? Commented el 12 jul. 2023 a las 13:45
  • Puede haber diferencias en las coordenadas o en el sistema de coordenadas utilizado entre Leaflet y html2canvas Commented el 12 jul. 2023 a las 13:46
  • si has llegado a este punto asumo que tendras la capacidad de hacer el debug de esos dos argumentos. Commented el 12 jul. 2023 a las 13:47
  • ahora la pregunta no tiene nada que ver con php evitar usar etiquetas que no tienen nada que ver con el codigo y escenario. Commented el 12 jul. 2023 a las 13:48
  • Estimado ArcanisGK507, agradezco mucho tus respuestas y atencios, te respondo cada una para ver si puedes ayudarme en saber en que me estoy equivocando. 1. si tiene un tamaño fijo: <style> #map { height: 350px; width: 90%; } 2. no se como los sistemas de coordenadas se puedan ajustar en html2canvas,si me quedan claros en leaflet, pero no se como manejarlos en html2canvas 3. disculpa mi ignorancia pero no comprendo el concepto de debug de los argumentos, solo se me ocurre que estoy usando 90% en el tamaño, pero investigare respecto al debug Commented el 13 jul. 2023 a las 16:48

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.