Question

很抱歉，如果这个问题是另一个问题的重复，但找不到解决方案。

我有一个基于Angular 6和Leaflet贴图的应用程序（不是ngx-leflet）。我需要在每次鼠标移动时获取光标在地图坐标上的位置。我想我可以为Leaflet使用this处理事件，但是我不知道如何将其与地图结合起来。这是在自定义窗口小部件上使用它的示例：

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

在监听mousemove事件时，您需要扩展Leaflet控制：

ngOnInit

Demo

请注意，使用的是Angular 7而不是6

更新：

第二种方法是使用外部库Leaflet.MousePosition并将其与Angular集成

只需安装该库，将其导入，添加其相关的CSS并在... 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); }中使用此代码行来实例化mousePosition。

.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;
}

并在styles.css上添加

{{1}}

Alternative method demo

在角度为6

1 个答案: