Ich suche nach einer benutzerdefinierten Kartenbibliothek, aber nicht, um ein tatsächliches geografisches Gebiet anzuzeigen, sondern um einen benutzerdefinierten Grundriss anzuzeigen. Ich habe eine Weile gesucht, aber die meisten Lösungen, die ich gefunden habe, sind für geografische Gebiete.
Ich möchte einige Zoomstufen (wahrscheinlich 3 Stufen) anpassen und suche idealerweise eine JavaScript-, HTML5- (Canvas, SVG) Lösung.
Hat jemand irgendwelche Vorschläge?
Antworten:
Ich habe meine eigene Karten-App mit meinen eigenen Bildkarten erstellt. Unsere Universität ist auf einen neuen Campus umgezogen und ich kartiere 7 Stockwerke (Innen) mit 5 Zoomstufen aus handgezeichneten Karten.
Leaflet kann mit benutzerdefinierten Kartenkacheln arbeiten! Ich habe diese Anleitung befolgt (omarriott.com/aux/leaflet-js-non-geographical-imagery), nur dass ich einige Versuche mit den Zoomstufen-Nummern durchgeführt habe, um sicherzustellen, dass die Karte angezeigt wird (genau nach der Anleitung nicht) arbeite für mich).
Es gibt ein Plugin namens Leaflet Indoor, aber es basiert auf GeoJson, das ich nicht hatte. Ich habe nur benutzerdefinierte Bildkoordinaten und meinen eigenen benutzerdefinierten Json. Wie auch immer, die Broschüre ist in der Lage, Bildkoordinaten mit den Methoden unprojekt und project in lat lng (und umgekehrt) umzuwandeln.
Um verschiedene Stockwerke zu erstellen, habe ich stattdessen das Ebenensteuerelement verwendet. Natürlich dauert es eine Weile, um die API herauszufinden und sicherzustellen, dass alles so funktioniert, wie es sollte. Zum Beispiel habe ich meine Markierungen für jede Etage gruppiert und eine Möglichkeit codiert, sie über verschiedene Zoomstufen hinweg gut zu rendern. Zum Laden eines anderen Bodens muss ein Handler auch die Markierungen korrekt laden.
Ich weiß, dass Leaflet eine Menge Beispiele enthält, die sich auf geografische Karten stützen, und Menschen wie uns möglicherweise im Dunkeln lässt, aber ich möchte Ihnen versichern, dass dies für benutzerdefinierte Karten möglich ist. Sie benötigen das Bild, kacheln es korrekt (mit korrekten Namen), laden es auf ein CDN wie Amazon und verwenden dann die Leaflet-API.
quelle
Wenn Sie Ihren Anwendungsfall nicht kennen, sollten Sie sich die D3.js-Bibliothek (Data Driven Documents) zur Datenvisualisierung ansehen . Ich weiß zwar nicht, ob es "Zoomstufen" per se unterstützt, aber es unterstützt zoombare Karten .
Schauen Sie sich hier die vielen Beispiele an: https://github.com/mbostock/d3/wiki/Gallery
quelle
Behandeln Sie den Grundriss als geografisches Gebiet. OpenLayers oder Leaflet kümmern sich nicht darum, ob das angezeigte Material drinnen oder draußen ist - solange Sie ein Koordinatensystem definieren können, ist es in Ordnung.
quelle