map tile compare

mapa-mosaico-comparar

Una aplicación web de una sola página para comparar una capa de mosaicos con una capa satelital de fondo.

Manifestación

mapa-mosaico-comparar-demo.mp4

Ejemplos en vivo

• Edimburgo, Escocia
• Edimburgo, Escocia (Al crepúsculo)
• Broxburn, Escocia
• Ketelmeer, Países Bajos
• Marcador Wadden, Países Bajos
• Coblenza, Alemania
• Frontera entre Alemania y Holanda

Instalando la aplicación

Después de clonar este repositorio, ejecute:

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

Esto debería iniciar un servidor localhost, generalmente http://localhost:5000 .

Para que se cargue la página, deberá agregar una URL a un archivo de configuración a la URL.

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

Creando una configuración de mapa

Los datos del mapa son una cadena JSON comprimida almacenada en el hash de la URL.

Aloje el siguiente archivo JSON en un sitio web y actualice cada propiedad según su elección:

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

La siguiente tabla explica el significado de cada propiedad:

Propiedad	Descripción
name	El nombre del mapa. Esto se muestra en la pantalla de inicio.
beforeStyle	La URL del estilo del cuadro de mapa para el mapa "antes", normalmente el estilo "Satélite".
beforeStyleAccessToken	El token de acceso a Mapbox para el estilo de mapa "antes".
beforeStyleBeforeLayerId	La identificación de la capa dentro del estilo de mapa "antes" donde desea insertar la capa de mapa "después". Generalmente es la capa inmediatamente encima de la capa ráster.
sourceTiles	La URL de los mosaicos de tu mapa.
sourceTileScheme	El esquema de los mosaicos de tu mapa. Ya sea "xyz" o "tms" .
sourceTileSize	El tamaño de la imagen de los mosaicos de su mapa en píxeles.
sourceMinZoom	El nivel mínimo de zoom de los mosaicos de tu mapa.
sourceMaxZoom	El nivel máximo de zoom de los mosaicos de tu mapa.
sourceBounds	El cuadro delimitador de los mosaicos de tu mapa. En el orden de: longitud izquierda, latitud inferior, longitud derecha, latitud superior.
referencePhotoImageUrl	La URL de la imagen de vista previa que se mostrará antes de cargar el mapa.

Después de crear el JSON, tienes dos opciones:

• Almacene el JSON en un host externo.
• Almacene el archivo JSON en el directorio public/ y ejecute npm run build . Luego se puede acceder al archivo a través de http://localhost:5000/yourConfig.json .

Tome la URL del JSON y agréguela a la URL del host de la aplicación.

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

Desarrollo

$ npm run dev

pelusa

$ npm run lint

Pruebas

Para ejecutar pruebas de un extremo a otro, en una consola ejecute:

$ npm run build:test
$ npm run serve

build:test construirá la aplicación con mapas fuente, lo que permitirá la cobertura del código más adelante.

Luego, en una consola diferente, ejecuta:

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

La cobertura del código se generará automáticamente y se puede ver en coverage/ .

Para ver las pruebas de cypress ejecutándose en un navegador, ejecute:

$ npx cypress open