Angular 2 第 6 版如何为 JavaScript 3.24 添加 esri ArcGIS API

Question

我目前正在将 Angular 1 版 X 网站转换为 Angular 2 版 5 网站。在原始应用程序中，使用了 ArcGIS API for JavaScript 3.24，我将在新项目中使用它。在网站的 index.html 中，我有：

编辑

<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<script src="https://js.arcgis.com/3.24compact"></script>

<script>
    require(["esri/config", "esri/tasks/GeometryService", "dojo/domReady!"],
        function(esriConfig, GeometryService) {
        esriConfig.defaults.io.proxyUrl = "/api/esriproxy/";
        esriConfig.defaults.geometryService = new GeometryService("https:someurl.com");
    });
</script>

不太确定如何将 esri 添加到项目以显示地图。任何指向好的示例的指针都将不胜感激，因为文档解决了 angular 的真正旧版本。我已经找到了如何添加 esri 加载程序。

Answer 1

如果您想将 Arcgis JS API 与最新版本的 Angular（目前为 v6）一起使用，最好的方法是使用 "esri-loader" npm 包（ Documentation here) 正如你提到的那样，然后在自定义服务中使用它。

使用 esri-loader，您只需在 index.html 中添加 link 标签： <link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css"> 然后使用 esri-loader 加载 js-api.

这是一个使用 Angular 6 + Arcgis JS API v4.7 的服务示例，我基本上使用一个服务来根据需要使用 esri-loader（您可以使用相同的方式使用v3.24):

import { Injectable } from '@angular/core';
import { loadModules, loadScript } from 'esri-loader';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ArcgisApiService {
  loaded$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  constructor() {
    this.loaded$.subscribe(loaded => {
      if (!loaded) {
        loadScript({
          // use a specific version of the JSAPI
          url: 'https://js.arcgis.com/4.7/'
        })
          .then(() => {
            this.loaded$.next(true)
          }).catch(err => this.loaded$.next(true))
      }
    });
  }

  constructMap(opts: { basemap: any; elevation: boolean }): Promise<any[]> {
    return new Promise((resolve, reject) => {
      loadModules(['esri/Map']).then(([Map]) => {
        const map = new Map({
          basemap: opts.basemap
        });
        if (opts.elevation) {
          map.ground = 'world-elevation';
        }
        resolve(map);
      });
    });
  }

  constructSceneView(opts: {
    center: number[];
    zoom: number;
    container: string;
    map: any;
    padding?: any;
  }): Promise<any[]> {
    return new Promise((resolve, reject) => {
      loadModules(['esri/views/SceneView'])
        .then(([SceneView]) => {
          const view = new SceneView({
            center: opts.center,
            zoom: opts.zoom,
            map: opts.map,
            container: opts.container,
            padding: opts.padding ? opts.padding : {}
          });
          view.when(() => {
            resolve(view);
          });
        });
    });
  }
}

然后您可以使用自定义服务构建可重用组件或直接使用组件中的服务 class。

这是一个完整的例子：Angular 6 + Arcgis API v4.7 (Stackblitz)。

-----编辑------

这是 Arcgis API v3.24 + Angular 6 的完整示例： Angular 6 + Arcgis API 3.24 (Stackblitz)

------------------------

您可以通过这种方式完全控制 API，它为您打开了非常酷的可能性！

Angular 2 第 6 版如何为 JavaScript 3.24 添加 esri ArcGIS API

Angular 2 Release 6 how to add esri ArcGIS API for JavaScript 3.24

esri

angular