Руководство по созданию стартового ГИС-приложения с angular 9

Пошаговое руководство по созданию приложения ArcGIS с помощью Angular

В этом уроке мы создадим приложение с Angular 9. Мы создадим внешнее веб-приложение, которое будет отображать базовую карту на главной странице нашего веб-сайта. Для создания пользовательского интерфейса мы будем использовать Arcgis javascript API v. 4.14 через ESRI.

Если вы не знали, как начать разработку ГИС-приложения, см. ниже.

Шаг 1. Создайте проект по умолчанию

Прежде чем начать, вы должны установить Angular CLI. Как установить, смотрите в документации angular: https://angular.io/guide/setup-local
Чтобы сгенерировать новый проект по умолчанию, используйте команду:

ng new arcgis-angualar-map
cd arcgis-angualar-map

Дополнительно нам потребуется установить два пакета: esri-loader — для загрузки Dojo требуются классы ArcGIS JavaScript API, и @types/arcgis-js-api — определения типов для ArcGIS JavaScript API, нужны для корректной работы в TypeScript

npm i --save esri-loader 
npm i --save-dev @types/arcgis-js-api

Шаг 2. Настройка проекта базовой конфигурации

Перед созданием карты нам нужно настроить наш проект. На первом этапе вставьте типы "arcgis-js-api" в tsconfig.app.json.

...
"compilerOptions": {
  ...
  "types": [
    "arcgis-js-api"
  ],
  ...
}

После этого нам нужно вставить в index.html ссылку на esri main.css и ссылку на местоположение ArcGIS JavaScrit API.

<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.14/"></script>

Мы готовы создать наше начальное картографическое приложение с помощью Angular.

Шаг 3. Создайте карту

На этом шаге нам нужно будет внести изменения в три файла. Это html-шаблон, общий класс и стили нашего основного компонента. Разместите контейнер div для представления карты в html-шаблоне (app.component.html):

...
<div #mapView></div>
...

Для настройки корректного отображения мы должны указать этот код в стилях (app.component.css). "Esri-view" — это имя по умолчанию для представления карты ESRI класса стиля. Обратите внимание, что контейнер, в который помещается класс #mapView, должен иметь фиксированную высоту и ширину.

.esri-view {
  height: 100%;
  width: 100%;
  outline: none;
}

И таким же образом настройте класс основного компонента:

import {Component, ElementRef, ViewChild} from '@angular/core';
import {loadModules} from 'esri-loader';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Get a container link for map place
  @ViewChild('mapView', {static: true}) private readonly 
                                         mapViewElement: ElementRef;
  // main map view
  private mapView;
  title = 'ArcGIS angular map';

  constructor() {
    // This function load Dojo's  require the classes
    // listed in the array modules
    loadModules(['esri/Map', 'esri/views/MapView'])
      .then(([Map, MapView]: [__esri.MapConstructor,
                              __esri.MapViewConstructor]) => {
        // set default map properties
        const mapProperties = {
          basemap: 'gray'
        }
        // create map by default properties
        const map = new Map(mapProperties);
        // set default map view properties
        // container - element in html-template for locate map
        // zoom - default zoom parameter, value from 1 to 18
        const mapViewProperties = {
          container: this.mapViewElement.nativeElement,
          zoom: 3,
          map
        }
        // create map view by default properties
        this.mapView = new MapView(mapViewProperties);
      });
  }
}

Запустите команду ng serve и перейдите на страницу http://localhost:4200/ в браузере:

ng serve
...
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.

Я надеюсь, что это было полезно. В следующей заметке я покажу, как добавить слой на карту.

Ресурсы

Этот проект можно посмотреть на GitHub: https://github.com/gisprod/arcgis-angular-map.