Почему в моем приложении 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);
}