如何获取 ESRI 地图的屏幕截图 - 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();

  }

error: Property 'src' does not exist on type 'HTMLElement'.ts(2339)

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 地图的屏幕截图 - Angular

How to get a screenshot of the ESRI Map - Angular

javascript

esri

arcgis-js-api

esri-maps

angular