web-dev-qa-db-fra.com

Leaflet est-il un bon outil pour les images non cartographiques?

J'écris une application web qui implique la navigation illustrations techniques (panoramique, zoom, clic). Je suppose que Cloudmade Leaflet un bon outil pour cela, uniquement parce que quelqu'un l'a utilisé pour faire du panoramique/zoomable XKCD 111 et j'aime vraiment comment cela s'est avéré.

Évidemment, je devrais carreler et mettre à l'échelle mon illustration technique d'origine, mais disons que c'est un problème trivial que j'ai résolu. En regardant Leaflet API , cependant, il semble que je devrais convertir mes illustrations techniques (fichiers .ai, .svg et .png) en une norme géographique comme GeoJSON. Cela semble être une proposition maladroite.

Quelqu'un peut-il recommander Leaflet ou tout autre outil pour naviguer dans des images non cartographiques?

javascriptleaflet
36
Jacob Marble

Vous pouvez le faire avec Leaflet. (J'ai fait exactement cela moi-même.)

Vous devez convertir vos tailles de pixels en latlong (latitude/longitude). La brochure vous offre un moyen simple de le faire en utilisant le Simple "Système de référence de coordonnées", map.project et map.unproject.

Construisez d'abord votre carte comme ceci:

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

… Puis définissez les limites de la carte (pour une image de 1024x6145):

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

Il y a plus de détails sur le fractionnement de vos images disponibles ici y compris un Ruby gem qui pourrait également être utile.

23
Soup

Cela fonctionne pour les images qui ne sont pas en mosaïque.

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);
}
21
dooderson

J'ai eu de la chance avec MapTiller - http://www.maptiler.com/

3
user3233010

J'utilise Leaflet pour les cartes avec des tuiles personnalisées avec géoinformation, mais pour autant que je puisse voir Leaflet devrait être en mesure de faire cette tâche. Il y a quelques points à considérer pour organiser vos images afin de pouvoir les afficher de manière panoramique et zoomable:

Tout d'abord, vous devez comprendre le concept derrière la navigation sur la carte et les noms de fichiers de tuiles correspondants. Ce concept est un QuadTree . Un exemple sur la façon dont cela fonctionne peut être trouvé ici .

Ensuite, vous devez couper vos illustrations techniques brutes dans différentes tuiles. Si vous commencez sur un seul niveau de zoom, cela devrait être assez simple. Vous pouvez ensuite utiliser les tuiles dans un nouveau Leaflet TileLayer . Lorsque vous souhaitez effectuer un zoom, cela peut devenir un peu plus difficile. Vous devrez trouver les limites correctes pour vos tuiles et construire les noms de fichiers corrects (voir les références QuadTree ci-dessus).

Pour résumer: Dépliant ne devrait pas être un problème dans votre tâche. La tâche principale pour vous est de créer des tuiles appropriées et correctes à partir de vos données brutes.

3
j0nes

Si vous voulez une option sans tuile, vous pouvez faire tout le côté client sans prédécoupe de tuile

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

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

Très simple.

1
Murtnowski

Le plus gros problème dans l'utilisation de Leaflet est de savoir comment les tuiles doivent être générées, commandées, puis passer correctement les appels pour que tout apparaisse comme prévu. Après quelques jours à essayer désespérément solution après solution, ce fut le seul qui a fonctionné pour moi, grâce à un tutoriel réalisé par Pedro Sousa:

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

Essentiellement, cela utilise GDAL2Tiles pour correctement diviser les tuiles de manière prévisible. C'est le genre d'outil qui est facilement disponible sur la plupart des distributions Linux (et il fonctionnerait également très bien sous Mac OS X, en utilisant des ports ou quelque chose de similaire). Il n'y a aucun filigrane, limitation de taille, etc. avec cet outil. Placez les tuiles sur les répertoires de votre serveur comme l'explique Pedro Sousa dans son article.

Leaflet chargera ensuite une "carte" en utilisant vos tuiles avec de "fausses" coordonnées géographiques, en utilisant la taille du fichier raster pour calculer correctement la "fausse" longitude/latitude. Après cela, vous pouvez à peu près faire ce que vous voulez, comme n'importe quel autre serveur de tuiles de carte. Dans mon cas, je n'avais besoin que de déposer quelques marqueurs, donc je me fichais du système de coordonnées sur lequel je travaillais - la fonction ci-dessous était utile pour extraire les `` fausses '' coordonnées géographiques afin de savoir où placer les marqueurs :

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

J'ai réussi à remplacer avec succès un ancien navigateur de carte basé sur Flash à l'aide de Leaflet et à répliquer pratiquement toutes les fonctionnalités de Flash (même en utilisant les mêmes marqueurs et tout!). Avec, bien sûr, l'avantage que Leaflet fonctionnera sur les appareils iOS ???? - et grâce au carrelage, la solution utilisant Leaflet fonctionne beaucoup, beaucoup plus rapidement que l'ancienne approche basée sur Flash ...

Une alternative pourrait être OpenLayers , qui peut également gérer des images raster, sans mosaïque - assez bien si vous avez une image relativement petite.

BTW, voici une comparaison de différents cadres - cependant, tous ne traiteront pas d'images statiques: https://www.toptal.com/web/the-roadmap-to-roadmaps-a-survey-of- les meilleurs outils de cartographie en ligne

1
Gwyneth Llewelyn