map tile compare

Kartenkachelvergleich

Eine einseitige Webanwendung zum Vergleichen eines Kachel-Layers mit einem Hintergrund-Satelliten-Layer.

Demo

map-tile-compare-demo.mp4

Live-Beispiele

• Edinburgh, Schottland
• Edinburgh, Schottland (In der Dämmerung)
• Broxburn, Schottland
• Ketelmeer, Niederlande
• Marker Wadden, Niederlande
• Koblenz, Deutschland
• Grenze Deutschland/Niederlande

Installieren der App

Führen Sie nach dem Klonen dieses Repositorys Folgendes aus:

$ cd map-tile-compare
$ npm install
$ npm run build
$ npm run serve

Dies sollte einen Localhost-Server starten, normalerweise http://localhost:5000 .

Damit die Seite geladen wird, müssen Sie eine URL an eine Konfigurationsdatei an die URL anhängen.

 http://localhost:5000/#https://example.com/path/to/config.json

Erstellen einer Kartenkonfiguration

Die Kartendaten sind eine komprimierte JSON-Zeichenfolge, die im Hash der URL gespeichert ist.

Hosten Sie die folgende JSON-Datei auf einer Website und aktualisieren Sie jede Eigenschaft nach Ihren Wünschen:

{
  "name" : " London " ,
  "beforeStyle" : " mapbox://styles/mapboxUsername/styleId " ,
  "beforeStyleAccessToken" : " xx.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.xxxxxxxxxxxxx-xxxxxxxx " ,
  "beforeStyleBeforeLayerId" : " tunnel-street-minor-low " ,
  "sourceTiles" : " https://example.com/tiles/{z}/{x}/{y}.png " ,
  "sourceTileScheme" : " tms " ,
  "sourceTileSize" : 256 ,
  "sourceMinZoom" : 9 ,
  "sourceMaxZoom" : 15 ,
  "sourceBounds" : [ -0.234 , 51.454 , -0.025 , 51.562 ],
  "referencePhotoImageUrl" : " https://example.com/previewImage.jpg "
}

In der folgenden Tabelle wird die Bedeutung der einzelnen Eigenschaften erläutert:

Eigentum	Beschreibung
name	Der Name der Karte. Dies wird auf dem Begrüßungsbildschirm angezeigt.
beforeStyle	Die Mapbox-Stil-URL für die „Vorher“-Karte, normalerweise der „Satellite“-Stil.
beforeStyleAccessToken	Das Mapbox-Zugriffstoken für den Kartenstil „Vorher“.
beforeStyleBeforeLayerId	Die Layer-ID innerhalb des „Vorher“-Kartenstils, an der Sie Ihren „Nachher“-Karten-Layer einfügen möchten. Normalerweise ist es die Ebene direkt über der Rasterebene.
sourceTiles	Die URL zu Ihren Kartenkacheln.
sourceTileScheme	Das Schema für Ihre Kartenkacheln. Entweder "xyz" oder "tms" .
sourceTileSize	Die Bildgröße Ihrer Kartenkacheln in Pixel.
sourceMinZoom	Die minimale Zoomstufe Ihrer Kartenkacheln.
sourceMaxZoom	Die maximale Zoomstufe Ihrer Kartenkacheln.
sourceBounds	Der Begrenzungsrahmen Ihrer Kartenkacheln. In der Reihenfolge: linker Längengrad, unterer Breitengrad, rechter Längengrad, oberer Breitengrad.
referencePhotoImageUrl	Die URL zum Vorschaubild, das vor dem Laden der Karte angezeigt werden soll.

Nach dem Erstellen des JSON haben Sie zwei Möglichkeiten:

• Speichern Sie den JSON auf einem externen Host.
• Speichern Sie die JSON-Datei im Verzeichnis public/ und führen Sie npm run build aus. Auf die Datei kann dann über http://localhost:5000/yourConfig.json zugegriffen werden.

Rufen Sie die JSON-URL ab und hängen Sie sie an die Host-URL der App an.

 http://locahost:5000/#http://localhost/5000/config.json

Entwicklung

$ npm run dev

Flusen

$ npm run lint

Tests

Um End-to-End-Tests auszuführen, führen Sie in einer Konsole Folgendes aus:

$ npm run build:test
$ npm run serve

build:test erstellt die App mit Sourcemaps, was eine spätere Codeabdeckung ermöglicht.

Führen Sie dann in einer anderen Konsole Folgendes aus:

$ export CYPRESS_MAP_TILE_COMPARE_HOST= ' http://localhost:5000/ '
$ npm run test:e2e

Die Codeabdeckung wird automatisch generiert und kann in coverage/ angezeigt werden.

Führen Sie Folgendes aus, um zu sehen, wie die Cypress-Tests tatsächlich in einem Browser ausgeführt werden:

$ npx cypress open