Question

我正在使用leaflet.js和OSM图块来创建地图，但我只希望美国大陆可以看到，而不是整个世界。这可能吗？

我正在加载地图：

var map = L.map('map').setView([39.82, -98.58], 5);

L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
    attribution: '...',
    maxZoom: 18
}).addTo(map);

Answer 1

这很容易做到。首先，你需要美国大陆的边界框（最外边）的坐标。你可以谷歌他们，我在这里找到它们：http://isithackday.com/geoplanet-explorer/index.php?woeid=24865672你需要西南和东北坐标来创建一个边界对象：

var maxBounds = L.latLngBounds(
    L.latLng(5.499550, -167.276413), //Southwest
    L.latLng(83.162102, -52.233040)  //Northeast
);

或者你可以使用速记版本，一个嵌套数组：

var maxBounds = [
    [5.499550, -167.276413], //Southwest
    [83.162102, -52.233040]  //Northeast
];

现在，您可以在初始化时使用maxBounds选项和fitBounds

的L.Map方法，以两种方式在地图上设置这些内容

L.map('map', {
    'center': [0, 0],
    'zoom': 0
    'maxBounds': maxBounds
}).fitBounds(maxBounds);

以下是关于Plunker的工作示例：http://plnkr.co/edit/eEsxeh?p=preview

或者，当您的地图已初始化时，您可以使用setMaxBounds方法和fitBounds L.Map方法。（假设您的地图已分配给变量map）：

map.setMaxBounds(maxBounds);
map.fitBounds(maxBounds);

以下是关于Plunker的工作示例：http://plnkr.co/edit/HJKk0O?p=preview

使用Leaflet.js和OSM时仅显示美国

1 个答案: