Создание карт в Angular и Leaflet

12 мая, 2021 12:15 пп 1 603 views | Комментариев нет

, | | Комментировать запись

Leaflet – это библиотека JavaScript для создания карт. Она предоставляет множество полезных функций и ее удобно использовать на мобильных устройствах.

Эту библиотеку можно использовать для отображения карты, которая поддерживает увеличение и уменьшение масштаба, панорамирование по клику и перетаскивание.

Примечание: Это первая часть серии по использованию Angular и Leaflet. Другие мануалы из этой серии можно найти по тегу Leaflet maps.

В этом руководстве вы узнаете, как интегрировать Leaflet в приложение Angular.

Требования

Этот мануал протестирован на версиях Node v15.12.0, npm v7.7.4, angular v11.2.7 и leaflet v1.7.1.

1: Создание тестового проекта

Используем @angular/cli для создания нового проекта Angular.

В окно терминала введите следующую команду:

npx @angular/cli new angular-leaflet-example --style=css --routing=false --skip-tests

Эта команда создаст новый проект Angular со стилями CSS (также можно использовать стили Sass, Less или Stylus), без маршрутизации и тестирования.

Перейдите в только что созданный каталог проекта:

cd angular-leaflet-example

Здесь выполните следующую команду, чтобы установить библиотеку leaflet:

npm install leaflet@1.7.1

Установив эти базовые вещи, мы можем начать работу над нашей картой.

2: Создание компонента карты

Теперь вы можете создать пользовательский компонент карты:

npx @angular/cli generate component map --skip-tests

Эта команда создаст три новых файла: map.component.css, map.component.html и map.component.ts. Также она обновит файл app.module.ts, чтобы он мог использовать этот новый компонент.

Откройте map.component.ts и замените его содержимое следующими строками:

<div class="map-container">

  <div class="map-frame">

    <div id="map"></div>

  </div>

</div>

Затем откройте файл map.component.css и замените его содержимое следующим кодом:

.map-container {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: 30px;

}

.map-frame {

  border: 2px solid black;

  height: 100%;

}

#map {

  height: 100%;

}

Эта комбинация разметки и стилей создаст внешний div с классом .map-container, который разместит карту так, чтобы она занимала доступное пространство на экране.

Также это создаст div с идентификатором #map. В данном случае важно использовать идентификатор вместо класса, потому что для размещения карты Leaflet нужен именно идентификатор.

Потом откройте файл map.component.ts и импортируйте пакет Leaflet:

import { Component, OnInit } from '@angular/core';

import * as L from 'leaflet';

@Component({

  selector: 'app-map',

  templateUrl: './map.component.html',

  styleUrls: ['./map.component.css']

})

export class MapComponent implements OnInit {

  constructor() { }

  ngOnInit(): void { }

}

Элемент div карты должен быть помещен в DOM, прежде чем вы сможете ссылаться на него для создания своей карты. Это возможно во время перехвата жизненного цикла AfterViewInit. Расширьте компонент, чтобы реализовать AfterViewInit, и добавьте в компонент функцию ngAfterViewInit():

import { Component, AfterViewInit } from '@angular/core';

import * as L from 'leaflet';

@Component({

  selector: 'app-map',

  templateUrl: './map.component.html',

  styleUrls: ['./map.component.css']

})

export class MapComponent implements AfterViewInit {

  constructor() { }

  ngAfterViewInit(): void { }

}

Читайте также: Что такое хуки жизненного цикла в Angular

Давайте создадим отдельную приватную функцию под названием initMap(), чтобы изолировать процесс инициализации карты.

В этой функции нужно создать новый объект карты Leaflet. API также позволяет определять в нем параметры.

В этом руководстве мы установим центр карты и исходное значение масштабирования.

Давайте центрируем нашу карту по географическому центру Соединенных Штатов (39.828175°N 98.579500°W).

Десятичная система координат, которую использует Leaflet, предполагает, что все, что лежит к западу от нулевого меридиана, выражается отрицательным числом, поэтому фактические координаты центра будут [39,8282, -98,5795].

Уровень масштабирования мы установим на 3.

Объявите переменную для объекта map, создайте карту и вызовите ее из ngAfterViewinit в файле src/app/map/map.component.ts:

import { Component, AfterViewInit } from '@angular/core';

import * as L from 'leaflet';

@Component({

  selector: 'app-map',

  templateUrl: './map.component.html',

  styleUrls: ['./map.component.css']

})

export class MapComponent implements AfterViewInit {

  private map;

  private initMap(): void {

    this.map = L.map('map', {

      center: [ 39.8282, -98.5795 ],

      zoom: 3

    });

  }

  constructor() { }

  ngAfterViewInit(): void {

    this.initMap();

  }
}

Затем откройте app.component.html и замените сгенерированный ранее код новым компонентом:

<app-map></app-map>

И запустите приложение:

npm start

Затем откройте приложение в веб-браузере (localhost:4200).

Ваше приложение отобразит пустой div без карты.

С помощью Leaflet мы визуализируем данные как слои. Данные, из которых состоит карта, называются тайлы (или фрагменты, плитки). Сейчас нам нужно будет создать новый слой тайлов и добавить его на карту.

Чтобы создать такой слой, необходимо сначала передать URL-адрес сервера тайлов.

Существует множество провайдеров тайловых серверов, но в этом руководстве мы будем использоватья тайловый сервер OpenStreetMap.

Подобно объекту карты, слой тайлов также принимает пользовательские параметры.

В этом мануале мы установим максимальный и минимальный уровни масштабирования, а также предоставим идентификационную информацию для данных карты.

Вернитесь к файлу map.component.ts и добавьте слой тайлов:

import { Component, AfterViewInit } from '@angular/core';

import * as L from 'leaflet';

@Component({

  selector: 'app-map',

  templateUrl: './map.component.html',

  styleUrls: ['./map.component.css']

})

export class MapComponent implements AfterViewInit {

  private map;

  private initMap(): void {

    this.map = L.map('map', {

      center: [ 39.8282, -98.5795 ],

      zoom: 3

    });

    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

      maxZoom: 18,

      minZoom: 3,

      attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'

    });

    tiles.addTo(this.map);

  }

  constructor() { }

  ngAfterViewInit(): void {

    this.initMap();

  }

}

Этот код установит максимальное масштабирование на 18, минимальное – на 3 и добавит идентификационную информацию для тайлов.

Снова откройте приложение в веб-браузере (localhost:4200).

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

Откройте файл angular.json и добавьте leaflet.css:

{

  // ...

  "projects": {

    "angular-leaflet-example": {

      // ...

      "architect": {

        "build": {

          // ...

          "options": {

            // ...

            "styles": [

              "./node_modules/leaflet/dist/leaflet.css",

              "src/styles.css"

            ],

            // ..

          },

          // ...

        },

        // ...

      }

    }},

  "defaultProject": "angular-leaflet-example"

}

Если вы сейчас запустите команду npm start, вам нужно будет остановить процесс и перезапустить его, чтобы обновить базовую таблицу стилей.

А теперь откройте приложение в браузере.

Вы увидите, что на странице есть карта, которая поддерживает масштабирование и перетаскивание.

Заключение

В этом руководстве вы узнали, как добавить библиотеку Leaflet в свое приложение Angular и собрать простую карту.

Найти более продвинутые примеры использования Leaflet можно на официальном сайте.

Tags: , , , ,

Добавить комментарий