Conectamos mapas on-line ao navegador no smartphone. Parte 1 - mapas rasterizados padrão

Como são os cartões on-line? Como descobrir o endereço do servidor do cartão em que você está interessado? Como criar um arquivo de configurações que permita que o navegador do smartphone se conecte a este mapa?


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


Entrada


Entre os aplicativos de navegação para smartphones, existem aqueles projetados para o turismo e todos os tipos de atividades suburbanas. Entre os mais famosos deles estão OsmAnd, Locus e GuruMaps. Todos eles se distinguem por um grande número de funções especializadas que podem ser úteis ao longo do caminho. E também um número ainda maior de todos os tipos de configurações (às vezes muito confusas). Mas agora estamos mais interessados ​​em uma coisa: a capacidade de adicionar cartões adicionais e alternar rapidamente entre eles.


Noto que esse é um recurso extremamente útil. Afinal, uma e a mesma área do terreno podem ser desenhadas de maneira muito diferente em mapas de diferentes tipos . E, portanto, antes de superar áreas difíceis, é útil poder verificar com cada uma delas. No entanto, se para isso fosse necessário executar vários aplicativos separados em um smartphone, isso seria extremamente inconveniente. O desempenho piora e a bateria é consumida mais rapidamente. Portanto, é muito bom que haja a oportunidade de conviver com apenas um aplicativo: uma espécie de agregador cartográfico com uma interface conveniente projetada especificamente para alternar rapidamente entre placas.


Então aqui. Como regra, adicionar novos cartões é relativamente simples. A pasta do aplicativo possui uma subpasta com predefinições . Ou seja, com os arquivos salvos, nos quais as configurações para o download de um cartão específico são indicadas. Vamos ver o que são.


Observo que, para todos os aplicativos, as predefinições são mais ou menos semelhantes. Portanto, como exemplo, consideraremos o GuruMaps, porque é para Android e iOS. Então, vamos imaginar que entramos na pasta com suas predefinições, encontramos um arquivo chamado openstreetmaps.ms e o abrimos usando um editor de texto comum.


<?xml version="1.0" encoding="UTF-8"?> <customMapSource> <name>OpenStreetMaps</name> <minZoom>0</minZoom> <maxZoom>18</maxZoom> <url>http://{$serverpart}.tile.openstreetmap.org/{$z}/{$x}/{$y}.png</url> <serverParts>ab c</serverParts> </customMapSource> 

De fato, apenas temos uma lista de vários valores. Vamos considerá-los em ordem:


nome - O nome do mapa que será exibido no aplicativo
minZoom - De qual nível de zoom esse mapa será exibido
maxZoom - Até que nível de zoom esse mapa será exibido
url - modelo para acessar arquivos de mapa
serverParts - Se o servidor no qual os arquivos do mapa estão armazenados tiver vários espelhos, será necessário listar seus nomes


Antes de prosseguir, observo que, para armazenamento em servidores, cartões grandes são divididos em pedaços pequenos. Geralmente, são imagens png com um tamanho de 256x256 pixels. Esses fragmentos são chamados de ladrilhos .



Agora, vamos dar uma olhada no modelo de URL.


http://{$serverpart}.tile.openstreetmap.org /{$z}/{$x}/{$y}.png


O navegador substitui automaticamente as palavras entre chaves pelas “coordenadas” do fragmento de mapa atualmente necessário. Aqui está o que exatamente será substituído pelos stubs:


{$ serverpart} - um dos valores de serverParts será substituído aqui.
{$ z} - o nível de zoom para o qual você deseja baixar um fragmento de mapa
{$ x} - o número horizontal do fragmento do mapa
{$ y} - o número do fragmento do mapa verticalmente


Após a substituição dos valores, o navegador receberá um link, que fará o download do arquivo com o fragmento de mapa necessário. Por exemplo, isto:


http://a.tile.openstreetmap.org /12/2478/1265.png


Quando o download estiver concluído, o bloco baixado será exibido na tela do smartphone.


Adicione seu cartão


Então, digamos que você encontrou na Internet um cartão que lhe interessava e que realmente gostaria de se conectar ao seu smartphone. Vamos tentar. Primeiro, usando um navegador no seu computador, acesse o site com uma janela para visualizar este mapa. Por exemplo , este .



Abra o painel com as ferramentas do desenvolvedor (Ctrl + Alt + I para Google Chrome)


No painel que é aberto, vá para a guia Origens.


Abrimos todas as pastas em ordem até encontrarmos a pasta com imagens de fatias do mapa exibido.


Clique com o botão direito do mouse no nome do arquivo. No menu exibido, selecione Copiar endereço do link



Por exemplo, obtivemos esse link
http://anygis.herokuapp.com/Combo_Best_Genshtab/1242/639/11


Você precisa entender o que exatamente esses números significam. Verificamos em nosso cartão de referência - OpenStreetMaps.


http://a.tile.openstreetmap.org/1242/639/11.png


Não está carregando. Vamos tentar trocar os números.
http://a.tile.openstreetmap.org/11/1242/639.png


Carregado! Agora compare o bloco obtido pelos primeiro e segundo links:



Asseguramos que as peças dos dois cartões mostrassem o mesmo local. E, o mais importante, sem compensações. Portanto, o mapa que encontramos é feito em uma projeção padrão e é adequado para conexão.


Bem, e agora, sabendo em que ordem as coordenadas do OpenStreetMaps foram - z, x, y - podemos dizer com confiança em que ordem elas estão no nosso mapa.


http://anygis.herokuapp.com/Combo_Best_Genshtab/{$x}/{$y}/{$z}


Agora aumente e diminua o zoom no mapa na janela de exibição. Portanto, descobrimos que o cartão é carregado apenas com o zoom 0 e 15.


Além disso, se o URL começar com uma única letra ou número, será possível substituir outros valores lá. Mas geralmente existe a, b, c ou 0,1,2,3 .


Então, agora descobrimos todos os parâmetros necessários e podemos fazer uma predefinição para o nosso novo mapa.


 <?xml version="1.0" encoding="UTF-8"?> <customMapSource> <name>.   </name> <minZoom>0</minZoom> <maxZoom>15</maxZoom> <url>http://anygis.herokuapp.com/Combo_Best_Genshtab/{$x}/{$y}/{$z}</url> </customMapSource> 

Resta salvar o arquivo com um novo nome e adicioná-lo ao seu aplicativo de navegação. Para iOS - basta arrastar e soltar o arquivo na pasta do aplicativo (via iTunes). Para Android - copie o arquivo para o seguinte diretório:


Android\data\com.bodunov.GalileoPro\files\Imported


Agora, quando você abre o navegador, o que você fez aparece na lista de mapas. Parabéns!



Como você pode ver, era bem simples. E o melhor de tudo, todo o processo é mais ou menos semelhante para todos os navegadores acima. Rápido, versátil, multiplataforma.


Obviamente, existem cartões em projeções não padronizadas. Ou com numeração não padrão. Neste artigo, descrevi como resolver esse problema. No entanto, a grande maioria dos cartões encontrados na Internet é conectada facilmente e sem problemas adicionais.


A propósito, no meu site AnyGIS você pode baixar predefinições prontas. Eles são gerados automaticamente nos formatos de todos os navegadores acima, com base no banco de dados que eu coletei. E atualizado periodicamente. Portanto, se necessário, baixe e use.


Bem, acabou com a introdução. No próximo artigo , mostrarei como conectar mapas on-line de vetores.

Source: https://habr.com/ru/post/pt461031/


All Articles