La API de Google Maps y las superposiciones personalizadas

En nuestro tutorial anterior vimos cómo puede agregar marcadores y personalizar los colores y menús de un mapa de Google utilizando la API del servicio. Este tutorial lleva las cosas un paso más allá, explicando cómo puede crear su propio mapa personalizado y cubrir en un mapa de Google (como mi mapa de Portsmouth de 1896).

En este tutorial agregaremos una superposición de 'predicciones meteorológicas' al mapa que construimos anteriormente. El mapa del tiempo que uso es completamente ficticio, pero las técnicas cubiertas te darán la libertad de crear todo tipo de cosas interesantes. Podrás construir mapas históricos, mapas dibujados personalizados, primeros planos de áreas específicas como un campus universitario. La lista es interminable.!

Los mapas de Google se componen de muchos azulejos separados. Captura de pantalla tomada del excelente sitio web 'Tiles à la Google Maps'.

Algunas cosas que debes saber antes de comenzar:

Un mapa de Google se hace usando muchos 'mosaicos' de imagen (ver imagen arriba). En otras palabras, el mapa se divide en una cuadrícula invisible y cada cuadrícula es un archivo de imagen separado de 256x256 píxeles.
Necesita un conjunto de mosaicos de imagen para cada nivel de zoom. El nivel de zoom es un número, desde cero hacia arriba, que cambia al acercarse y alejarse del mapa (vea la imagen de arriba).
La superposición del mapa comienza su vida como una imagen realmente grande (un jpeg o png), que luego se "corta" en mosaicos. Es un proceso repetitivo, en el sentido de que la imagen se divide una vez para crear un conjunto de mosaicos para el primer nivel de zoom, y luego se divide nuevamente en segmentos más pequeños para crear el segundo conjunto de mosaicos para el siguiente nivel de zoom, y pronto.

Este tutorial explica cada paso, incluidas las herramientas de software que están (¡afortunadamente!) Disponibles para automatizar las cosas y hacer la vida mucho más fácil. Los archivos fuente para cada paso están disponibles en el paquete de descarga..

Descargando una plantilla

Para comenzar, el primer paso es crear una plantilla en la que pueda crear su propia superposición..

Imagen de plantilla en la que creas tu mapa. Esta imagen es en realidad 9984x11776 píxeles

Su objetivo es crear una plantilla en Photoshop (o aplicación de gráficos equivalente) que tenga exactamente el mismo tamaño y forma que el mapa de Google que va a superponer, cuando esté en su lugar. mayor nivel de zoom. (maptiler.org es útil si no está seguro de cuál es el nivel de zoom más alto que necesita).

Para hacer esto, puede guardar un mapa de plantilla usando el mashup del mapeador y luego agrandarlo en Photoshop al nivel de zoom máximo deseado. Por ejemplo:

Use su aplicación de gráficos para abrir la plantilla de imagen de mapa que ha guardado.
Vaya al sitio web de Tiles à la Google Maps y tome una captura de pantalla de un segmento de su mapa de Google, a su nivel máximo de zoom requerido.
Pega la captura de pantalla en tu archivo de Photoshop.
Luego, amplía la imagen del mapa de la plantilla para que se alinee exactamente con el segmento del mapa ampliado correspondiente.
A continuación, elimine el segmento ampliado. La calidad de su plantilla de mapa no será excelente, pero esto no importa ya que solo la necesita para el esquema y finalmente la eliminará.

Propina: Otra opción es el descargador de mapas de Google, pero tenga en cuenta los términos y condiciones de Google. Además, esta opción no es viable para mapas grandes y detallados; un mapa del Reino Unido ampliado al nivel 12 será demasiado grande para abrirlo en Photoshop.

En esta etapa, no voy a complicar las cosas! Así que en un ligero cambio al tutorial anterior, cambié el nivel de zoom máximo de 12 a 10 para que podamos trabajar con un tamaño de archivo manejable.

