2016-08-08 36 views
1

Mein Code Laden:Leaflet Karte nicht Fliesen

<!DOCTYPE html> 
<html> 
<head> 
    <title>OpenTTD Map</title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" /> 
    <script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script> 
</head> 
<body> 
    <div id="map" style="width: 1600px; height: 900px"></div> 
    <script> 

     var tile_url = 'http://dev.ruun.nl/zelf/openttd/tiles/map_{x}_{y}.png'; 

     var map = L.map('map', { 
      maxZoom: 20, 
      minZoom: 20, 
      crs: L.CRS.Simple 
     }).setView([0, 0], 20); 
     //65409x32839 
     var southWest = map.unproject([0, 32839], map.getMaxZoom()); 
     var northEast = map.unproject([65409, 0], map.getMaxZoom()); 
     map.setMaxBounds(new L.LatLngBounds(southWest, northEast)); 
     L.tileLayer(tile_url, { 
      attribution: 'Map data &copy; Ieuan\'s OpenTTD World',  
      continuousWorld: true, 
      tileSize: 256 
     }).addTo(map); 

    </script> 
</body> 
</html> 

Aus irgendeinem Grund meine Fliesen sind nicht geladen, Karte zeigt nur grau. Sie sind nicht durch Browser heruntergeladen werden, und ich bin immer noch keine Fehlermeldungen

Die Fliesen sind 256x256 Teile eines 65409x32839 Screenshot

URL zu sehen ist http://dev.ruun.nl/zelf/openttd/

Antwort

3

Sie müssen explizit angeben, dass Ihr Kachelebene maxZoom Die Option ist 20, andernfalls erhalten Sie den Standardwert 18, der verhindert, dass Ihre Kacheln bei Ihrem einzigen Zoom aufgerufen werden (20).

Demo: http://plnkr.co/edit/0654usix33JJ5HJ4EQT4?p=preview

+0

Es ist gut, daran zu erinnern, dass eine 'maxZoom' für die Karte zur Einstellung tut ** nicht ** außer Kraft setzen [default' maxZoom' Option in 'TileLayer's] (http: // leafletjs. com/reference-1.0.0.html # tlelayer-maxzoom) – IvanSanchez

+0

Danke Ghybs, ich habe es geschafft, alles auf der Seite von Leaflet arbeiten zu lassen – Ieuan