リーフレットパッディングが機能しない

Question

私は小さなリーフレットアプリケーションを開発していて、期待通りに「パディング」を行うことはできません。私は信じて

mymap.fitBounds(myLayer.getBounds(), {padding: [1000, 1000]}) 

はmyLayer.getBounds（によって得られた境界にパディングを追加する必要があります）、その後、マップは基づいて適切なレベルにズームする必要があります。以下のコードでは、クリックハンドラ内で、私はラインを持っています境界とパディングの両方でしかし、私はパディングオプションを渡すかどうかに違いはありません。私はまた、パディング数を変更しても差は見られません。 現在、ユーザーがポイントで表される要素をクリックすると、マップは「maxZoom」値に基づいてそのポイントを拡大します。たとえば、オークランドをクリックすると、マップには「maxZoom」に基づいてマーカーの周りに領域が表示されます。 「パディング」オプションは何もしません。 fitBounds()方法の

JSコード

//instantiate map 
var mymap = L.map('mapid').setView([39.8283, -98.5795], 3); 

//apply layer 
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>', 
    maxZoom: 18, 
    id: 'mapbox.streets', 
    accessToken: 'all-your-tokens-are-belong-to-me' 
}).addTo(mymap); 

//cities for markers 
var locations ={ 
    boston: {"type": "Point", "coordinates": [-71.05977, 42.35843]}, 
    oakland: {"type": "Point", "coordinates": [-122.2708, 37.80437]}, 
    berkeley: {"type": "Point", "coordinates": [-122.2737, 37.8712]}, 
    london: {"type": "Polygon", "coordinates": [[[-0.08, 51.509], [-0.06, 
    51.503], [-0.047, 51.51]]]}, 
    dublin: {"type": "Polygon", "coordinates": [[ [-6.2890, 53.3439], 
    [-6.2653, 
    53.3435], [-6.2603, 53.3356], [-6.2936, 53.3320] ]]}, 
    glasgow: {"type": "Point", "coordinates": [-4.2435, 55.8627]} 
}; 

//define styles 
var myStyle = { 
    "color": "#ff7800", 
    "weight": 5, 
    "opacity": 0.65 
}; 

//Create geoJson layer 
var myLayer = L.geoJSON(null, {style: myStyle}).addTo(mymap); 

//function to add element to geoJson layer 
function updateMap(object) { 
    myLayer.addData(object); 
}; 

//click on the location's button, add it to the map 
$('button').click(function(){ 
    var region = locations[this.id] 
    updateMap(region); 
    regionTypeContainer.push(region.type); 
    mymap.fitBounds(myLayer.getBounds(), {padding: [1000, 1000]}); // padding 
    //not doing anything 
}); 

Answer 1

paddingオプションはfitBounds計算からマップビューポートの一部を除外することです。

あなたが説明するように、このpaddingオプションは何も変わりません（つまり、あなたにGeoJSON層群は、単一ポイント機能が含まれている）の一点にfitBoundsにしよう。、ノー実際にそこにあるので、あなたはまだmaxZoomにズームでしょう。すなわちフィットする領域。 bounds.getSouthWest().equals(bounds.getNorthEast())

そしてマップが現在のズームレベルを維持するように、その場合には、あなたの代わりに、例えばmymap.panTo(bounds.getCenter())を使用することができます。

非常に単純な回避策は、getBoundsが「空」の領域を返す場合を検出することです。

var bounds = myLayer.getBounds(); 

if (bounds.getSouthWest().equals(bounds.getNorthEast())) { 
    // Only a single point feature to view. 
    mymap.panTo(bounds.getCenter()); 
} else { 
    // Some area to fit bounds to. 
    mymap.fitBounds(bounds); 
} 

デモ：https://jsfiddle.net/3v7hd2vx/350/