Creando tu propio mapa

Una vez que tenga su mapa jpg utilizando el proceso descrito anteriormente, ábralo en Photoshop o en su aplicación de gráficos preferida.

Mi superposición personalizada. No es exactamente una muestra de talento artístico que conozco, pero hace el trabajo para esta demostración. Su mapa se verá increíble. (Tamaño real 7248x10929 png)

Usarás esta imagen como plantilla y dibujarás tu propio mapa sobre ella. Esto es para asegurar que su mapa se alinee perfectamente con el mapa de Google.

Bloquea la capa de tu plantilla de mapa.
Añadir una nueva capa / s.
Crea algo increíble. (En realidad, no te dejes llevar por el principio. De hecho, es una buena idea crear algo básico, como mi mapa meteorológico, y seguir el resto del tutorial para sentir lo que está sucediendo. !)
Ocultar la capa de plantilla de mapa.
Guarda tu mapa como png o jpg (si tienes partes transparentes, como el mar en este tutorial, ve por un png).

Eche un vistazo a la imagen del mapa meteorológico que creé en esta etapa, que está disponible en la descarga de origen..

Cortando su mapa

Hay un par de formas en que puede dividir su imagen para crear los mosaicos del mapa. Si quieres un poco de información de fondo sobre lo que estás haciendo, sigue leyendo. De lo contrario, si no le importa por qué o cómo funciona, simplemente pase a la siguiente sección!

Sistemas de proyección

Un sistema de proyección, en el sentido geográfico, es cómo se crea un mapa plano a partir de un objeto redondo, es decir, el globo. Hay todo tipo de fórmulas (francamente desconcertantes) y algoritmos utilizados para lograr esto. Todo lo que necesita saber es que los diferentes sistemas de proyección dan como resultado diferentes mapas planos del mundo.

La proyección de Mercator (arriba) y la proyección de Gall-Peters (abajo) crean mapas bidimensionales bastante diferentes. (Las cuadrículas de las imágenes anteriores no están relacionadas con los mosaicos de mapas de Google, que son cuadrados).

Para crear una superposición para un mapa de Google, debe utilizar el sistema 'Mercher esférico' que utiliza la proyección de Mercator. Esto se define como EPSG: 900913 o EPSG: 3857. Para obtener más información sobre los sistemas de proyección, consulte la página web Tiles à la Google Maps.

Encontrar cada lado de su mapa

Antes de que pueda generar sus fichas, necesita calcular la posición de los lados norte, sur, oeste y este de su mapa. Como está utilizando el sistema 'Mercator esférico', estos deben estar en medidores esféricos en lugar de latitud o longitud.

Cómo leer la salida en el sitio web de Mashup: Número superior izquierdo = lado oeste, número superior derecho = lado sur, número inferior izquierdo = lado este, número inferior derecho = lado norte.

Puedes encontrar estos valores de posición usando este mashup. Descubrí que el método más sencillo es acercar y encontrar un lado a la vez. Así que encuentre el valor para el lado oeste de su mapa, tome nota de él, luego encuentre el valor para el lado sur, y así sucesivamente.

Una vez que haya encontrado estos cuatro valores, ahora puede "dividir" su mapa en mosaicos. Hay un par de opciones disponibles..

Opción de corte 1: MapTiler

Afortunadamente, el software MapTiler es realmente fácil de usar. En el momento de escribir este tutorial, MapTiler está actualizando su software. Pero independientemente de la versión que descargue, estos son los pasos básicos:

