Cómo crear mapas estilizados personalizados usando OpenStreetMap: 7 pasos (con imágenes)

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:41

En este instructivo, describiré un proceso mediante el cual puede generar sus propios mapas estilizados personalizados. Un mapa estilizado es un mapa donde el usuario puede especificar qué capas de datos se visualizan, así como definir el estilo con el que se visualiza cada capa. Primero describiré el proceso a través del cual puede escribir software para estilizar mapas, seguido de un ejemplo del software Python que escribí para realizar esta tarea.

El siguiente video destaca cómo yo personalmente genero mapas estilizados, pero sigue leyendo para conocer los detalles íntimos. ¡Estoy muy emocionado de ver lo que crea la comunidad!

¿Cuál es mi motivación detrás de este proyecto?

Francamente, comencé este proyecto porque pensé que sería divertido hacerlo. Esta idea ha estado dando vueltas en mi mente durante el año pasado, y finalmente me tomé el tiempo que necesitaba para llevarla a cabo. Después de un día de creación de prototipos con algunos scripts básicos, pude generar resultados extremadamente prometedores, tan prometedores que supe que necesitaba formalizar mis scripts para que otros pudieran hacer sus propias creaciones fácilmente.

Mi motivación al escribir este instructivo se debe al hecho de que encontré muy poca información sobre cómo crear tus propios mapas estilizados desde cero. Espero compartir lo que he aprendido con la comunidad.

Recursos / Enlaces:

• OpenStreetMap
• OpenStreetMap Legalese
• Repositorio de Github

Suministros

• Una distribución de Python (usé Anaconda y Python 3.6)
• PyQt5 (para las dependencias de la GUI)

Paso 1: Definición del proceso I: Descarga del archivo OSM

Cuando comencé este proyecto, la pregunta más evidente era "¿dónde puedo obtener datos de mapas"? Naturalmente, como era de esperar, inmediatamente pensé en Google Maps. Después de una investigación significativa, descubrí que Google realmente no quiere que las personas jueguen con sus datos, en un sentido creativo o de otro tipo. De hecho, no permiten explícitamente el raspado web de Google Maps.

Afortunadamente, mi desesperación duró poco después de mi descubrimiento de OpenStreetMap (OSM). OSM es un proyecto colaborativo en el que participan personas de todo el mundo que aportan datos. OSM permite explícitamente el uso ilimitado de sus datos en nombre del software de código abierto. Como tal, visitar la página web de OSM es donde comienza el viaje de estilización de mapas.

Después de llegar al sitio web de OSM, haga clic en la pestaña "Exportar" para mostrar las herramientas de exportación de mapas. Ahora, amplíe para ver la región con la que está interesado en recopilar datos de mapas. Seleccione el enlace "Seleccionar manualmente un área diferente", que mostrará un cuadro en su pantalla. Dé forma y coloque este cuadro sobre la región de interés. Una vez satisfecho, haga clic en el botón "Exportar" para descargar su archivo de datos OSM.

Nota n. ° 1: si la región seleccionada contiene demasiados datos, obtendrá un error de que ha seleccionado demasiados nodos. Si esto le sucede, haga clic en el botón "Overpass API" para descargar su archivo más grande.

Nota # 2: Si su archivo OSM descargado tiene más de 30 MB, el programa Python que escribí se ralentizará notablemente. Si está decidido a utilizar una región grande, considere escribir un script para deshacerse de los datos superfluos que no planea dibujar.

Paso 2: Definición del proceso II: Comprensión de los datos

"Tengo los datos … ¿y ahora qué?"

Comience abriendo su archivo OSM descargado en su software de edición de texto favorito. Primero notará que este es un archivo XML, ¡lo cual es genial! XML es bastante fácil de analizar. El comienzo de su archivo debe verse casi idéntico a la primera imagen de este paso; se enumerarán algunos metadatos básicos y límites geográficos.

A medida que se desplaza por el archivo, notará que se utilizan tres elementos de datos:

1. Nodos
2. Formas
3. Relaciones

El elemento de datos más básico, un nodo, simplemente tiene un identificador único, latitud y longitud asociados con él. Por supuesto, hay metadatos adicionales, pero podemos descartarlos con seguridad.

Las formas son colecciones de nodos. Una forma se puede representar como una forma cerrada o como una línea abierta. Las formas consisten en una colección de nodos identificados por su identificador único. Están etiquetados con claves que definen el grupo de datos al que pertenecen. Por ejemplo, la forma que se muestra en la tercera imagen de arriba pertenece al grupo de datos "lugar" y su subgrupo, "isla". En otras palabras, esta forma particular pertenece a la capa "isla" bajo el grupo "lugar". Las formas también tienen identificadores únicos.

Por último, las relaciones son conjuntos de formas. Una relación puede representar una forma compleja con agujeros o con múltiples regiones. Las relaciones también tendrán un identificador único y se etiquetarán de manera similar a las formas.

Puede leer más sobre estos elementos de datos en la wiki de OSM:

• Nodos
• Formas
• Relaciones

Paso 3: Definición del proceso III: Recopilación de datos

Ahora debería tener al menos una comprensión superficial de los elementos de datos que componen un archivo OSM. En este punto, estamos interesados en leer los datos de OSM usando el idioma que elijas. Si bien este paso está centrado en Python, si no desea usar Python, aún debe leer esta parte, ya que contiene algunos consejos y trucos.

El paquete xml se incluye de forma predeterminada con la mayoría de las distribuciones estándar de Python. Usaremos este paquete para analizar fácilmente nuestro archivo OSM como se muestra en la primera imagen. En un solo bucle for, puede procesar el manejo de datos OSM para cada elemento de datos en particular.

