Cómo capturar una imagen de pantalla del mapa ESRI – Angular.

Answer

1. 

   davy.ai

   June 10, 2023 at 9:21 pm

   Cómo obtener una captura de pantalla de un mapa Esri y descargarlo como PDF desde Angular

   Para obtener una captura de pantalla de un mapa Esri en su estado actual en la interfaz de usuario y descargarlo como un archivo PDF desde Angular, puede usar el método takeScreenshot proporcionado por la API de ArcGIS JS. Aquí hay una versión actualizada de su método initializeMap:

   initializeMap(esriToken) {
     const container = this.mapViewEl.nativeElement;
     config.apiKey = esriToken;
     const horizonData: any[] = this.esiriData || [];
   
     // Cargar el webMap
     const webmap = new WebMap({
       portalItem: {
         id: this.webMapId
       }
     });
   
     // Cargar la capa de objetos ParcelAtlas
     const layer = new FeatureLayer({
       url: this.featureLayerUrl,
     });
     webmap.add(layer);
   
     const view = new MapView({
       container,
       map: webmap,
       zoom: 4,
       center: [-97.63, 38.34],
     });
   
     // Icono de leyenda
     const legend = new Legend({
       view: view
     });
     const legendExpand = new Expand({
       view,
       content: legend,
       expanded: false,
     });
     view.ui.add(legendExpand, "top-left");
   
     const renderer = new SimpleRenderer({
       symbol: new TextSymbol({
         color: "red",
         text: "\ue61d",
         font: {
           size: 30,
           family: "CalciteWebCoreIcons"
         }
       })
     });
   
     const dataFeedLayer = new FeatureLayer({
       source: horizonData.map((d, i) => ({
         geometry: new Point({
           longitude: d.longitude,
           latitude: d.latitude
         }),
         attributes: {
           ObjectID: i,
           ...d
         }
       })),
       objectIdField: 'ObjectID',
       geometryType: "point",
       renderer: renderer,
     });
   
     webmap.add(dataFeedLayer);
   
     // Tomar captura de pantalla y descargar como PDF cuando se haga clic en el botón
     const downloadButton = document.getElementById("downloadButton");
     downloadButton.onclick = () => {
       const options = {
         width: 2048,
         height: 2048
       };
       view.takeScreenshot(options).then(screenshot => {
         // Crear un nuevo documento PDF
         const doc = new jsPDF();
   
         // Agregar la captura de pantalla como imagen
         doc.addImage(screenshot.dataUrl, "PNG", 0, 0, 210, 297);
   
         // Guardar y descargar el documento
         doc.save("mapa.pdf");
       });
     };
   
     this.view = view;
     return this.view.when();
   }
   

   En este código actualizado, agregamos un botón con un id de downloadButton, que se utiliza para iniciar el proceso de captura de pantalla y creación de PDF. Cuando se hace clic en el botón, llamamos al método takeScreenshot y le proporcionamos algunas opciones para el ancho y alto de la imagen resultante.

   Una vez que tenemos la captura de pantalla, creamos un nuevo documento PDF utilizando la biblioteca jsPDF. Agregamos la captura de pantalla al documento como una imagen utilizando el método addImage, y luego guardamos y descargamos el documento utilizando el método save.

   Tenga en cuenta que también eliminamos la línea de código que causaba el error de TypeScript sobre la propiedad src que no existe en HTMLElement. Esto probablemente se debió a que estaba intentando establecer la propiedad src de un elemento que no tenía un id de screenshotImage. Si todavía necesita mostrar la captura de pantalla en la página además de descargarla como un PDF, deberá agregar un elemento con ese ID y establecer su propiedad src en la propiedad dataUrl del objeto screenshot.

Comments are closed.