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

Question

如何在 UI 上获取 Esri 地图当前状态的屏幕截图，并将其作为从 Angular 下载的 Pdf 格式？ 以下代码是我当前的 .ts 代码，如果要添加其他部分，请告诉我。

esri-map.component.html

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

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();

  }

错误：类型“HTMLElement”.ts(2339) 上不存在属性“src”

Answer 1

您遇到的问题是因为您没有图像节点，组件上没有screenshotImage 。

我不确定你想如何显示图像，所以我将使用我为你制作的这个例子。

 <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>

我认为这种对 Angular 的翻译应该有效，

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

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

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