Leaflet Js — это мощная библиотека JavaScript для интерактивных карт, и интеграция некоторых библиотек с Angular иногда может быть сложной задачей, особенно при отсутствии официальной документации по этому вопросу. Однако не бойтесь! В этой статье мы стремимся упростить процесс интеграции Leaflet Js с Angular, предоставив вам подробное пошаговое руководство.

Разбивая процесс интеграции на управляемые шаги и предлагая четкие объяснения, мы поможем вам преодолеть сложности и преодолеть разрыв между Leaflet Js и Angular.

Итак, давайте погрузимся и откроем мир интерактивных карт, интегрировав Leaflet Js с Angular. К концу этой статьи у вас будет четкое представление о процессе интеграции, что позволит вам беспрепятственно включать увлекательные и многофункциональные карты в свои проекты Angular.

Шаг 1: Настройте новый проект Angular Откройте терминал или командную строку и выполните следующую команду, чтобы создать новый проект Angular:

ng new leaflet-example

Перейдите в каталог проекта:

cd leaflet-example

Шаг 2: Установите зависимости

npm i leaflet @types/leaflet

Эта команда установит библиотеку Leaflet, а также определения TypeScript (@types/leaflet), необходимые для разработки с помощью TypeScript. Пакет @types/leaflet предоставляет информацию о типе и поддержку автозаполнения для Leaflet в вашем проекте Angular.

Шаг 3: Создайте компонент Создайте новый компонент для размещения вашей карты Leaflet. Запустите следующую команду в каталоге вашего проекта:

ng generate component map

Шаг 4. Обновите шаблон компонента и код. Откройте файл map.component.html и замените существующее содержимое следующим кодом:

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

Этот код создает контейнер для карты Leaflet.

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

import { Component, OnInit, AfterViewInit } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, AfterViewInit {
  private map!: L.Map
  markers: L.Marker[] = [
    L.marker([31.9539, 35.9106]), // Amman
    L.marker([32.5568, 35.8469]) // Irbid
  ];

  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.initializeMap();
    this.addMarkers();
    this.centerMap();
  }


  private initializeMap() {
    const baseMapURl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
    this.map = L.map('map');
    L.tileLayer(baseMapURl).addTo(this.map);
  }


  private addMarkers() {
    // Add your markers to the map
    this.markers.forEach(marker => marker.addTo(this.map));
  }

  private centerMap() {
    // Create a LatLngBounds object to encompass all the marker locations
    const bounds = L.latLngBounds(this.markers.map(marker => marker.getLatLng()));
    
    // Fit the map view to the bounds
    this.map.fitBounds(bounds);
  }
}

Этот код создает карту Leaflet и добавляет к ней маркеры. Строка private map!: L.Map объявляет частную переменную map типа L.Map, которая представляет карту Leaflet. Массив markers содержит два экземпляра L.Marker, представляющих местоположения маркеров.

Хук ngAfterViewInit срабатывает после инициализации представления. В этом хуке вызывается функция initializeMap для создания экземпляра карты Leaflet и добавления к нему тайлового слоя. Функция addMarkers добавляет на карту маркеры из массива markers. Функция centerMap вычисляет границы всех местоположений маркеров и настраивает вид карты в соответствии с этими границами.

Метод initializeMap определяет константу baseMapURL, которая содержит шаблон URL для получения фрагментов карты с сервера тайлов OpenStreetMap. Затем создается новый экземпляр класса Leaflet L.Map, который присваивается переменной map. Это инициализирует объект карты, который будет использоваться для отображения карты. Обратите внимание, что конструктор принимает необязательный объект MapOptions, который позволяет настраивать различные аспекты поведения и внешнего вида карты. Например, одна из опций — layers, которая принимает массив Layer[], который будет изначально добавлен на карту (это означает, что мы можем удалить метод addMarkers на данный момент, и реализации станут такими:

this.map = L.map('map', {layers: this.markers});

Некоторые другие параметры карты: minZoom и maxZoom, attributionControl, doubleClickZoom, center и некоторые другие.

Затем мы добавляем на карту тайловый слой с помощью функции L.tileLayer. Этот слой представляет базовые фрагменты карты, которые будут отображаться на карте. Мы передаем baseMapURL в качестве параметра функции L.tileLayer, указывая, какой источник плитки использовать. Метод addTo(this.map) используется для добавления слоя тайлов на карту, что делает его видимым.

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

Теперь откройте файл map.component.scss и обновите стиль следующим образом:

#map{
    height: 100vh;
}

Шаг 5. Обновите шаблон компонента приложения. Откройте файл app.component.html и замените существующее содержимое следующим кодом:

<div class="map-container">
  <app-map></app-map>
</div>

Этот код включает в себя MapComponent, который мы создали внутри шаблона AppComponent.

Откройте файл app.component.scss и обновите стиль следующим образом:

.map-container{
    border: 1px solid black; // Add a border around the map
}

Шаг 6: Импортируйте CSS-файлы Leaflet в свой проект, вам нужно добавить пути к файлам в массив styles в файле конфигурации angular.json. Вот как это сделать:

  1. Откройте файл angular.json в корневом каталоге вашего проекта Angular.
  2. Найдите массив styles в конфигурациях "build" и "test".
  3. Добавьте пути к CSS-файлам Leaflet в массив styles. Например, если ваши CSS-файлы Leaflet расположены в каталоге node_modules , вы можете использовать следующие пути:
"styles": [
  .
  .
  "node_modules/leaflet/dist/leaflet.css"
]

Это гарантирует, что Angular включает CSS-файл Leaflet в процессе сборки и применяет стили к вашему приложению.

