map tile compare

comparação de blocos de mapas

Um aplicativo da web de página única para comparar uma camada de bloco com uma camada de satélite de fundo.

Demonstração

map-tile-compare-demo.mp4

Exemplos ao vivo

• Edimburgo, Escócia
• Edimburgo, Escócia (ao anoitecer)
• Broxburn, Escócia
• Ketelmeer, Holanda
• Marker Wadden, Holanda
• Coblença, Alemanha
• Fronteira Alemanha/Holanda

Instalando o aplicativo

Após clonar este repositório, execute:

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

Isso deve iniciar um servidor localhost, geralmente http://localhost:5000 .

Para que a página carregue, você precisará anexar um URL a um arquivo de configuração ao URL.

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

Criando uma configuração de mapa

Os dados do mapa são uma string JSON compactada armazenada no hash do URL.

Hospede o seguinte arquivo JSON em um site e atualize cada propriedade de acordo com sua escolha:

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

A tabela abaixo explica o significado de cada propriedade:

Propriedade	Descrição
name	O nome do mapa. Isso é exibido na tela inicial.
beforeStyle	O URL do estilo mapbox para o mapa "antes", normalmente o estilo "Satélite".
beforeStyleAccessToken	O token de acesso do mapbox para o estilo de mapa "antes".
beforeStyleBeforeLayerId	O ID da camada dentro do estilo de mapa "antes" onde você deseja inserir sua camada de mapa "depois". Geralmente é a camada imediatamente acima da camada raster.
sourceTiles	O URL dos blocos do seu mapa.
sourceTileScheme	O esquema para seus blocos de mapa. Ou "xyz" ou "tms" .
sourceTileSize	O tamanho da imagem dos blocos do seu mapa em pixels.
sourceMinZoom	O nível mínimo de zoom dos blocos do seu mapa.
sourceMaxZoom	O nível máximo de zoom dos blocos do seu mapa.
sourceBounds	A caixa delimitadora dos blocos do seu mapa. Na ordem de: longitude esquerda, latitude inferior, longitude direita, latitude superior.
referencePhotoImageUrl	O URL da imagem de visualização a ser exibida antes de carregar o mapa.

Depois de criar o JSON, você tem duas opções:

• Armazene o JSON em um host externo.
• Armazene o arquivo JSON no diretório public/ e execute npm run build . O arquivo pode então ser acessado via http://localhost:5000/yourConfig.json .

Pegue o URL do JSON e anexe-o ao URL do host do aplicativo.

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

Desenvolvimento

$ npm run dev

Linting

$ npm run lint

Testes

Para executar testes de ponta a ponta, em uma execução de console:

$ npm run build:test
$ npm run serve

build:test criará o aplicativo com mapas de origem, o que permitirá a cobertura do código posteriormente.

Então, em um console diferente, execute:

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

A cobertura do código será gerada automaticamente e pode ser visualizada em coverage/ .

Para ver os testes do cypress realmente sendo executados em um navegador, execute:

$ npx cypress open