如何获取 ESRI Map - Angular 的屏幕截图

Question

How to get a screenshot of the Esri map at its current state on the UI and make it as downloaded as Pdf from Angular?如何在 UI 上获取 Esri 地图当前状态的屏幕截图，并将其作为从 Angular 下载的 Pdf 格式？ The following code is my current .ts code and please let me know if there are additional parts to be added.以下代码是我当前的 .ts 代码，如果要添加其他部分，请告诉我。

esri-map.component.html esri-map.component.html

<!-- Map Div -->
<div #mapViewNode></div>

esri-map.component.ts esri-map.component.ts

// Initialize MapView and return an instance of MapView
    initializeMap(esriToken) {
    const container = this.mapViewEl.nativeElement;
    config.apiKey = esriToken;
    const horizonData: any[] = this.esiriData || [];

//load the webMap
const webmap = new WebMap({
      portalItem: {
        id: this.webMapId
      }
    });

// load the ParcelAtlas feature layer
const layer = new FeatureLayer({
    url: this.featureLayerUrl,
    });
  webmap.add(layer);

const view = new MapView({
  container,
  map: webmap,
  zoom: 4,
  center: [-97.63, 38.34],
});

//legend Icon
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: Property 'src' does not exist on type 'HTMLElement'.ts(2339)错误：类型“HTMLElement”.ts(2339) 上不存在属性“src”

Answer 1

The problem that you are having is because you do not have a node for the image, screenshotImage is no on the component.您遇到的问题是因为您没有图像节点，组件上没有screenshotImage 。

I am not sure how you want to show the image, so I will use this example I made for you.我不确定你想如何显示图像，所以我将使用我为你制作的这个例子。

 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Screenshot Example</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #screenshotDiv { position: absolute; top: 0; right: 0; background-color: transparent; z-index: 1; display: flex; flex-direction: column; } .action-button { width: 200px; padding: 0.6em; border: 1px solid #0079c1; text-align: center; background-color: white; cursor: pointer; } .action-button:hover, .action-button:focus { background: #0079c1; color: white; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css"> <script src="https://js.arcgis.com/4.18/"></script> <script> require([ "esri/Map", "esri/views/MapView" ], function (Map, MapView) { const map = new Map({ basemap: "streets-navigation-vector" }); const view = new MapView({ container: "viewDiv", map: map, zoom: 12, center: { latitude: 32.7353, longitude: -117.1490 } }); const btn = document.getElementById("screenshotBtn"); const img = document.getElementById("screenshotImg"); view.when(function() { btn.addEventListener("click", function() { view.takeScreenshot({ width: 200, height: 200 }).then(function(screenshot) { img.src = screenshot.dataUrl; }); }); }); }); </script> </head> <body> <div id="viewDiv" class="esri-widget"> <div id="screenshotDiv"> <button id="screenshotBtn" class="action-button esri-widget"> Take Screenshot </button> <img id="screenshotImg"/> </div> </div> </body> </html>

I think this translation to Angular should work,我认为这种对 Angular 的翻译应该有效，

esri-map.component.html esri-map.component.html

<div #mapViewNode>
    <div class="screenshotDiv">
        <button class="action-button esri-widget" (click)="takeScreenshot()">
            Take Screenshot
        </button>
        <img [src]="screenshotImgSrc"/>
    </div>
</div>

esri-map.component.ts esri-map.component.ts

takeScreenshot() {
    const self = this;
    this.view.takeScreenshot({
        width: 200,
        height: 200
    }).then(function(screenshot) {
        self.screenshotImgSrc = screenshot.dataUrl;
    });
}

takeScreenshot , view , and screenshotImgSrc needs to be properties of the component. takeScreenshot 、 view和screenshotImgSrc需要是组件的属性。

如何获取 ESRI Map - Angular 的屏幕截图

问题描述

1 个解决方案

解决方案1
0 2021-11-30 21:19:25

如何获取 ESRI Map - Angular 的屏幕截图

问题描述

1 个解决方案

解决方案1 0 2021-11-30 21:19:25

解决方案1
0 2021-11-30 21:19:25