如何使用傳單查看圖像並縮放縮放圖像

Question

我需要構建一個圖像查看器，該圖像查看器會在每個縮放級別重新加載圖像，以免加載非常大的圖像，並且還保留圖像的清晰度。 參見以下示例： https : //www.rijksmuseum.nl/nl/rijksstudio/kunstenaars/rembrandt-van-rijn/objecten#/SK-C-5,0

我做了一些研究，發現可以為此使用leaflet.js。 我最初加載1024x1024圖像，並且當我放大leaflet.js時需要加載構成整個圖像的4個新圖像。 再次放大，您將獲得相同的效果。

問題是我無法正常工作。 我有以下代碼：

 var map = L.map('image-map', { maxZoom: 20, minZoom: 20, crs: L.CRS.Simple }).setView([0, 0], 20); var southWest = map.unproject([0, 1024], map.getMaxZoom()); var northEast = map.unproject([1024, 0], map.getMaxZoom()); map.setMaxBounds(new L.LatLngBounds(southWest, northEast)); L.tileLayer('/map-tiles/map_{x}_{y}.jpg', { }).addTo(map); 

 #image-map { border: 1px solid black; height: 250px; } 

 <link href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" rel="stylesheet" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script> <div id="image-map"></div> 

但是由於某種原因，現在什么也沒有加載。 我以以下鏈接為例： http : //omarriott.com/aux/leaflet-js-non-geographical-imagery/#using-the-tiles-in-leaflet

有誰知道如何解決此問題或另一種方法來實現這一目標？

編輯：我找到了此鏈接： https : //medium.com/@jarednielsen/how-to-make-an-interactive-story-map-using-leaflet-and-non-geographical-images-821f49ff3b0d

它具有我想要的相同功能。 另外，源JS文件也非常清楚，並且非常有用。 我將自己嘗試一下，希望我能做得到。

Answer 1

我不知道為什么，但是當zoom為1或arround時，它似乎可以工作（我可以在網絡日志中看到tile查詢）。

我從這里的傳單中找到了另一篇文章： https : //leafletjs.com/examples/crs-simple/crs-simple.html

並且，有關信息，您可以使用“ zoomControl”刪除縮放控件

var map = L.map('image-map', {
    minZoom: 1,
    maxZoom: 1,
    crs: L.CRS.Simple,
    zoomControl: false
}).setView([0, 0], 1);

似乎可以正常工作 （可以在控制台中看到請求）

 var map = L.map('image-map', { minZoom: 1, maxZoom: 1, crs: L.CRS.Simple }).setView([0, 0], 1); var southWest = map.unproject([0, 1024], map.getMaxZoom()); var northEast = map.unproject([1024, 0], map.getMaxZoom()); map.setMaxBounds(new L.LatLngBounds(southWest, northEast)); L.tileLayer('/map-tiles/map_{x}_{y}.jpg', { }).addTo(map); 

 #image-map { border: 1px solid black; height: 250px; } 

 <link href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" rel="stylesheet" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script> <div id="image-map"></div> 

似乎不起作用 （在控制台中看不到請求）

 var map = L.map('image-map', { minZoom: 20, maxZoom: 20, crs: L.CRS.Simple }).setView([0, 0], 20); var southWest = map.unproject([0, 1024], map.getMaxZoom()); var northEast = map.unproject([1024, 0], map.getMaxZoom()); map.setMaxBounds(new L.LatLngBounds(southWest, northEast)); L.tileLayer('/map-tiles/map_{x}_{y}.jpg', { }).addTo(map); 

 #image-map { border: 1px solid black; height: 250px; } 

 <link href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" rel="stylesheet" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js" integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==" crossorigin=""></script> <div id="image-map"></div>