Добавить маркер на карту Leaflet из другого компонента angular

Question

В моем приложении Angular я объявил переменную const map в моем mapComponent, и я могу добавить собственный маркер на карту в том же компоненте; Как я могу сделать то же самое с другими Angular компонентами, используя ту же карту?

Answer 1

Вы можете использовать сервис для установления связи между двумя компонентами.

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

class MarkerService {
  coords: any;
  coordsChange: Subject<LatLngExpression> = new Subject<LatLngExpression>();

  constructor() {
    this.coords = [];
  }

  change(coords: Array<number>) {
    this.coords = coords;
    this.coordsChange.next(this.coords);
  }
}

Чтобы проиллюстрировать пример, вы можете иметь в одном компоненте кнопку. Когда вы щелкаете по нему, вы вызываете функцию внутри сервиса и изменяете массив координат. Затем в вашем компоненте приложения, например, инициализируйте вашу карту листовки. Затем подпишитесь на ваш сервис, чтобы получить новое обновленное значение и отобразить маркер на карте, также изменив вид карты.

map;

  constructor(private ms: MarkerService) {
    console.log(this.ms.coords);
    this.ms.coordsChange.subscribe(coords => {
      console.log(coords);
      this.map.flyTo(coords, this.map.getZoom());
      L.marker(coords, { icon }).addTo(this.map);
    });
  }

Демо