如何使用传单进行图像查看和重新加载缩放图像

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

我不知道为什么，但是当缩放为 1 或 arround 时，它似乎有效（我可以在网络日志中看到切片查询）。

我在此处的传单中找到了另一篇文章：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>