Angular 2 Release 6, как добавить esri ArcGIS API для JavaScript 3.24 - PullRequest
Новая
       14

Angular 2 Release 6, как добавить esri ArcGIS API для JavaScript 3.24

0 голосов
/ 12 июня 2018

В настоящее время я конвертирую веб-сайт Angular 1 Release X в веб-сайт Angular 2 Release 5.В исходном приложении использовался ArcGIS API для 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.

1 Ответ

0 голосов
/ 15 июня 2018

Если вы хотите использовать Arcgis JS API с последней версией Angular (сейчас v6), лучше всего воспользоваться пакетом "esri-loader" npm ( Документация здесь ) какВы упомянули, а затем используете его в пользовательских службах.

С помощью 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 +Угловой 6: Угловой 6 + Arcgis API 3.24 (Stackblitz)

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

YТаким образом, у вас есть полный контроль над API, и он открывает вам довольно интересные возможности!

...