Angular 2 Release 6 如何添加 esri ArcGIS API for JavaScript 3.24

Question

我目前正在将 Angular 1 release X 网站转换为 Angular 2 Release 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 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);
          });
        });
    });
  }
}

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

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

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

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

-----------

您可以通过这种方式完全控制 API，并为您提供非常酷的可能性！