L'opuscolo è un buon strumento per le immagini non cartografiche?

Question

Sto scrivendo un'app Web che prevede la navigazione su technical illustrations (panoramica, zoom, clic). Presumo che lo Cloudmade Leaflet sia un buon strumento per questo, solo perché someone used it to make XKCD 1110 pan/zoomable e mi piace molto come sia venuto fuori.

Ovviamente, avrei bisogno di affiancare e ridimensionare la mia illustrazione tecnica originale, ma diciamo che è un problema banale che ho risolto. Guardando allo Leaflet API, tuttavia, sembra che dovrei convertire le mie illustrazioni tecniche (file .ai, .svg e .png) in uno standard geografico come GeoJSON. Sembra una proposta imbarazzante.

Qualcuno può raccomandare Leaflet o qualsiasi altro strumento per la navigazione di immagini non cartografiche?

Answer 1

È possibile farlo con Leaflet. (Ho fatto esattamente questo io.)

Devi convertire le dimensioni dei pixel in latlong (latitudine/longitudine). Il volantino ti offre un modo semplice per farlo utilizzando il "Sistema di riferimento coordinate" Simple, map.project e map.unproject.

In primo luogo, costruire la vostra mappa come questa:

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

... e quindi impostare la cartina limiti (per un'immagine che è 1024x6145):

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

C'è more details regarding splitting your images available here tra cui una gemma rubino che potrebbe anche essere utile.

Answer 2

Sto utilizzando un opuscolo per le mappe con riquadri personalizzati con geoinformazione, ma per quanto posso vedere, Leaflet dovrebbe essere in grado di svolgere questa attività. Ci sono alcuni punti da considerare su come organizzare le immagini per poterle visualizzare in un modo pannable e zoomable:

Prima di tutto, devi capire il concetto alla base della navigazione della mappa e il corrispondente nome di file di tile. Questo concetto è un QuadTree. Un esempio su come funziona può essere trovato here.

Quindi devi tagliare le tue illustrazioni tecniche in diverse tessere. Se si avvia solo su un livello di zoom, questo dovrebbe essere abbastanza semplice. È quindi possibile utilizzare le tessere in un nuovo Leaflet TileLayer. Quando si desidera avere lo zoom, potrebbe essere un po 'più difficile. Dovrai scoprire i limiti corretti per le tue tessere e costruire i nomi file corretti (vedi i riferimenti QuadTree sopra).

Per riassumere: il volantino non dovrebbe essere un problema nel vostro compito. Il compito principale per te è creare tessere adeguate e corrette dai tuoi dati grezzi.

Answer 3

Questo funziona per le immagini che non sono affiancate.

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

ho avuto fortuna con MapTiller - http://www.maptiler.com/

Answer 5

Se si desidera una soluzione non-tile, è possibile fare l'intero lato client cosa senza piastrelle pre-taglio

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

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

Molto semplice.

Answer 6

Il problema più grande nell'utilizzo di Leaflet è capire come le piastrelle devono essere generate, ordinate e quindi effettuare correttamente le chiamate in modo che tutto appaia come previsto. Dopo alcuni giorni senza speranza di provare soluzione dopo soluzione, questo è stato l'unico che ha funzionato per me, grazie ad un tutorial fatto da Pedro Sousa:

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

In sostanza, si usa GDAL2Tiles a correttamente spaccatura tessere in modo prevedibile. Questo è il tipo di strumento che è facilmente disponibile sulla maggior parte delle distribuzioni Linux (e presumibilmente funziona bene anche con Mac OS X, usando porte o cose simili). Non ci sono filigrane, limitazioni sulle dimensioni, ecc. Con questo strumento. Posiziona le tessere sulle directory del tuo server proprio come spiega Pedro Sousa nel suo articolo.

Il volantino carica quindi una "mappa" utilizzando le tessere con coordinate geografiche "false", utilizzando le dimensioni del file raster per calcolare correttamente la longitudine/latitudine "falsa". Dopodiché, puoi praticamente fare ciò che desideri, proprio come qualsiasi altro server di mappe. Nel mio caso, avevo solo bisogno di rilasciare alcuni marker, quindi non mi importava di meno in quale sistema di coordinate stavo lavorando - la funzione sotto era utile per estrarre le coordinate geografiche 'false' per sapere dove posizionare i marker :

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); 

sono riuscito a sostituire con successo un vecchio basato su Flash mappa navigatore utilizzando Depliant e fondamentalmente replicare quasi ogni funzionalità Flash (anche utilizzando gli stessi marcatori e tutti!). Con, ovviamente, il vantaggio che Leaflet funzionerà su dispositivi iOS e grazie alla piastrellatura, la soluzione che utilizza Leaflet funziona molto, molto più velocemente del vecchio approccio basato su Flash ...

Un'alternativa potrebbe essere OpenLayers, che potrebbe essere può anche gestire immagini raster, senza affiancamento - abbastanza buono se si dispone di un'immagine relativamente piccola.

BTW, ecco un confronto tra diversi quadri - non tutti si occuperà di immagini statiche, però: https://www.toptal.com/web/the-roadmap-to-roadmaps-a-survey-of-the-best-online-mapping-tools