Conectamos mapas en línea al navegador en el teléfono inteligente. Parte 1 - mapas ráster estándar

¿Cómo son las tarjetas en línea? ¿Cómo averiguar la dirección del servidor de la tarjeta que le interesa? ¿Cómo crear un archivo de configuración que permita que el navegador en el teléfono inteligente se conecte a este mapa?


Contenido:


1 - Introducción. Mapas ráster estándar
2 - Continuación. Escribir un rasterizador simple para mapas vectoriales
3 - Un caso especial. Conectamos la tarjeta OverpassTurbo


Entrada


Entre las aplicaciones de navegación para teléfonos inteligentes, están aquellas diseñadas para el turismo y todo tipo de actividades suburbanas. Entre los más famosos se encuentran OsmAnd, Locus y GuruMaps. Todos ellos se distinguen por una gran cantidad de funciones especializadas que pueden ser útiles en el camino. Y también un número aún mayor de todo tipo de configuraciones (a veces muy confusas). Pero ahora estamos más interesados ​​en una cosa: la capacidad de agregar tarjetas adicionales y cambiar rápidamente entre ellas.


Observo que esta es una característica extremadamente útil. Después de todo, una misma área del terreno se puede dibujar de manera muy diferente en mapas de diferentes tipos . Y por lo tanto, antes de superar áreas difíciles, es útil poder consultar con cada una de ellas. Sin embargo, si para esto se requiere ejecutar varias aplicaciones separadas en un teléfono inteligente, esto sería extremadamente inconveniente. El rendimiento empeora y la batería se consume más rápido. Por lo tanto, es muy bueno que exista la oportunidad de sobrevivir con una sola aplicación: una especie de agregador cartográfico con una interfaz conveniente diseñada específicamente para el cambio rápido entre tarjetas.


Entonces aquí. Como regla general, agregar nuevas tarjetas es relativamente simple. La carpeta de la aplicación tiene una subcarpeta con presets . Es decir, con los archivos guardados, en los que se indican las configuraciones para descargar una tarjeta en particular. Veamos cuales son.


Observo que para todas las aplicaciones, los presets son más o menos similares. Entonces, como ejemplo, consideraremos GuruMaps, porque es tanto para Android como para iOS. Entonces, imaginemos que fuimos a la carpeta con sus ajustes preestablecidos, encontramos allí un archivo llamado openstreetmaps.ms , y luego lo abrimos usando un editor de texto normal.


<?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 hecho, solo tenemos una lista de varios valores. Consideremos en orden:


nombre : el nombre del mapa que se mostrará en la aplicación
minZoom : desde qué nivel de zoom se mostrará este mapa
maxZoom : hasta qué nivel de zoom se mostrará este mapa
url - Plantilla para acceder a archivos de mapas
serverParts : si el servidor en el que se almacenan los archivos de mapas tiene varios espejos, entonces debe enumerar sus nombres


Antes de continuar, noto que para el almacenamiento en servidores, las tarjetas grandes se dividen en pedazos pequeños. Por lo general, estas son imágenes png con un tamaño de 256x256 píxeles. Estos fragmentos se llaman azulejos .



Ahora echemos un vistazo más de cerca a la plantilla de URL.


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


El navegador reemplaza automáticamente las palabras entre llaves con las "coordenadas" del fragmento de mapa que se requiere actualmente. Esto es lo que se sustituirá exactamente por los talones:


{$ serverpart} : aquí se sustituirá uno de los valores de serverParts.
{$ z} : el nivel de zoom para el que desea descargar un fragmento de mapa
{$ x} - El número horizontal del fragmento del mapa
{$ y} - El número del fragmento del mapa verticalmente


Después de sustituir los valores, el navegador recibirá un enlace, que luego descargará el archivo con el fragmento de mapa requerido. Por ejemplo, esto:


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


Cuando se complete la descarga, el mosaico descargado se mostrará en la pantalla del teléfono inteligente.


Agrega tu tarjeta


Entonces, digamos que encontró en Internet una tarjeta que le interesó y que realmente le gustaría conectarse a su teléfono inteligente. Probémoslo. Primero, usando un navegador en su computadora, vaya al sitio con una ventana para ver este mapa. Por ejemplo , este .



Abra el panel con las herramientas de desarrollador (Ctrl + Alt + I para Google Chrome)


En el panel que se abre, vaya a la pestaña Orígenes.


Abrimos todas las carpetas en orden hasta encontrar la carpeta con imágenes de sectores del mapa que se muestra.


Haga clic derecho en el nombre del archivo. En el menú que se abre, seleccione Copiar dirección del enlace



Por ejemplo, tenemos ese enlace
http://anygis.herokuapp.com/Combo_Best_Genshtab/1242/639/11


Debe comprender qué significan exactamente estos números. Verificamos desde nuestra tarjeta de referencia: OpenStreetMaps.


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


No cargando Intentemos intercambiar los números.
http://a.tile.openstreetmap.org/11/1242/639.png


Cargado! Ahora compare el mosaico obtenido por el primer y el segundo enlace:



Nos aseguramos de que las fichas de ambas cartas muestren el mismo lugar. Y, lo más importante, sin compensaciones. Entonces, el mapa que encontramos está hecho en una proyección estándar y es adecuado para la conexión.


Bueno, y ahora, sabiendo en qué orden fueron las coordenadas de OpenStreetMaps - z, x, y - podemos decir con confianza en qué lugar van en nuestro mapa.


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


Ahora acerque y aleje el mapa en la ventana gráfica. Entonces descubrimos que la tarjeta se carga solo desde el zoom 0 y 15.


Además, si la url comenzó con una sola letra o número, entonces sería posible sustituir otros valores allí. Pero generalmente hay a, b, co 0,1,1,3 .


Entonces, ahora hemos descubierto todos los parámetros necesarios y podemos hacer un preajuste para nuestro nuevo 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> 

Queda por guardar el archivo con un nuevo nombre y agregarlo a su aplicación de navegación. Para iOS: simplemente arrastre y suelte el archivo en la carpeta de la aplicación (a través de iTunes). Para Android: copie el archivo en el siguiente directorio:


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


Ahora, cuando abre el navegador, lo que ha hecho aparece en la lista de mapas. Felicidades



Como puede ver, fue bastante simple. Y lo mejor de todo, todo el proceso es más o menos similar para todos los navegadores anteriores. Rápido, versátil, multiplataforma.


Por supuesto, hay tarjetas en proyecciones no estándar. O con numeración no estándar. En este artículo, describí cómo resolver este problema. Sin embargo, la gran mayoría de las tarjetas que se encuentran en Internet se conectan fácilmente y sin problemas adicionales.


Por cierto, en mi sitio web AnyGIS puede descargar preajustes ya hechos. Se generan automáticamente en los formatos de todos los navegadores anteriores en función de la base de datos que recopilé. Y periódicamente actualizado. Entonces, si es necesario, descárguelo y úselo.


Bueno, eso terminó con la introducción. En el próximo artículo te diré cómo conectar mapas vectoriales en línea.

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


All Articles