地圖渲染，而不是一個大的單一

我創建一個映射，它由三個地圖和標記的許多小瓷磚總能like in this leaflet example之間切換，雖然當我測試它，而不是每個地圖渲染爲一個單一版本填充地圖框架，它們在瓦片佈局中顯示儘可能多的倍數。以下是我目前使用的代碼，請注意，我用於地圖的圖像實際上不是地圖，因此我使用的是「L.CRS.Simple」。地圖渲染，而不是一個大的單一

This is the result I was expecting（SAN的廠商，並與我的圖片），也許有人能發現我哪裏錯了？

<html> 
<head> 
    <title>Interactive Map</title> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/> 
    <script src="https://unpkg.com/le[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script> 
    <style> 
     #map { 
      width: 1000px; 
      height: 1000px; 
      } 
    </style> 
</head> 

<body> 
    <div id="map"> 
    <script> 

     var map1 = L.tileLayer('map1.png'); 
     var map2 = L.tileLayer('map2.png'); 
     var map3 = L.tileLayer('map3.png'); 

     var markers = L.layerGroup(); //Leaving empty for the time being, using just to create check box in menu 

     var map = L.map('map', { 
      crs: L.CRS.Simple, 
      layers: [map1, map2, map3, markers], 
      maxZoom: 5 
     }); 

     var baseMaps = { 
      "Map 1": map1, 
      "Map 2": map2, 
      "Map 3": map3 
     }; 

     var overlayMaps = { 
      "Markers": markers 
     }; 

     var bounds = [[0,0], [1000,1000]]; 
     L.control.layers(baseMaps, overlayMaps, bounds).addTo(map); 
     map.fitBounds(bounds); 

    </script> 
    </div> 
</body>

是的，我使用本地存儲的圖像，不，我沒有圖片設置爲使用標準的URL格式，如果您選擇嘗試我的代碼只是在亞3張隨機圖片。

這裏是正在發生的PIC：

來源

2017-08-11 MicrosoftDave

你忘了一個 's' 來標記

var overlayMaps = { 
     "Markers": markers 
    };

現在應該工作;）

來源

2017-08-11 02:21:34

但不幸的是這並修復它不能正常工作的直接問題，它沒有解決我原來的問題。我添加了一張關於我的原始帖子發生了什麼的圖片（以及向標記添加了「s」）。 – MicrosoftDave

地圖渲染，而不是一個大的單一

回答

相關問題