我正在使用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);
解决方法
这是可能的,也很容易做到.首先,你需要美国大陆的边界框(最外边)的坐标.你可以谷歌他们,我在这里找到它们:
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选项和L.Map的fitBounds方法在初始化时以两种方式在地图上设置它们.
L.map('map',{ 'center': [0,0],'zoom': 0 'maxBounds': maxBounds }).fitBounds(maxBounds);
这是Plunker的一个工作示例:http://plnkr.co/edit/eEsxeh?p=preview
或者,当您的地图已经初始化时,您可以使用setMaxBounds方法和L.Map的fitBounds方法. (假设您的地图已分配给变量地图):
map.setMaxBounds(maxBounds); map.fitBounds(maxBounds);
这是Plunker的一个工作示例:http://plnkr.co/edit/HJKk0O?p=preview