Descargar Maptiler. O la versión Beta más nueva.
Inicia el programa y selecciona Mapas de Google opción compatible.
Luego agrega la imagen del mapa que creaste en el paso anterior.
Se le pedirá que dé la georeferencia de los límites de su mapa, es decir, la posición en metros esféricos de cada lado que acaba de encontrar. En la versión 0.41 (la más reciente de las dos versiones) esto se conoce como Cuadro delimitador. Ten cuidado con el orden en que ingresas los valores.!
Cuando se le pregunte por su referencia espacial / uso de sistema de coordenadas ESPG: 3857 . (Si está utilizando la versión anterior (1) versión de MapTiler, entonces use EPSG: 900913).
A continuación, seleccione los niveles de zoom para los que desea generar mosaicos. El valor máximo debe ser el valor en el que guardó el mapa de la plantilla cuando lo creó (arriba). La página de Tiles à la Google Maps es útil para calcular lo que necesita para el valor de zoom mínimo.
Continuar hasta el final del asistente e iniciar el Hacer. Esto puede tomar un tiempo; una buena oportunidad para tomar un cafe!

Nota: Si está utilizando la nueva versión de MapTiler, hay un gotcha; Las fichas de tu mapa tienen marcas de agua. Supongo que en algunos casos, tal vez para un proyecto Uni o una prueba de concepto técnica, esto no es un problema de todos modos. Sin embargo, hay un par de maneras de evitar esto. La forma más obvia es comprar la actualización por $ 20, creo. La otra opción es usar la secuencia de comandos de python de GDAL2Tiles. Mi preferencia personal es apostar por la actualización porque prefiero dedicar mi tiempo a las cosas creativas, en lugar de soportar las irritaciones de configurar el entorno de scripting, pero es posible que se sienta diferente..

Propina: Si experimenta algún problema al utilizar el software MapTiler, el Foro de usuarios es extremadamente útil..

Opción de corte 2: GDAL2Tiles

Una alternativa a MapTiler es el script GDAL2Tiles. El software MapTiler en realidad está construido sobre este script, que se ejecuta a través de la interfaz del símbolo del sistema.

GDAL2Tiles es el script de Python que se encuentra en el corazón de la interfaz gráfica de MapTiler. Puede usar este script directamente a través de la interfaz del símbolo del sistema.

GDAL2Tiles ofrece más posibilidades, pero también es un poco más difícil de usar; Así que solo sigue leyendo si tienes un sentido de aventura.!

La primera etapa es configurar el entorno para ejecutar el script GDAL2Tiles. Cómo haces esto depende de tu sistema operativo. Si está utilizando una máquina Windows de 32 bits (haga clic aquí si no está seguro), entonces puede usar la lata OSGeo4W.

Primero necesitas instalar Python y comprobar que Python está en tu variable de ruta.
Luego descargue OSGeo4W.
Ejecuta el instalador y selecciona Instalación avanzada.
Seleccionar Libs y seleccione Gdal y gdal-python en los paquetes seleccionados.
Continuar y completar la instalación..
Cuando haya terminado, debe tener el icono OSGeo4W en su escritorio. Este es un archivo por lotes para iniciar el símbolo del sistema.

Si está utilizando una máquina Windows de 64 bits (haga clic aquí si no está seguro), entonces la configuración es un poco diferente. Estas instrucciones se citan (con amable permiso) directamente del blog de Jaerock Kwon, quien merece todo el crédito por dar instrucciones tan detalladas..

