Nur USA bei Verwendung von Leaflet.js und OSM anzeigen

Question

Ich verwende flaglet.js und OSM-Kacheln, um eine Karte zu erstellen, aber ich möchte nur die kontinentalen Vereinigten Staaten sehen, nicht die ganze Welt. Ist das möglich?

Ich lade die Karte wie folgt aus:

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

Das ist möglich und einfach zu tun. Zuerst benötigen Sie die Koordinaten für die Begrenzungsbox (die äußersten Kanten) der kontinentalen Vereinigten Staaten. Sie können sie einfach mal googlen, ich fand sie hier: http://isithackday.com/geoplanet-explorer/index.php?woeid=24865672 Sie müssen den Südwesten und Nordosten koordiniert Grenzen Objekt zu erstellen:

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

Oder Sie können für die Kurzversion, eine verschachtelte Array gehen:

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

Jetzt können Sie die auf der Karte in zwei Möglichkeiten, bei der Initialisierung festgelegt, mit der maxBounds Option und die fitBounds Methode des L.Map

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

Hier ist ein funktionierendes Beispiel auf Plunker: http://plnkr.co/edit/eEsxeh?p=preview

Oder wenn Ihre Karte bereits initialisiert ist, können Sie die setMaxBounds-Methode und die fitBounds Methode von L.Map verwenden. (Vorausgesetzt, Ihre Karte zu Variable map vergeben):

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

Hier ist ein funktionierendes Beispiel auf Plunker: http://plnkr.co/edit/HJKk0O?p=preview