ngx-leaflet 地图缩放事件未触发

Question

根据 ngx-leaflet 文档 link (leafletMapMoveEnd) 和 (leafletMapZoomEnd) 都是公开事件。

我假设这些事件在地图初始化的同一 DOM 中公开，并且应该像这样实现：

<div 
 leaflet
 [leafletOptions]="options"
 (leafletMapReady)="onMapReady($event)"
 (leafletMapMoveEnd)="onMapMove($event)"
 (leafletMapZoomEnd)="onMapZoom($event)">

这是捕获这些事件的正确方法吗？

(leafletMapReady) 似乎工作正常。

然而，当我自己弄乱地图时，(leafletMapZoomEnd) 或 (leafletMapMoveEnd) 似乎都没有触发。

我尝试了平移地图以及放大和缩小地图。这些交互都不会导致 handleMapZoomEnd($event) handleMapMoveEnd($event) 方法被命中。

import { Component, Input, OnChanges, OnInit, Output, EventEmitter } from '@angular/core';
import * as fromLeafLet from 'leaflet'; 
import 'leaflet.markercluster';

@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: [
    './map.component.css',
    './extra-marker-icon.css'
  ]
})
export class MapComponent implements OnInit, OnChanges {
 constructor(){}

 onMapReady(map: fromLeafLet.Map): void {
    this.map = map;
  }

  onMapZoom(event: any):void{
    console.log('Zoom');
    this.onMapDirty.emit();
  }

  onMapMove(event: any):void{
    console.log('Move');
    this.onMapDirty.emit();
  }
}

Answer 1

在@asymmetrik/ngx-leaflet ngcli 教程的 Github repo 中，我添加了一个分支 demo/events，它显示了使用 zoom/move 事件的一个非常简单的示例。

git clone git@github.com:Asymmetrik/ngx-leaflet-tutorial-ngcli.git
git checkout demo/events

感兴趣的文件是：

./src/app/app.component.html
./src/app/app.component.ts

模板（下方）包含两个处理程序，每个用于 leafletMapMoveEnd 和 leafletMapZoomEnd 输出：

<div class="map"
  leaflet
  [leafletOptions]="options"
  (leafletMapReady)="onMapReady($event)"
  (leafletMapMoveEnd)="handleMapMoveEnd($event)"
  (leafletMapZoomEnd)="handleMapZoomEnd($event)"
></div>

组件（下方）仅在这些事件发生时打印到控制台。我删除了大部分不需要演示活动的东西。

import { Component } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [
    './app.component.css'
  ]
})
export class AppComponent {

  streetMaps = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    detectRetina: true,
    attribution: '&amp;copy; &lt;a href="https://www.openstreetmap.org/copyright"&gt;OpenStreetMap&lt;/a&gt; contributors'
  });


  map: L.Map;

  options = {
    layers: [ this.streetMaps ],
    zoom: 7,
    center: L.latLng([ 46.879966, -121.726909 ])
  };

  onMapReady(map: L.Map): void {
    this.map = map;
  }

  handleMapZoomEnd(map: L.Map):void{
    console.log('onMapZoomEnd');
  }

  handleMapMoveEnd(map: L.Map):void{
    console.log('onMapMoveEnd');
  }
}

ngx-leaflet 地图缩放事件未触发

ngx-leaflet map zoom events not triggering

javascript

angular

typescript

leaflet

ngx-leaflet