Czy ulotka jest dobrym narzędziem dla obrazów innych niż mapy?

Question

Piszę aplikację internetową, która obejmuje nawigację technical illustrations (przesuwanie, powiększanie, klikanie). Zakładam, że to dobre narzędzie do tego, tylko dlatego, że someone used it to make XKCD 1110 pan/zoomable i bardzo podoba mi się, jak się okazało.

Oczywiście musiałbym ułożyć i skalować moją oryginalną ilustrację techniczną, ale załóżmy, że jest to problem, który rozwiązałem. Patrząc jednak na wersję Leaflet API, wydaje mi się, że musiałbym zamienić moje ilustracje techniczne (pliki .ai, .svg i .png) na standard geograficzny, taki jak GeoJSON. To wydaje się niezręczną propozycją.

Czy ktoś może polecać ulotkę lub inne narzędzie do nawigacji po obrazach innych niż mapy?

Answer 1

Możesz to zrobić z ulotką. (Sam to zrobiłem).

Konieczne jest przekonwertowanie rozmiarów pikseli na długość geograficzną (długość/szerokość geograficzna). Ulotka zapewnia łatwy sposób, aby to zrobić przy użyciu Simple "Systemu odniesienia współrzędnych", map.project i map.unproject.

pierwsze, zbudować swoją mapę tak:

var map = L.map('map', { 
    maxZoom: 20, 
    minZoom: 20, 
    crs: L.CRS.Simple 
}).setView([0, 0], 20); 

... a następnie ustawić granice map (dla obrazu, który jest 1024x6145):

var southWest = map.unproject([0, 6145], map.getMaxZoom()); 
var northEast = map.unproject([1024, 0], map.getMaxZoom()); 
map.setMaxBounds(new L.LatLngBounds(southWest, northEast)); 

Jest more details regarding splitting your images available here tym ruby ​​gem, które może również być przydatne.

Answer 2

Używam Ulotki do map z niestandardowymi kaflami z geoinformacją, ale z tego, co widzę, Ulotka powinna być w stanie wykonać to zadanie. Istnieje kilka punktów, które należy wziąć pod uwagę, aby uporządkować swoje obrazy, aby można było wyświetlać je w sposób umożliwiający panoramowanie i powiększanie:

Przede wszystkim należy zrozumieć koncepcję nawigowania po mapach i odpowiadających im nazw plików płytek. Ta koncepcja to QuadTree. Przykład tego, jak to działa, można znaleźć pod adresem here.

Następnie należy wyciąć surowe ilustracje techniczne w różnych kaflach. Jeśli zaczniesz tylko na jednym poziomie powiększenia, powinno to być całkiem proste. Następnie możesz użyć płytek w nowym Leaflet TileLayer. Kiedy chcesz powiększyć, może to być trochę trudniejsze. Będziesz musiał znaleźć właściwe granice dla swoich płytek i skonstruować poprawne nazwy plików (patrz powyższe odniesienia do QuadTree).

Podsumowując: Ulotka nie powinna stanowić problemu w Twoim zadaniu. Głównym zadaniem dla ciebie jest stworzenie odpowiednich i poprawnych kafli z twoich nieprzetworzonych danych.

Answer 3

Działa to dla obrazów, które nie są wyłożone płytkami.

function init() { 
    var map = L.map('map', { 
     maxZoom: 24, 
     minZoom: 1, 
     crs: L.CRS.Simple 
    }).setView([0, 0], 1); 

    map.setMaxBounds(new L.LatLngBounds([0,500], [500,0])); 

    var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg' 
    var imageBounds = [[250,0], [0,250]]; 

    L.imageOverlay(imageUrl, imageBounds).addTo(map); 
} 

Answer 4

miałem szczęście z MapTiller - http://www.maptiler.com/

Answer 5

Jeśli chcesz opcję non-dachówka, można zrobić całą rzecz stronie klienta bez płytki wstępnie cięcia

Zobacz https://github.com/Murtnowski/GMap-JSlicer

slicer = new JSlicer(document.getElementById('map'), 'myImage.png'); 
slicer.init(); 

Bardzo proste.

Answer 6

Największym problemem związanym z użyciem Ulotki jest ustalenie, w jaki sposób płytki muszą być generowane, zamawiane, a następnie prawidłowo wykonywać połączenia, aby wszystko wyglądało zgodnie z oczekiwaniami. Po kilku dniach beznadziejnie wypróbowanie rozwiązanie po rozwiązaniu był jedynym, który pracował dla mnie, dzięki tutorial wykonanej przez Pedro Sousa:

https://build-failed.blogspot.pt/2012/11/zoomable-image-with-leaflet.html

W istocie, to używa GDAL2Tiles do prawidłowo podzielonego płytki w przewidywalny sposób. Jest to narzędzie, które jest łatwo dostępne w większości dystrybucji Linuksa (i podobno działa dobrze również w systemie Mac OS X, używając portów lub podobnych rzeczy). W tym narzędziu nie ma znaków wodnych, ograniczeń co do wielkości itp. Umieść kafelki na katalogach twojego serwera, tak jak wyjaśnia Pedro Sousa w swoim artykule.

Ulotka następnie załaduje "mapę" używając płytek z "fałszywymi" współrzędnymi geograficznymi, używając rozmiaru pliku rastrowego do prawidłowego obliczenia "fałszywej" długości/szerokości geograficznej. Po tym możesz zrobić z nim cokolwiek chcesz, tak jak każdy inny serwer kaflowy. W moim przypadku wystarczy tylko usunąć kilka znaczników, więc nie przejmowałem się systemem współrzędnych, nad którym pracowałem - poniższa funkcja była przydatna do wyodrębnienia "fałszywych" współrzędnych geograficznych, aby wiedzieć, gdzie umieścić znaczniki :

var popup = L.popup(); 
function onMapClick(e) { 
    popup 
     .setLatLng(e.latlng) 
     .setContent("You clicked the map at " + e.latlng.toString() + "\nZoom level is " + map.getZoom()) 
     .openOn(map); 
} 
map.on('click', onMapClick); 

i udało się z powodzeniem zastąpić starą Flash oparte na mapę za pomocą nawigatora dla pacjenta i zasadniczo replikować prawie każdy funkcjonalność Flash (nawet przy użyciu tych samych markerów i wszystko!). Z oczywiście przewagą, jaką Ulotka będzie działać na urządzeniach z systemem iOS - a dzięki układaniu płytek rozwiązanie wykorzystujące Ulotkę działa znacznie, znacznie szybciej niż stare podejście oparte na technologii Flash ...

Alternatywą może być OpenLayers, która może również obsługiwać obrazy rastrowe, bez kafelków - wystarczająco dobre, jeśli masz stosunkowo mały obraz.

BTW, tutaj jest porównanie różnych ram - nie wszyscy sobie z obrazami statycznymi, choć: https://www.toptal.com/web/the-roadmap-to-roadmaps-a-survey-of-the-best-online-mapping-tools