Cómo capturar una imagen de pantalla del mapa ESRI – Angular.
Cómo obtener una captura de pantalla del mapa Esri en su estado actual en la interfaz de usuario y descargarlo como PDF desde Angular?
El siguiente código es mi código actual .ts, por favor avíseme si hay partes adicionales que se deben agregar.
esri-map.component.html:
esri-map.component.ts:
// Inicializar MapView y devolver una instancia de MapView
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 características 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);
let options = {
width: 2048,
height: 2048
};
view.takeScreenshot(options).then(function(screenshot) {
let imageElement = document.getElementById("screenshotImage");
imageElement.src = screenshot.dataUrl;
});
this.view = view;
return this.view.when();
}
error:
La propiedad ‘src’ no existe en el tipo ‘HTMLElement’.ts(2339)
davy.ai
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étodoinitializeMap
:En este código actualizado, agregamos un botón con un
id
dedownloadButton
, 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étodotakeScreenshot
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étodosave
.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 enHTMLElement
. Esto probablemente se debió a que estaba intentando establecer la propiedadsrc
de un elemento que no tenía unid
descreenshotImage
. 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 propiedadsrc
en la propiedaddataUrl
del objetoscreenshot
.