События масштабирования карты ngx-leaflet не запускаются

Согласно справочной документации ngx, ссылка (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();
  }
}

typescript javascript angular leaflet ngx-leaflet
person mrOak    schedule 22.08.2018    source источник
comment
возможный дубликат Получение списка маркеров при увеличении в буклете карта   -  person Nisarg    schedule 22.08.2018
comment
Этот вопрос о маркерах, мой вопрос о leafletMapZoom событиях. Следует ли мне изменить формулировку вопроса, чтобы лучше отразить это?   -  person mrOak    schedule 22.08.2018
comment
Можете ли вы предоставить код вашего компонента?   -  person reblace    schedule 23.08.2018
comment
Я добавил код компонента   -  person mrOak    schedule 23.08.2018
comment
Я могу убедиться, что он работает так, как задумано в ngx-leaflet v4. В вашем коде есть ошибки. В привязках вывода вы вызываете handleMapMoveEnd, но функция называется onMapMoveEnd. И в html у вас перевернуты обработчики перемещения и масштабирования. В противном случае вы делаете это правильно. Возможно, вы захотите поместить операторы console.log в обратные вызовы, чтобы убедиться, что он работает, как только вы исправите проблемы.   -  person reblace    schedule 23.08.2018
comment
Не могли бы вы опубликовать пример? Я внес изменения, и методы все еще не используются. У меня есть точки останова в инструментах разработчика, а также добавлены журналы консоли.   -  person mrOak    schedule 24.08.2018
comment
Ознакомьтесь с веткой demo / events на странице github.com/Asymmetrik/ngx-leaflet-tutorial- ngcli   -  person reblace    schedule 28.08.2018

Ответы (1)


arrow_upward
2
arrow_downward

В репозитории Github для руководства @ asymmetrik / ngx-leaflet ngcli я добавлена ​​ветка demo/events, которая показывает действительно простой пример использования событий масштабирования / перемещения.

git clone [email protected]: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');
  }
}
person reblace    schedule 28.08.2018