Transformamos o script criado anteriormente em uma API para visualizar um mapa interativo no site OverpassTurbo.eu por meio do aplicativo de navegação do smartphone.
Conteúdo:
1 - Introdução. Mapas de varredura padrão
2 - Continuação. Escrevendo um rasterizador simples para mapas vetoriais
3 - Um caso especial. Conectamos o cartão OverpassTurbo
O que é o OverpassTurbo?
Então Existe um banco de dados de mapas como o OpenStreetMaps. Ele contém tudo: os mares, os contornos dos continentes, montanhas, florestas, estradas, edifícios, playgrounds e até lombas. Cada objeto tem um nome, coordenadas e propriedades. Por exemplo, a estrada possui o material de revestimento, o prédio possui o número de pisos e assim por diante.
Então aqui. A maioria dos cartões apresentados hoje na Internet é gerada com base nesse banco de dados específico. Mas e se todos esses cartões prontos não forem adequados para nós? Você pode fazer o seu próprio! Bem, ou pelo menos complementar o existente, o que é muito mais fácil.
Isto é o que OverpassTurbo.eu está fazendo. É um IDE online. Usando-o, você pode consultar o banco de dados OSM. Clicamos no botão Iniciar , a solicitação vai para o banco de dados e, após algum tempo, os dados retornam para nós. O OverpassTurbo visualiza esses dados na forma de marcadores de vetor e linhas localizadas na parte superior da camada de plano de fundo - um mapa do OpenSteerMap.org .
Como um exemplo do que você pode fazer com o OverpassTurbo, quero mostrar o script que eu mais gosto. Foi escrito por um usuário sob o apelido Erelen. Então: esse script desenha no mapa várias fontes de água potável e seu nome. Na minha opinião, é muito útil e muito claro. Para ver como esse script funciona, basta seguir o link e clicar em Iniciar . (Se o site apresentar um erro, acesse a VPN e tente novamente)
https://overpass-turbo.eu/s/z95
Ou aqui está um script que eu já fiz para minhas próprias necessidades. Com ele, você pode facilmente encontrar boas rotas de corrida em parques desconhecidos. Para fazer isso, o script destaca caminhos de cascalho bem iluminados: é o mais conveniente percorrer esses caminhos, para o meu gosto. O asfalto está marcado em branco. Caminhos de terra comuns em preto. Mas todos os caminhos com a etiqueta “difícil de alcançar” ou “baixa qualidade de revestimento” serão marcados com uma linha tracejada discreta: para tropeçar com menos frequência, tento evitá-los. Em geral, o mapa é feito para que você possa simplesmente obter instruções nas linhas mais impressionantes. E para que, no final, essa rota seja bem-sucedida.
http://overpass-turbo.eu/s/KXU
De fato, com esta ferramenta você pode complementar o mapa com os dados que desejar. E notei que isso é muito, muito emocionante. Mas este artigo não é sobre isso. Se você estiver interessado neste tópico, poderá se familiarizar com os conceitos básicos do Overpass aqui .
Mas antes de passar para o código, vamos primeiro dar uma olhada no resultado final que devemos obter.
Instruções para usuários: como usar nossa API
Então Suponha que você já tenha um script pronto para o OverpassTurbo, cujos resultados você deseja ver no seu smartphone. E não no navegador, mas no navegador. Para fazer isso, traga seu script para o seguinte formato.
[bbox:{{bbox}}]; ( // node[amenity=waste_basket]; ); out;>;out skel qt;
Em particular, estamos interessados na primeira linha: nosso aplicativo a substituirá.
Depois disso, clique no botão Compartilhar . Certifique-se de desmarcar a caixa Ativar estado do mapa exibido .
Depois disso, copie o link. Por exemplo, supomos que seu link copiado tenha esta aparência:
http://overpass-turbo.eu/s/KEy
Agora veja nossa API
https://anygis.herokuapp.com/mapshoter/overpass/{x}/{y}/{z}/{crossZoom}?script={script}
Com {x}, {y} e {z}, tudo parece estar claro: essas são as coordenadas do bloco desejado.
No lugar de {script}, você precisa substituir o ID do seu script. No nosso exemplo, s / Key .
Mas o que é {crossZoom} ? Suponha que você tenha 15. Então, se você solicitar um bloco com um zoom menor que 15, o servidor não fará uma solicitação lenta ao OverpassTurbo, mas simplesmente o redirecionará para o mapa com uma camada de plano de fundo vazia do OpenStreetMaps (que será carregada quase instantaneamente). Essa abordagem é necessária para que, se necessário, você possa mover o mapa, rolar rapidamente para o local de interesse, aumentar o zoom e aguardar. Aguarde até OverpassTurbo gerar um mapa com os resultados.
Espero que o princípio básico seja claro. Agora veja o URL completo para a nossa solicitação. Acho que agora não será difícil usar nossa API: basta substituir s / KEy pelo ID do seu script.
https://anygis.herokuapp.com/mapshoter/overpass/{x}/{y}/{z}/15?script=s/KEy
E, enquanto isso, veremos como implementar esse aplicativo.
Cenário 3 - Pesquise usando o URL e o cache do navegador
Então Vamos começar com o arquivo router.js . Vamos fazer com que nosso método aceite parâmetros crossZoom e script . E então nós os passamos para o trabalhador. Também adicionamos uma opção que interrompe o script e redireciona o usuário para outro site se o zoom solicitado for muito baixo.
const express = require( 'express' ) const PORT = process.env.PORT || 5000 const app = express() app.listen( PORT, () => { console.log( ' ', PORT ) }) const { StaticPool } = require( 'node-worker-threads-pool' ) const worker = "./worker.js" const workersPool = new StaticPool({ size: 3, task: worker, workerData: "no" })
O arquivo worker.js não mudou muito. Apenas encaminhe as novas variáveis ainda mais.
const { parentPort, workerData } = require( 'worker_threads' ); const puppeteer = require( 'puppeteer' ) const mapshoter = require( './mapshoter' ) var browser = "empty" parentPort.on( "message", ( params ) => { doMyAsyncCode( params ) .then( ( result ) => { parentPort.postMessage( result ) }) }) async function doMyAsyncCode( params ) { await prepareEnviroment()
Agora vamos dar uma olhada no mapshoter.js . Primeiro, veja o código:
const puppeteer = require( 'puppeteer' ) const geoTools = require( './geoTools' ) async function makeTile( x, y, z, scriptName, browserLink ) {
Para começar, neste script, por uma questão de variedade, trabalharemos com seletores de elementos comuns (que não são XPath ). Como encontrá-los foi descrito em um artigo anterior .
Em seguida, obtemos as coordenadas. Somente desta vez, além das coordenadas centrais, também são necessárias as coordenadas das bordas do bloco ( bBox ).
Em seguida, inicie o navegador. Tudo é típico aqui. Mas antes de passar para carregar a página, deixe o script aguardar um período aleatório de 0 a 500 ms. Para que não recebamos muitas solicitações idênticas ao mesmo tempo e não sejam banidos.
Depois disso, vamos ao site na URL à qual as coordenadas do centro do bloco são adicionadas. Como resultado, o local desejado está no centro do mapa.
Depois disso, vá para outro URL. Desta vez com o ID do nosso script. Como resultado, nosso script aparecerá no texto do editor de código.
(Observe que, se no menu Compartilhar ao copiar o URL do nosso script, não desmarcarmos a caixa de seleção Salvar estado do mapa, o mapa mudará. E não precisamos disso.
E agora vou responder razoavelmente à pergunta: por que vamos ao URL duas vezes, ou seja, gastamos duas vezes no carregamento deste site? Eu respondo. Porque, em primeiro lugar, não consegui encontrar como combinar o carregamento de scripts e a transição para as coordenadas especificadas em uma solicitação de URL. Segundo, porque, por alguma razão, o Puppeteer imprime o texto com extrema lentidão e trabalha com os elementos de interface deste site. Um minuto e meio pode ser impresso! Assim, a ideia de inserir as coordenadas no campo de pesquisa e, em seguida, clicar nos botões de zoom, como fizemos no artigo anterior, foi decidido recusar. Como resultado, clicar duas vezes no link resultou muito mais rápido do que fazer tudo isso. Talvez isso seja um bug e seja corrigido mais cedo ou mais tarde, mas por enquanto estamos trabalhando com o que é.
Infelizmente, você não poderá deixar completamente a entrada de texto. Teremos que substituir a primeira linha na janela do editor de código. No momento, ela relata que é necessário baixar informações do banco de dados para todo o território que está atualmente na tela.
[bbox:{{bbox}}];
Vamos substituí-lo pelas coordenadas das bordas do bloco. Isso é para não perder muito tempo baixando do banco de dados. Portanto, o script imprime na primeira linha algo como este texto:
[bbox:55.6279, 37.5622, 55.6341, 37.5732];
E para não precisar apagar a linha original (muitas vezes pressionando Excluir para isso), basta comentar. Assim, reduziremos o máximo possível o tempo gasto na inserção de texto e o tempo de carregamento do banco de dados. Como resultado, a primeira linha ficará assim:
[bbox:55.6279, 37.5622, 55.6341, 37.5732];
Depois disso, nosso script precisa clicar no botão Iniciar , esperar um pouco, tirar uma captura de tela do mapa e enviá-la ao usuário. E tudo: a tarefa está concluída!
Se você quiser ver um exemplo do script resultante, poderá clicar neste link .
Conclusão
Bem, como não é difícil supor, esta versão do script funcionará ainda mais lentamente que as anteriores. Afinal, agora o site gasta tempo com uma solicitação de um banco de dados de terceiros. E, por si só, não funciona muito rápido. No entanto, esse método torna extremamente fácil (embora lento) obter um cartão exclusivo e personalizado. Além disso, com base nos dados mais recentes. E isso, às vezes, pode ser muito útil. Portanto, vale a pena ter esse método em mente.
E isso é tudo. Só para lembrar, no meu site AnyGIS , há um arquivo de predefinições prontas para os navegadores Locus, OsmAnd e GuruMaps. Existem mapas rasterizados e mapas vetoriais "rasterizados", para visualização em que o aplicativo descrito nestes artigos é usado. Venha e use.