2014-03-01 62 views
0

我已經運行在這個問題上沒有運氣多次搜索,所以這裏是我的問題...具有非地理圖像的單張基礎層控件?

我創建單張與具有兩個基本層的控制和貼面層的地理地圖瓦片地圖,我已經創建小冊子貼圖與非地理圖像瓷磚,但我無法創建傳單地圖與非地理圖像,也有瓷磚層控制 - 所以用戶可以切換圖像之間通過Leaflet層控制開關查看和放大。

所有設置在無圖層控制的單圖版本中都能正常工作,但它們在下面的代碼中不起作用。我已經在Dreamweaver和Firebug上運行了代碼檢查器,並且他們發現沒有錯,但是我得到的是一個空白屏幕,沒有圖像,沒有圖層控件可見,並且在右下角沒有圖層屬性。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Horsehead Nebulae</title> 
    <meta charset="utf-8"/> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" /> 
    <!--[if lte IE 8]> 
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" /> 
    <![endif]--> 
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> 
    <script> 
     function init() { 
     var mapMinZoom = 0; 
     var mapMaxZoom = 5; 
     var map = L.map('map', { 
      maxZoom: mapMaxZoom, 
      minZoom: mapMinZoom, 
      crs: L.CRS.Simple 
     }).setView([0, 0], mapMaxZoom); 

     var mapBounds = new L.LatLngBounds(
      map.unproject([0, 5376], mapMaxZoom), 
      map.unproject([5120, 0], mapMaxZoom)); 

     map.fitBounds(mapBounds); 

     var hhAttr = 'Ipsulem lorem', 

      hhUrl = 'http://www.astonisher.com/maps/nebulae/horsehead/{z}/{x}/{y}.png'; 

     var horsehead = L.tileLayer(hhUrl, {attribution: hhAttr}); 

     var heAttr = 'Ipsumel lorem', 

      heUrl = 'http://www.astonisher.com/maps/nebulae/helix/{z}/{x}/{y}.png'; 

     var helix = L.tileLayer(heUrl, {attribution: heAttr}); 


     var map = L.map('map', { 
      minZoom: mapMinZoom, 
      maxZoom: mapMaxZoom, 
      bounds: mapBounds, 
      noWrap: true,   
      layers: [horsehead] 
     }); 

     var baseLayers = { 
      "Horsehead": horsehead, 
      "Helix": helix 

     }; 

     L.control.layers(baseLayers).addTo(map); 
     } 
    </script> 
    <style> 
     html, body, #map { width:100%; height:100%; margin:0; padding:0; } 
    </style> 
    </head> 
    <body onLoad="init()"> 
    <div id="map"></div> 
    </body> 
</html> 

已經嚼了好幾天了。真的很感激你能引導我走向正確的方向。謝謝...

回答

2

明白了。原來,我混合了一些L.tileLayer和L.map屬性。當我得到了理順,它工作得很好...

+0

你可以請發佈更多的細節,你是如何解決這個問題?謝謝! –