Чтобы добавить каталог leaflet/dist/images/ к активам в вашем проекте, выполните следующие действия:

  1. Найдите свойство "assets" в разделе "architect" файла конфигурации angular.json.
  2. Добавьте относительный путь к каталогу leaflet/dist/images/ в массив "assets". Например:
"assets": [
  .
  .
  {
    "glob": "**/*",
    "input": "./node_modules/leaflet/dist/images/",
    "output": "./"
  }
]

Разберем каждую пару ключ-значение:

  • "glob": "**/*": указывает шаблон, соответствующий всем файлам и подкаталогам в указанном входном каталоге. В данном случае **/* означает все файлы и каталоги.
  • "input": "./node_modules/leaflet/dist/images/": указывает входной каталог, из которого будут скопированы файлы. Он указывает на каталог leaflet/dist/images/ в папке node_modules вашего проекта.
  • "output": "./": указывает выходной каталог, в который файлы будут скопированы внутри созданного приложения. Он указывает на корневой каталог вашего проекта.

Таким образом, фрагмент конфигурации указывает Angular скопировать все файлы и подкаталоги из node_modules/leaflet/dist/images/ и поместить их в корневой каталог созданного приложения. Это означает, что изображения Leaflet, необходимые для маркеров и других компонентов, будут скопированы в корень вашего проекта в процессе сборки, что сделает их доступными в вашем приложении Angular. Вы можете ссылаться на них, используя относительные пути, такие как /marker-icon.png и /marker-shadow.png, для значков и теней соответственно.

Чтобы значки Leaflet по умолчанию считывались из каталога "./assets/leaflet/" или любого другого пути, необходимо настроить Leaflet для использования обновленного пути для значков. Это можно сделать, задав для свойства L.Icon.Default.imagePath новый путь.

Например, если output выглядит следующим образом:

"assets": [
  .
  .
  {
    "glob": "**/*",
    "input": "./node_modules/leaflet/dist/images/",
    "output": "./assets/leaflet/"  }
]

Вот как вы можете добиться этого в своем проекте:

  1. Откройте файл src/main.ts в своем проекте.
  2. Добавьте следующую строку вверху файла:
import * as L from 'leaflet';
L.Icon.Default.imagePath = 'assets/leaflet/';

Это задает для свойства imagePath элемента IconDefault нужный путь.

Обратите внимание, что вы можете выполнить предыдущий шаг в файле map.component.ts вместо файла main.ts.

Шаг 7: Запустите приложение Сохраните изменения и запустите приложение с помощью следующей команды:

ng serve

Откройте браузер и перейдите к http://localhost:4200, чтобы увидеть пример Leaflet в действии.

Выход:

Теперь, когда Leaflet Js работает в вашем приложении Angular, вы готовы приступить к реализации безграничных функций и раскрыть весь потенциал интерактивных карт в своих проектах.

Благодаря обширному набору функций Leaflet и мощным возможностям Angular у вас есть идеальное сочетание для создания динамичных и увлекательных карт.

Вот несколько интересных возможностей, которые вы можете изучить:

  1. Пользовательские маркеры и всплывающие окна: персонализируйте свои маркеры с помощью пользовательских значков, цветов и анимации. Отображение интерактивных всплывающих окон с дополнительной информацией, когда пользователи взаимодействуют с маркерами.
  2. Геолокация: интегрируйте службы геолокации, чтобы показать текущее местоположение пользователя на карте. Это может быть полезно для навигации, поиска близлежащих мест или предоставления рекомендаций на основе местоположения.
  3. Маршрутизация и направления: реализуйте функцию маршрутизации для расчета и отображения оптимальных маршрутов между несколькими местоположениями. Предоставьте пользователям возможность прокладывать маршруты, ориентировочное время в пути и пошаговые инструкции.
  4. Визуализация данных: наложение данных на карту с использованием geoJSON или других форматов. Визуализируйте статистическую информацию, тепловые карты или тематические карты, чтобы выделить закономерности и идеи.
  5. Интерактивные слои. Включайте интерактивные слои, такие как наложения, многоугольники или окружности, чтобы обеспечить дополнительный контекст или выделить определенные области интереса.
  6. Карта событий и взаимодействий: фиксируйте и реагируйте на действия пользователя, такие как щелчки, масштабирование, панорамирование или перетаскивание. Используйте эти события для запуска действий или предоставления динамических обновлений на основе действий пользователя.
  7. Рисование и редактирование. Позвольте пользователям рисовать фигуры, такие как многоугольники, круги или прямоугольники, прямо на карте. Позвольте им редактировать и манипулировать этими формами, предоставляя мощный инструмент для создания пользовательских областей, границ или геозон.

В этой статье мы предоставили пошаговое руководство по упрощению интеграции Leaflet JS с Angular с учетом отсутствия официальной документации по этой теме. Мы начали с создания нового проекта Angular и установки необходимых зависимостей. Затем мы создали компонент для размещения карты Leaflet и добавили код для инициализации карты, добавления маркеров и центрирования вида карты. Кроме того, мы объяснили, как импортировать CSS-файлы Leaflet и включать изображения Leaflet в активы проекта. Наконец, мы продемонстрировали, как настроить Leaflet для использования обновленного пути для значков по умолчанию.

Следуя этим шагам, вы сможете легко интегрировать Leaflet JS с Angular и использовать его мощные функции для создания интерактивных и визуально привлекательных карт для ваших проектов Angular.

Дайте мне знать, о чем вы хотели бы прочитать в следующей статье, и я буду рад поделиться своими знаниями.

Моя учетная запись LinkedIn:

Свяжитесь со мной для любой помощи, предложения, или даже сказать привет! 😎



Яман Алашкар — Full Stack Developer
www.linkedin.com



Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .