Angular 7项目的Esri代理截图 [英] Esri proxy for Angular 7 project to screenshot
问题描述
我的团队目前正在使用带有angular 7前端和.net core 2.1后端的Web应用程序进行工作.我需要做的任务之一是获取屏幕截图并将其附加到电子邮件中.该Web应用程序具有esri映射.
My team is currently working on a web application with angular 7 front end and .net core 2.1 back-end. One of tasks i need to do is to grab a screenshot and attach it to an email. The web application has an esri-map.
出于捕获屏幕截图的目的，我使用的是html2canvas软件包.除了不捕获esri映射内容的部分之外，它均按预期工作.它捕获除esri-map之外的所有其他内容.
For the purposes of capturing the screenshot i am using html2canvas package. It works as expected except for the part that it doesn't capture the esri map content. It captures everything else except the esri-map.
对于html2canvas函数调用，我将allowTaint属性设置为useCORS属性.我做了一些进一步的研究，发现html2canvas的proxy属性.这让我想到，这可能就是未生成地图的原因.我似乎找不到关于如何为arcgis设置代理的任何明确说明.我想知道是否有人可以帮助我. 任何方向或帮助将不胜感激. 以下代码段是我的html2canvas调用. html2canvas
For the html2canvas function call, i set the allowTaint property and useCORS property to true. I did some further research and i came across the proxy property for html2canvas. It made me think, that could be the reason why the map is not being generated. I cant seem to find any clear instructions on how to set up a proxy for arcgis. I was wondering if someone could help me with this. any direction or help will be greatly appreciated. following snippet is my html2canvas call. html2canvas
html2canvas(document.getElementById('mapContainer'), { useCORS: true, logging: true, allowTaint: true }).then((canvas) => {
console.log("Document html2canvas");
console.log(document);
screenCapture = canvas.toDataURL();
]);
更新2018年1月11日
Update Jan 11 2018
我就此与Esri取得了联系，他们的回答是，我们不支持angular 7，我们仅支持Javascript.我问他们，如果我使用打印任务而不是html2canvas会怎样.
I reached out to Esri regarding this and their response was , we dont support angular 7, we only support Javascript. I asked them , what if i use the print task instead of html2canvas .
这是我使用打印任务的代码段.希望这可以对某人有所帮助.
This is my code snippet using print task. hope this might help someone.
这是我在其中一项服务中编写的用于捕获地图的函数.它似乎工作正常.我不知道使用arcgis提供的实用程序任务url或使用您自己的服务器来呈现这些屏幕截图是否有任何开销.出于某种原因，当我使用服务器的打印任务实用程序URL时，它不起作用.
This is a function i wrote in one of the services to capture the map. it seems to work fine. I don't know if there is any overhead of using the utility task url provided by arcgis or using your own server to render these screenshots. For some reason , it didn't work when i used the my servers print task utility URL.
注意:在下面的代码片段=& gt中是箭头功能=>
screenCapture(): Promise<any> {
return new Promise((resolve, reject) => {
loadModules(['esri/tasks/PrintTask', 'esri/tasks/support/PrintTemplate', 'esri/tasks/support/PrintParameters']).then(([PrintTask, PrintTemplate, PrintParameters]) => {
try {
var printTask = new PrintTask({
url: 'https://utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task/',
updateDelay: '3000'
});
var template = new PrintTemplate({
layout: "map_only",
exportOptions: {
dpi: 96,
width: 1871,
height: 800
},
});
var params = new PrintParameters({
view: this.mapView,
template: template
});
printTask.execute(params).then(res => { console.log(res); resolve(res); });
}
catch (error) {
console.log(error);
reject(error);
}
});
});
} // end ofScreenCapture
推荐答案
您可以尝试以下库: https://github.com/WSDOT-GIS/arcgis-map-thumbnail-builder
我不确定它是否与最新的ArcGIS Javascript API完全兼容，但是您可能可以研究代码源以使其与所使用的版本兼容.
I am not sure it is fully compatible with latest ArcGIS Javascript API but you probably can study the code sources to make it works with the version you are using.
这篇关于Angular 7项目的Esri代理截图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