Instala Python desde x86-64.
Comprueba que Python está en tu variable de camino..
Ejecute python.exe. (por ejemplo, haga clic en C: \ Python27 \ python.py) Tenemos que averiguar la versión del compilador que creó Python. En mi caso, la versión de Python es 2.7.5 y fue compilada y construida con Python 2.7.5 (por defecto, 15 de mayo de 2013, 22:44:16) [MSC v.1500 64 bit (AMD64)] en win32.
Los paquetes binarios de GDAL para máquinas de 64 bits se pueden encontrar en http://vbkto.dyndns.org/sdk/. Seleccione una versión correspondiente en la tabla. En mi caso, release-1500-x64-gdal-1-10-mapserver-6-2 es la versión correcta en la fila "MSVC2008 (Win64) -stable" porque Python fue creado en 1500.
Descargue el instalador genérico para los componentes principales de GDAL. En mi caso - gdal-110-1500-x64-core.msi
Descargue el instalador para los enlaces de python de GDAL (requiere instalar el núcleo de GDAL). En mi caso GDAL-1.10.0.win-amd64-py2.7.msi: elegí esto porque 1.10.0 es el último y mi Python es 2.7.5.
Instale los componentes principales de GDAL. No hay opción para elegir la carpeta de destino para GDAL Core. Se instalará en la carpeta "C: \ Archivos de programa \ GDAL".
Instalar los enlaces de python GDAL.
Después del enlace, puede mover la carpeta GDAL en C: \ Archivos de programa a donde desee.
Finalmente, haga clic en el comienzo menú y luego Todos los programas y entonces GDAL. Esto debería iniciar la línea de comandos..

Entonces, suponiendo que haya superado el proceso de configuración del entorno de software GDAL2Tiles (¡a veces es traumático!), Es el momento de hacer algo con él..

El indicador de comandos de GDAL. El OSGeo4W se ve muy similar a esto. Los comandos son los mismos para ambos.

Ya sea que tenga el entorno OSGeo4W o GDAL, su símbolo del sistema debe ser similar a la captura de pantalla anterior. Ahora puedes empezar a usar el script GDAL2Tiles.

Primero, debe navegar a la carpeta donde se guarda el mapa que desea cortar. (Estos comandos son útiles para llegar a donde necesita estar: dir Te da una lista de todo en el directorio actual., discos compactos significa cambiar directorio, discos compactos… significa mover un nivel hacia arriba en el árbol).

Una vez que esté en la carpeta correcta, puede comenzar a crear sus mosaicos. Para crear el mapa de demostración en este tutorial, estos son los comandos que usé -

gdaltranslate de VRT -a_srs EPSG: 900913 -gcp 0 0 -910307.6791052371 8109796.717743561 -gc 7

gdal2tiles.py -p mercator -z 6-10 out.vrt

Para explicar lo que están haciendo estos comandos, vea el gdal_translate página y la gdal2tiles.py página. También hay un comando warp GDAL que está estrechamente relacionado, pero no es necesario en este caso. Algunas cosas a tener en cuenta son:

El tres -gcp propiedades relacionadas con tres esquinas de su mapa. El primer par de valores después de cada uno. gcp la propiedad se relaciona con las dimensiones en píxeles de su archivo de imagen de entrada, y el segundo par de valores son las coordenadas en metros esféricos (no latitud y longitud - vea arriba).

Así que para aplicar esto a su mapa:

gdal_translate -de VRT -a_srs EPSG: 900913 -gcp 0 0 west north -gcp width_of_your_input_map_file_in_pixels 0 east north -gcpay_payasporg.p.as.jpg

gdal2tiles.py -p mercator -z zoom_range name_of_output_file.vrt

Después de ejecutar el segundo comando, su computadora cobrará vida y comenzará a cortar su imagen para crear los mosaicos del mapa. Es posible que desee ver los comandos exactos que escribí en los entornos OSGeo4W y GDAL si no está seguro de navegar por las carpetas utilizando el indicador de comandos..

Entendiendo la salida

Independientemente del método utilizado para generar los mosaicos, las carpetas generadas serán las mismas.

Algunas de las fichas generadas. Estos son el nivel de zoom 6, la posición 'x' es 31 y la posición 'y' es el nombre de cada archivo..

Todos los mosaicos en un mapa de Google tienen un valor 'x' e 'y'. (Sí, ¡otro sistema de coordenadas diferente!) El primer nivel de las carpetas es el nivel de zoom, luego dentro de las cuales el siguiente nivel de carpetas son la coordenada 'x', y dentro de eso el nombre del archivo es la coordenada 'y'.