En la última línea de la imagen, notará que verifico la etiqueta 'límites'. Este paso es de vital importancia para traducir los valores de latitud y longitud a píxeles en la pantalla. Recomiendo encarecidamente ejecutar esta conversión en el momento de cargar el archivo OSM, ya que la conversión masiva de datos es un proceso intensivo.

Hablando de convertir latitudes y longitudes en coordenadas de pantalla, aquí hay un enlace a la función de cálculo que escribí. Probablemente notará algo un poco extraño al convertir la latitud en coordenadas de pantalla. ¡Hay un paso adicional involucrado en comparación con la longitud! Resulta que los datos de OSM se modelan utilizando el método de proyección Pseudo-Mercator. Afortunadamente, OSM tiene documentación fantástica sobre este tema aquí, y proporcionan las funciones de conversión de latitud para una cantidad significativa de idiomas. ¡Impresionante!

Nota: En mi código, la coordenada de la pantalla (0, 0) es la esquina superior izquierda de la pantalla.

Paso 4: Implementación de Python Map Stylizer

Hasta este punto, he hablado del archivo de datos OSM: qué es, cómo leerlo y qué hacer con él. Ahora discutiré el software que escribí para abordar la visualización de mapas estilísticos (el repositorio de GitHub se proporciona en la introducción).

Mi implementación específica se centra en el control del usuario de la canalización de renderizado. Específicamente, le permito al usuario seleccionar las capas que quieren ver y cómo quieren que se visualice esa capa. Como mencioné brevemente anteriormente, hay dos clases de elementos renderizados: elementos de relleno y elementos de línea. Los rellenos se definen solo por un color, mientras que las líneas se definen por color, ancho de línea, estilo de línea, estilo de tapa de línea y estilo de unión de línea.

A medida que el usuario realiza modificaciones en los estilos de capa y la visibilidad, los cambios se reflejan en el widget de mapa de la derecha. Una vez que un usuario ha modificado la apariencia del mapa a su satisfacción, puede ajustar la dimensión máxima del mapa y guardar el mapa como una imagen en su computadora. Al guardar una imagen, también se guardará un archivo de configuración de usuario. Esto garantiza que un usuario pueda recuperar y reutilizar la configuración que utilizó para generar una imagen en particular en cualquier momento.

Paso 5: Implementación Inconveniente + Solución

Cuando comencé a estilizar un mapa manualmente, aprendí que era un proceso bastante tedioso. Ofrecer al usuario el máximo control puede ser simplemente abrumador debido a la gran cantidad de "perillas" disponibles. Sin embargo, existe una solución simple, que implica un poco más de secuencias de comandos.

Comencé identificando en qué capas estoy particularmente interesado. Para el propósito de este instructable, digamos que estoy más interesado en edificios (todos ellos), ríos, carreteras principales y calles de superficie. Escribiría una secuencia de comandos en la que creo una instancia de Configuración, alternar los estados de las capas de manera apropiada usando la función setItemState () y las constantes definidas, y establecer los colores en función de cómo me gustaría que aparecieran mis capas usando setValue (). El archivo de configuración resultante que se guarda puede ser copiado en la carpeta configs y cargado por el usuario.

Un ejemplo de secuencia de comandos está en la imagen de arriba. La segunda imagen es una muestra de cómo se verían las funciones auxiliares, y dado que son básicamente todas idénticas, solo con constantes variables, solo incluí una imagen de un ejemplo.

Paso 6: áreas de mejora

Después de reflexionar sobre la implementación de mi software, identifiqué varias áreas que serían mejoras útiles para los usuarios avanzados.

1. Renderizado de capas dinámicas. Actualmente, tengo una lista predefinida de capas que se renderizarán, eso es todo. Parte de la justificación fue la dificultad para determinar si una capa debe ser una línea o un relleno. Como resultado, con casi todos los archivos OSM que abra, recibirá una gran cantidad de advertencias sobre las capas que no se procesarán. A menudo, estos son tan mínimos que no son un problema, pero es probable que falten capas críticas. El renderizado de capas dinámicas eliminaría estas preocupaciones.
2. Asignación de capa dinámica. Esto va de la mano con el n. ° 1; si desea una representación de capa dinámica, necesita una asignación de capa dinámica (es decir, identificar una capa de relleno frente a una capa de línea). Esto podría lograrse razonablemente, como he aprendido, porque las Vías cuyo primer y último nodo son iguales serán caminos cerrados y, por lo tanto, llenados.
3. Grupos de colores. Un mapa estilizado a menudo tiene varias capas que tienen el mismo estilo, y permitir al usuario modificar el estilo de un grupo al mismo tiempo reduciría enormemente el tiempo que el usuario dedica a editar capas una por una.

Paso 7: pensamientos finales

Gracias a todos por tomarse el tiempo de leer mi Instructable. Este proyecto representa la culminación de muchas horas de investigación, diseño, programación y depuración. Espero haber podido proporcionar una plataforma de lanzamiento desde la que pueda construir su propio proyecto o basarse en lo que ya he escrito. También espero que mis deficiencias y consejos proporcionen muchos puntos a considerar en su diseño. Si estás menos inclinado a programar y más a crear obras de arte, ¡me encantaría ver lo que haces en los comentarios! ¡Las posibilidades son infinitas!

¡Un agradecimiento especial a los colaboradores de OpenStreetMap! Proyectos como este no serían posibles sin sus importantes esfuerzos.

¡Por favor, avíseme si tiene alguna pregunta en los comentarios!

Finalista en el desafío de mapas