Как использовать листовку для просмотра изображений и перезагрузки изображений при увеличении

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 или окружает.

Я нашел другую статью из листовки здесь: 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>