我正在使用 leaflet.js 和 OSM tiles 创建 map ,但我只希望美国大陆可见,而不是整个世界。这可能吗?
我正在这样加载 map :
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);
最佳答案
这是可能的,也很容易做到。首先,您需要美国大陆边界框(最外边缘)的坐标。你可以用谷歌搜索它们,我在这里找到它们: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
];
现在您可以通过两种方式在 map 上设置它们,初始化时,使用 L.Map
的 maxBounds
选项和 fitBounds
方法>
L.map('map', {
'center': [0, 0],
'zoom': 0
'maxBounds': maxBounds
}).fitBounds(maxBounds);
这是一个关于 Plunker 的工作示例:http://plnkr.co/edit/eEsxeh?p=preview
或者当您的 map 已经初始化时,您可以使用L.Map
的setMaxBounds
方法和fitBounds
方法。 (假设您的 map 已分配给变量 map
):
map.setMaxBounds(maxBounds);
map.fitBounds(maxBounds);
这是一个关于 Plunker 的工作示例:http://plnkr.co/edit/HJKk0O?p=preview
关于javascript - 使用 Leaflet.js 和 OSM 时仅显示美国,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28117281/