Карты в Angular и Leaflet: всплывающие окна
Development, Java | Комментировать запись
Leaflet поддерживает всплывающие окна, благодаря которым на карте можно отображать дополнительную информацию. Такие окна содержат текст и появляются при нажатии на метки или указанные на карте области.
Примечание: Это продолжение серии по использованию Angular и Leaflet. Другие части можно найти по тегу Leaflet maps.
В этом руководстве вы узнаете, как настроить всплывающие окна на карте с помощью сервиса для управления логикой всплывающих окон.
Требования
Для выполнения этого мануала рекомендуется ознакомиться с предыдущими частями серии. Подробный список требований к среде – в первом руководстве, Создание карт в Angular и Leaflet.
1: Создание сервиса всплывающих окон
На данном этапе у вас уже должна быть рабочая реализация Leaflet в приложении Angular.
Используйте терминал, чтобы перейти в каталог проекта. Затем выполните следующую команду, чтобы создать новый сервис:
npx @angular/cli generate service popup --skip-tests
Это создаст новый файл по имени popup.service.ts.
Затем мы добавим этот сервис в качестве поставщика в свой app.module.ts.
Откройте файл app.module.ts в редакторе кода и внесите следующие изменения:
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { MarkerService } from './marker.service'; import { PopupService } from './popup.service'; import { AppComponent } from './app.component'; import { MapComponent } from './map/map.component'; @NgModule({ declarations: [ AppComponent, MapComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [ MarkerService, PopupService ], bootstrap: [AppComponent] }) export class AppModule { }
Теперь ваше приложение поддерживает новый сервис PopupService.
2: Отображение всплывающих окон
Откройте только что созданный файл popup.service.ts в редакторе кода и объявите в нем функцию makeCapitalPopup:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class PopUpService {
constructor() { }
makeCapitalPopup(data: any): string { }
}
Эта функция создаст всплывающие окна, которые будут содержать данные из файла GeoJSON (такой файл мы создали во второй части этой серии руководств).
Добавьте параметры name, state и population:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class PopUpService {
constructor() { }
makeCapitalPopup(data: any): string {
return `` +
`<div>Capital: ${ data.name }</div>` +
`<div>State: ${ data.state }</div>` +
`<div>Population: ${ data.population }</div>`
}
}
Вернитесь в src/app/marker.service.ts и импортируйте PopupService:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';
import { PopupService } from './popup.service';
И добавьте PopupService в конструктор:
constructor(
private http: HttpClient,
private popupService: PopupService
) { }
Добавляя сервисы в раздел providers в app.modules.ts, вы создаете синглтон-провайдеры для всего приложения, поэтому Angular не будет жаловаться на зависимость.
Также в файл MarkerService нужно добавить метод bindPopup():
makeCapitalCircleMarkers(map: L.map): void {
this.http.get(this.capitals).subscribe((res: any) => {
const maxVal = Math.max(...res.features.map(x => x.properties.population), 0);
for (const c of res.features) {
const lat = c.geometry.coordinates[0];
const lon = c.geometry.coordinates[1];
const circle = L.circleMarker([lon, lat], {
radius: MarkerService.ScaledRadius(c.properties.population, maxVal)
});
circle.bindPopup(this.popupService.makeCapitalPopup(c.properties));
circle.addTo(map);
}
});
}
Сохраните файл. Затем остановите приложение и перезапустите его, после чего откройте его в своем веб-браузере (localhost:4200) и попробуйте взаимодействовать с одним из маркеров. При клике по метке вы увидите маленькое всплывающее окно, содержащее название штата, его столицы и ее население.
Теперь наша карта поддерживает всплывающие окна.
Заключение
В этом мануале вы создали специальный сервис для поддержки всплывающих окон. Также вы знаете, как прикрепить всплывающие окна к меткам с помощью L.bindPopup.
Tags: Angular, AngularJS, Leaflet, Leaflet maps