角度小叶贴图，调整位置和缩放调整大小

Question

我这里有一个傻瓜 - https://plnkr.co/edit/GoO4jGWQ24FUJpKYRDjO?p=preview

我在Angular中使用Leafletjs地图。

我想调整地图并将地图放在较小的屏幕上。

我可以调整正在调整大小的屏幕，但是我无法看到在调整大小时如何更改位置和缩放。

import {Component,HostListener, OnInit} from "@angular/core";

declare let L: any;

@Component({
  selector: 'map',
  templateUrl: './src/map.html'
})

export class MapComponent implements OnInit {

    smallScreen: number = 768;
  center: any = [54, -10];
  zoom: number = 5;

  centerSmall: any = [53, -15];
  zoomSmall: number = 6;

  private atMap: any;

    constructor() { }

    @HostListener('window:resize', ['$event'])
    resizeHandler(event: any) {
        if(event.target.innerWidth > this.smallScreen){
            this.initialiseMap(this.centerSmall, this.zoomSmall)
        }
    }

    ngOnInit() {

        setTimeout(() => {
            this.initialiseMap(this.center, this.zoom);
        }, 1000)
    }

    private initialiseMap(center:any, zoom:number) {

        this.atMap = L.map('mapid',{
            center: center,
            zoomControl: false,
            zoom: zoom
        });

        this.atMap.options.maxZoom = 15;
        this.atMap.options.minZoom = 5;

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets',
        accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'
    }).addTo(this.atMap);


        L.control.zoom({
            position:'topright'
        }).addTo(this.atMap);
    }
}