Leaflet js - 相对于浏览器窗口的位置图

Question

我这里有一个笨蛋 - https://plnkr.co/edit/lsx38RaBgv3PlClPimyu?p=preview

这是 Angular 4 中的传单 js 地图

我有按钮可以重新定位地图以打印它并将地图重置到起始位置。

打印按钮重新定位地图，以便我可以打印英国

定位是以地图上的经纬度为中心的center来完成的。

这可行，但如果浏览器窗口大小不同，则会显示地图的不同部分。

如果浏览器窗口较小，它会切断我要打印的英国。

我知道打印插件，但我想从页面打印其他内容

可以将纬度定位在距浏览器窗口左上角一定距离的位置。

    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 = 600;
      center: any = [54, -5];
      zoom: number = 6;

      centerSmall: any = [50, 10];
      zoomSmall: number = 5;

      private atMap: any;

        constructor() { }

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

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

        if(this.atMap != undefined || this.atMap != null){
          this.atMap.off();
          this.atMap.remove();  
        }  

            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({

Answer 1

我知道这并不能直接回答您的问题，但为什么不尝试在英国周围设置一个边界框，然后使用.fitBounds() 方法将地图拟合到它：

const uk = new L.LatLngBounds([[49,-9.5],[62,2.3]]);
this.atMap.fitBounds(uk);

无论浏览器窗口的形状和大小如何，这都会平移和缩放地图以使整个英国可见。它不能保证中心与窗口角落的距离是固定的，但您可以调整边界以在所需区域周围提供足够的边界。

Answer 2

我碰巧在做小册子，这是我的代码，用于初始化一个地图，该地图将以一个点为中心无论窗口大小如何（我相信你会根据你的需要）：

  private initializeMap() {
    // Place the container at the center of France
    const x: L.LatLng = new L.LatLng(47.212105775622426, 2.3291015625000004);

    // Move the zoom buttons on the right (the left is used for research purposes)
    this.leafletMap = L.map(this.map.nativeElement, { zoomControl: false }).setView(x, 6);
    L.control.zoom({ position: 'topright' }).addTo(this.leafletMap);

    // Add a tile layer to the map 
    this.addLayer();
  }

  private addLayer() {
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      // tslint:disable-next-line:max-line-length
      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>',
      maxZoom: 18,
      id: 'mapbox.streets',
      accessToken: environment.mapBoxToken
    }).addTo(this.leafletMap);

  }