Question

我目前正在将Angular 1版本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添加到项目中以显示地图。任何指向良好示例的指针都会受到赞赏，因为文档解决了角度非常旧的版本。我已经找到了如何添加esri loader。

Answer 1

如果您想将Arcgis JS API与最新版本的Angular一起使用（目前为v6），最好的方法是使用＆＃34; esri-loader＆＃34;你提到的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进行全面控制，并为您打开非常酷的可能性！

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

1 个答案: