Openlayers 3: Почему некоторые приложения не работают в приложении Angular 5? - PullRequest
Новая
       6

Openlayers 3: Почему некоторые приложения не работают в приложении Angular 5?

0 голосов
/ 09 ноября 2018

Почему в моем приложении Angular 5 не работает "подпрыгивающая" анимация?

В этом случае отскок означает, что через 1 секунду новая карта просто отображается / всплывает без какой-либо анимации. Масштабирование работает с анимацией. Панорамирование тоже не работает.

Я должен использовать Openlayers3 (а не более новую версию).

Мой HTML-код: 

<div #mapElement id="map" class="map"></div>
<button (click)="doBounce('london');">Bounce To London</button>

Код компонента: 

declare var ol: any;
...
export class AnimateTestComponent implements AfterViewInit {
  @ViewChild('mapElement') mapElement: ElementRef;
  public map: any;
  osmlayer: any;
  constructor() {
    const somewhere= ol.proj.transform([6.0, 52.0], 'EPSG:4326', 'EPSG:3857');
    this.osmlayer = new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    const view = new ol.View({
      center: somewhere,
      zoom: 15
    });
    this.map = new ol.Map({
      layers: [this.osmlayer],
      view: view
    });
  }
  ... 
  doBounce(location) {
    const newCenter = this.getCoordinate(location); // translate coord
    const that = this;
    const bounce = ol.animation.bounce({
      resolution: that.map.getView().getResolution() * 2
    });
    const pan = ol.animation.pan({
      source: that.map.getView().getCenter()
    });
    this.map.beforeRender(bounce);
    this.map.beforeRender(pan);
    this.map.getView().setCenter(newCenter);
  }
  ...
  ngAfterViewInit() {
    this.map.setTarget(this.mapElement.nativeElement.id);
  }
...