Angular 7 项目的 Esri 代理截图 [英] Esri proxy for Angular 7 project to screenshot
问题描述
我的团队目前正在开发具有 angular 7 前端和 .net core 2.1 后端的 Web 应用程序.我需要做的一项任务是抓取屏幕截图并将其附加到电子邮件中.Web 应用程序有一个 esri-map.
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 属性设置为 true.我做了一些进一步的研究，发现了 html2canvas 的代理属性.这让我想到，这可能是未生成地图的原因.我似乎找不到任何关于如何为 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.
注意:在下面的代码片段中=>是箭头函数=>
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屋！
