Карты в Angular и Leaflet: всплывающие окна

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

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.