Si echa un vistazo al mapa en este sitio web, debería ver que los nombres de sus mosaicos coincidan. En otras palabras, diríjase a la ubicación deseada, ajuste el nivel de zoom para que coincida con el nombre de su carpeta, luego mire los valores 'x' e 'y' de Google. Debería ver que coinciden con sus subcarpetas y nombres de archivos para los mosaicos de mapas correspondientes.

Para volver a comprobar que sus mosaicos están bien, recomiendo encarecidamente copiar uno o dos de los mosaicos generados para el nivel de zoom más bajo en su archivo de mapa (por ejemplo, el archivo de Photoshop) creado durante la etapa anterior. Comprueba que encajan exactamente en la parte superior de tu mapa. Eche un vistazo a los archivos de origen que he proporcionado para ver un ejemplo de esto..

Si todo está bien entonces - felicitaciones - el trabajo duro está hecho!

Ayuda, los mosaicos de mis mapas no se nombran correctamente!

Oh querido. Esto ocurrirá si usó la versión anterior del software MapTiler o el script GDAL2Tiles. Sus archivos (pero no las carpetas) se nombran usando la convención de nombres TMS. Si observa los mosaicos en esta página, puede ver que cada mosaico tiene dos valores de x e y; es decir. un par de Google y un par de TMS. Solo tenemos que cambiarles el nombre a la convención de nombres de mapas de Google..

Este cambio de nombre se puede hacer manualmente, pero tomará demasiado tiempo para la mayoría de los mapas. Afortunadamente, hay un script de shell útil que hará el trabajo por ti. Necesita saber un poco acerca de los comandos de Linux muy básicos, como la forma de cambiar la carpeta. Antes de ejecutar el script de shell, haga una copia de sus mosaicos para trabajar.

