map tile compare

comparer les tuiles de la carte

Une application Web d'une seule page permettant de comparer une couche de tuiles avec une couche satellite d'arrière-plan.

Démo

map-tile-comparer-demo.mp4

Exemples en direct

• Édimbourg, Écosse
• Édimbourg, Écosse (au crépuscule)
• Broxburn, Écosse
• Ketelmeer, Pays-Bas
• Marker Wadden, Pays-Bas
• Coblence, Allemagne
• Frontière Allemagne/Pays-Bas

Installation de l'application

Après avoir cloné ce référentiel, exécutez :

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

Cela devrait démarrer un serveur localhost, généralement http://localhost:5000 .

Pour que la page se charge, vous devrez ajouter une URL à un fichier de configuration à l'URL.

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

Création d'une configuration de carte

Les données cartographiques sont une chaîne JSON compressée stockée dans le hachage de l'URL.

Hébergez le fichier JSON suivant sur un site Web et mettez à jour chaque propriété selon votre choix :

{
  "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 "
}

Le tableau ci-dessous explique la signification de chaque propriété :

Propriété	Description
name	Le nom de la carte. Ceci est affiché sur l’écran de démarrage.
beforeStyle	L'URL du style mapbox pour la carte "avant", généralement le style "Satellite".
beforeStyleAccessToken	Le jeton d'accès mapbox pour le style de carte "avant".
beforeStyleBeforeLayerId	L'identifiant de la couche dans le style de carte "avant" où vous souhaitez insérer votre couche de carte "après". Il s'agit généralement du calque situé immédiatement au-dessus du calque raster.
sourceTiles	L'URL de vos tuiles de carte.
sourceTileScheme	Le schéma de vos tuiles de carte. Soit "xyz" soit "tms" .
sourceTileSize	La taille de l'image de vos tuiles de carte en pixels.
sourceMinZoom	Le niveau de zoom minimum de vos tuiles de carte.
sourceMaxZoom	Le niveau de zoom maximum de vos tuiles de carte.
sourceBounds	Le cadre de délimitation de vos tuiles de carte. Dans l'ordre : longitude gauche, latitude inférieure, longitude droite, latitude supérieure.
referencePhotoImageUrl	L'URL de l'image d'aperçu à afficher avant de charger la carte.

Après avoir créé le JSON, vous avez deux options :

• Stockez le JSON sur un hôte externe.
• Stockez le fichier JSON dans le répertoire public/ et exécutez npm run build . Le fichier est ensuite accessible via http://localhost:5000/yourConfig.json .

Saisissez l'URL du JSON et ajoutez-la à l'URL hôte de l'application.

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

Développement

$ npm run dev

Pelucheux

$ npm run lint

Essais

Pour exécuter des tests de bout en bout, en une seule exécution sur la console :

$ npm run build:test
$ npm run serve

build:test construira l'application avec des sourcesmaps, ce qui permettra une couverture du code ultérieurement.

Ensuite, dans une autre console, exécutez :

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

La couverture du code sera générée automatiquement et pourra être consultée dans coverage/ .

Pour voir les tests Cypress réellement exécutés dans un navigateur, exécutez :

$ npx cypress open