2014-03-01 2 views
0

내가 운이없는이 주제에 대한 여러 검색을 실행했습니다, 그래서 여기에 내 질문에 ... 내가 리플릿 만들어 모두 기본에 대한 레이어 컨트롤이 레이어 오버레이 지리적지도 타일로 매핑 한지형 이미지가 아닌 리플릿 기본 레이어 제어?

이, 그리고 내가 만든 지리적이지 않은 이미지 타일이있는 리플렛 맵을 만들었지 만, 지리학 적 이미지가 아닌 리플렛 맵을 만드는 데 문제가 있습니다. 사용자가 레이어 컨트롤을 타일링하여 리플릿 레이어 컨트롤 스위치를 통해 이미지를보고 확대 할 수 있습니다. .

모든 설정은 타일 레이어 컨트롤없이 단일 이미지 버전에서 올바르게 작동하지만 다음 코드에서는 작동하지 않습니다. 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

당신은이 문제를 얼마나 정확하게 해결할 수 있습니까? 감사! –

관련 문제