#! / bin / sh para thisPath en 'ls -d * / * / *' haga este File = $ thisPath # * / * / oldY = $ thisFile% .png zoomX = $ thisPath% / * zoom = $ thisPath% / * / * newY = $ (((1< Copie y pegue el script anterior en el Bloc de notas y guárdelo con el nombre 'renombrar' y la extensión '.sh'. Al guardar el archivo 'sh' en el bloc de notas, asegúrese de seleccionar 'todos los archivos' junto a 'guardar como tipo', y ponga el nombre entre comillas, por ejemplo. "Rename.sh".
 Si está utilizando una Mac, este script de shell se puede ejecutar en la Terminal (seleccione Aplicaciones entonces Utilidades entonces Terminal).
  Si está en una máquina con Windows, para ejecutar los scripts de shell (o archivos '.sh') necesita usar Cygwin, que es un entorno similar a Linux para Windows:
  Descarga e instala Cygwin 
 Copie el archivo 'rename.sh' que acaba de guardar en la carpeta cygwin \ bin.
 Iniciar cygwin.
 Mover a la cygwin \ bin carpeta. (es decir.  discos compactos significa cambiar directorio, discos compactos…   significa subir el árbol un nivel, y ls significa mostrar los archivos y carpetas en el directorio actual.)
 Hacer rename.sh ejecutable ejecutando chmod 755 rename.sh 
 También debe convertirlo en un archivo de Linux antes de ejecutarlo, de lo contrario, obtendrá los errores causados por los saltos de línea. Así que corre, asegúrate de estar en el cygwin \ bin carpeta y ejecutar d2u rename.sh 
 Luego muévase a la carpeta que contiene sus mosaicos (vea la captura de pantalla arriba).
 Luego, para ejecutar el script, escriba rename.sh 
 
 Una vez que se haya ejecutado el script de shell, puede verificar que haya terminado el trabajo echando otro vistazo a sus archivos. Compruebe si sus nombres ahora coinciden con las coordenadas de Google en esta página.
 Si compara los nombres de los archivos en los archivos de la Parte 3 y los archivos de la Parte 4 en los archivos de origen, puede ver la diferencia.
 
 Comprimiendo los títulos de su mapa
 Para asegurarse de que su mapa se ejecute de la mejor manera posible, puede comprimir sus mosaicos de mapas.
 Existen varias utilidades de compresión gratuitas para imágenes png, pero luché (y fallé) para encontrar una que fuera completamente gratuita e hiciera el trabajo. Por ejemplo, el popular software PNGGauntlet no conservó la estructura de la carpeta, mientras que otras utilidades gratuitas tenían un límite en el número máximo de archivos.
 Al final tuve que morder la bala y comprar el software PNGOUTWin. Esto cuesta alrededor de £ 10, lo cual es una ganga, dado el dinero que se ahorró. PNGOUTWin conserva la estructura de archivos y te permite comprimir todos tus archivos a la vez.
 Si usas PNGOUTWin, es bastante intuitivo. Mi única advertencia es que debe hacer una copia de sus mosaicos y luego ejecutar el software en la copia. Además, tenga en cuenta que el software se inicia literalmente tan pronto como haya seleccionado la carpeta.!
 
 La magia de JavaScript para unirlo todo
 Está bien, ya casi estamos allí. Todo lo que queda es la pequeña cuestión de adjuntar sus nuevos mosaicos de mapas encantadores a su mapa de Google.
 El codigo basico
 Primero, eche un vistazo a un ejemplo simple de una superposición de mapas en mosaico (los archivos fuente están disponibles en el enlace en la parte superior de esta página).
  Si se acerca y se aleja, la superposición del mapa se mantiene.
 // configurando la superposición del mapa de lluvia var rainMapOverlay = new google.maps.ImageMapType (getTileUrl: function (coord, zoom) return 'tiles / precipitación' + '/' + zoom + '/' + coord.x + '/' + coord.y + '. png';, tileSize: new google.maps.Size (256, 256));
 Este fragmento está utilizando la clase ImageMapType para crear la superposición personalizada. los coord.x se relaciona con el nombre de la carpeta y la coord.y se relaciona con el nombre del archivo. Estos se unen en el código para crear la ruta a cada mosaico.
 Conectándolo al mapa del festival del Reino Unido
 Este es el producto final que está buscando. Para crear esto, puede usar las mismas técnicas explicadas cerca del final del tutorial anterior.
  Primero creamos una variable (precipitacionesOverlayToggle) para mantener si la superposición del tiempo se está mostrando o no. Y, a continuación, creando una nueva opción en el handelRequests función para hacer frente a la situación cuando el botón paraguas (paraguas) se hace clic.
 // Muestra el mapa de precipitaciones cuando se hace clic en el botón unbrella, y se elimina si ya se muestra. else if (buttonPressed === "precipitaciones") // Si el mapa de precipitaciones NO se muestra aleady, entonces muéstrelo… if (rainOverlayToggle === 0) // Superpone el mapa de precipitaciones en la parte superior de Google map .insertAt (0, rainMapOverlay); // Mostrar la clave del tiempo. festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .push (weatherKeyDiv); precipitacionDejarTejer = 1;  // Si ya se muestra el mapa de precipitaciones, entonces escóndalo ... de lo contrario // elimine el mapa de superposición. festivalMap.overlayMapTypes.removeAt (0, rainMapOverlay); // eliminar la clave del tiempo festivalMap.controls [google.maps.ControlPosition.TOP_LEFT] .pop (weatherKeyDiv); precipitacionDejarTejer = 0; 
 
 Qué sigue?
 ¡Bien hecho por llegar al final! Si tiene alguna pregunta, por favor pregunte en los comentarios. El siguiente tutorial le mostrará cómo conectarse a la API de Flickr, lo que le permitirá tomar fotos automáticamente de Flickr y mostrarlas en su mapa..
 
 Créditos de imagen
  Mapa de proyección de Mercator - Wikipedia 
 Mapa de proyección de Gall-Peters - Wikipedia 
 



		
			
	   
	




Diseño web