Получить позицию курсора в координатах на карте Leaflet в угловых 6

Question

Извините, если этот вопрос является дубликатом другого, но я не могу найти решение своей проблемы.

У меня есть приложение, основанное на Angular 6 и Leaflet map (не ngx-leflet),Мне нужно получить положение моего курсора в координатах на карте при каждом движении мыши.Я думаю, что мог бы использовать эту обработку событий для Leaflet, но я не знаю, как объединить это с моей картой.Вот пример использования его с пользовательским виджетом:

widget-options.model.ts

import { Map, ControlOptions } from 'leaflet';

export interface WidgetsOptions extends ControlOptions {
    map: Map;
}

app.component.ts

export class AppComponent {
    // ... init zoom and width 
    mapWidgetsOptions$: Observable<WidgetsOptions>;

    mapReady(map: Map) {
        this.mapWidgetsOptions$ = of<WidgetsOptions>({
            position: 'bottomleft',
            map: map
            // should I add here mousePosition ?
        });
    }
}

app.component.html

<app-map (mapReady)="mapReady($event)">

    <map-widgets [options$]="mapWidgetsOptions$"></map-widgets>

</app-map>

map-widget.component.ts

 export class MapWidgetsComponent extends Control implements OnInit {

    @Input() options$: Observable<WidgetsOptions>;

    constructor(private element: ElementRef) {
        super();
    }

    ngOnInit() {
        this.options$
            .pipe(
                take(1)
            )
            .subscribe(options => {
                this.options = options;
                this.addTo(options.map);
            });
    }

    onAdd(map: Map): HTMLElement {
        return this.element.nativeElement;
    }
}

Кто-нибудь может привести пример того, как это сделать?

Answer 1

Вам необходимо расширить управление Leaflet во время прослушивания события mousemove:

const Coordinates = L.Control.extend({
    onAdd: map => {
      const container = L.DomUtil.create("div");
      map.addEventListener("mousemove", e => {
          container.innerHTML = `
          <h2>Latitude is 
            ${e.latlng.lat.toFixed(4)} <br> 
            and Longitude is  ${e.latlng.lng.toFixed(4)}
            </h2>
          `;
     });
     return container;
   }
});
map.addControl(new Coordinates({ position: "bottomleft" }));

Demo

Обратите внимание, что Angular 7 используется вместо 6

Обновление :

Второй способ - использовать внешнюю библиотеку Leaflet.MousePosition и интегрировать ее с Angular

Просто установите библиотеку, импортируйте ее, добавьте соответствующуюcss & используйте эту строку кода внутри ngOnInit для создания экземпляра mousePosition.

...
import * as L from "leaflet";
import "leaflet-mouse-position";

ngOnInit() {
    const map = L.map("map").setView([51.505, -0.09], 13);
    ...
    L.control.mousePosition().addTo(map);
}

и на styles.css добавить

.leaflet-container .leaflet-control-mouseposition {
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 5px #bbb;
  padding: 0 5px;
  margin: 0;
  color: #333;
  font: 11px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
}

Альтернативный метод demo