Leaflet - 獲取覆蓋整個屏幕的地圖

在傳單和地圖框中，我想擺脫位於地圖上方的兩個灰色條，如下圖所示。當我放大時（例如，zoomLevel = 3），我的#map DOM元素將全屏顯示，並且灰色條消失。所以灰色條看起來是由於zoomLevel具有比我的屏幕更小的瓦片的給定高度（px）而引起的。Leaflet - 獲取覆蓋整個屏幕的地圖

我想保留相同縮放級別的瓷磚，但要確保瓷磚的高度至少覆蓋整個屏幕。

這裏是我的地圖設置代碼：

   vm.map = L.map('map', { 
        center: [35, 15], 
        zoom: 2, 
        maxZoom: 21, 
        scrollWheelZoom: true, 
        maxBounds: [ 
        [89.9, 160.9], 
        [-89.9, -160.9] 
        ], 
        zoomControl: false, 
        noWrap: true, 
        zoomAnimation: true, 
        markerZoomAnimation: true, 
       });

我使用的角度和我的屏幕尺寸爲1920×1080

來源

2017-03-17 Robycool

我設法擺脫條通過將跟隨着CSS屬性我#map元素：'變換：規模（1.1）'。但是，這會在我的其他代碼中造成混亂，所以我正在尋找其他的東西。 – Robycool

您可以嘗試使傳單垂直重複地圖。然而，目前官方回購協議不支持此功能（https://github.com/Leaflet/Leaflet/issues/904），因此您可能需要爲此開放PR。它不應該太難做，因爲它已經在X軸上實現了。 – Buddyshot

謝謝@Buddyshot。你似乎很好地跟着我，回答我所有的問題！很好的例子說明開放源代碼的真棒。我將首先檢查我是否可以解決現有傳單包中的問題，並以其他方式實施您的解決方案。 – Robycool

聽起來像是你需要計算的最低縮放級別該地圖只顯示85°N和85°S之間的區域。

的getBoundsZoom() method of L.Map有助於此，例如：

var bounds = L.latLngBounds([[85, 180],[-85, -180]]); 
var wantedZoom = map.getBoundsZoom(bounds, true); 
var center = bounds.getCenter(); 
map.setView(center, wantedZoom);

注意，這是一個通用的解決方案，並努力在地圖容器的任何尺寸。

您還可以將地圖的minZoom設置爲該值，並使用分數縮放進行試驗（請參閱zoomSnap選項）。如果您希望用戶無法在繪製區域外拖動，請使用地圖的maxBounds選項，如[[85, Infinity],[-85, -Infinity]]。

（如果你想知道爲什麼85°N，85°S，閱盡https://en.wikipedia.org/wiki/Web_Mercator）

來源

2017-03-17 11:10:04 IvanSanchez

謝謝，這似乎是一個優雅的解決方案。不過，在我的具體情況下，保持縮放級別= 2的圖塊非常重要，否則我的地圖變得太難看了。事實上，我需要2.1左右的縮放級別，只是放大縮小級別2的圖塊。或者，也可以選擇在給定縮放級別縮放縮放圖塊大小的功能。 – Robycool

正如我已經說過的，試驗'zoomSnap'。嘗試將'zoomSnap'設置爲'0.1'和'minZoom'爲'2.1'。 :-) – IvanSanchez

工程就像一個魅力。謝謝！ – Robycool

Leaflet - 獲取覆蓋整個屏幕的地圖

回答

相關問題