En este artículo, le diré cómo encontramos errores típicos al crear un mapa interactivo, y lo más importante, le daré enlaces a mapas normales y actuales de las entidades constitutivas de la Federación Rusa.
Nuestro reto Cree un mapa interactivo para que cuando pase el mouse sobre una región, se active un controlador de eventos y muestre algunos datos por región (por ejemplo, su nombre).
A primera vista, esto parece muy simple, pero más adelante en el artículo le diré cómo pasamos más de 3 días para solucionarlo y, lo más importante, para identificar errores.
Entonces, comenzamos el proyecto. Para empezar, necesitamos, de hecho, el mapa en sí mismo: vaya a Google para obtener un montón de diferentes formatos de datos de mapas.
Como no somos geoanalistas profesionales, en principio, no nos interesan los formatos: lo principal es trabajar, por lo que no consideraremos todo y todo aquí, pero destacaremos dos grupos principales.
- Tarjetas de vectores
- Mapas con metadatos
Los mapas vectoriales son un polígono vectorial regular que repite la forma de un objeto, por ejemplo, un país. El formato principal para este tipo de tarjeta es SVG. Y diré de inmediato por qué es malo para nuestro proyecto y por qué no debería usarse en mapas interactivos. Es simplemente una figura geométrica sin datos, incluso sin un nombre. Si no es un masoquista, no atornillará manualmente el controlador de eventos a cada polígono e ingresará manualmente toda la información sobre el objeto, desde siglas en diferentes idiomas hasta estado administrativo. Si puede hacer esto con un mapa de distritos federales, entonces a nivel de distrito simplemente morirá.
Mapas con metadatos. Los mapas con metadatos, si están en un lenguaje muy simple, son los mismos polígonos vectoriales, solo que con información conectada dentro. Hay muchos formatos, enumeraré los principales: GeoJSON, SHP, GeoTIFF, MIF, TAB, KML. En general, hay muchos de ellos, cada uno de ellos tiene sus propias características, sobre las cuales solo una persona que conoce los sistemas SIG puede decirle.
Este artículo solo trata sobre GeoJSON debido al hecho de que el proyecto decidió usar solo este formato con metadatos. Todos los mapas a continuación contienen el nombre de la región, su descripción, población, etc.
Descubrimos el formato y estamos buscando datos con una extensión específica. Y entonces comienza la diversión. ¿Crees que es fácil encontrar buenos mapas de trabajo de la Federación Rusa? Pff, no estaba allí, te espera mucha aventura. Entonces, descargó el mapa, configuró todo, lo lanzó y ...
Crimea Los primeros enlaces en google van a gis-lab. Y en estos mapas no hay península. Todo es simple aquí. Las principales tarjetas rusas se hicieron en 2000 y 2010, es decir, antes de que Crimea fuera incluida en la Federación de Rusia, y muchos servicios occidentales no reconocen la adhesión y no agregan la península a sus tarjetas. Y si inserta un mapa sin Crimea en su proyecto, mientras está en Rusia, usted mismo comprende lo que podría suceder. Por lo tanto, hacer un mapa sin este territorio no es una opción.
Solución: busque conjuntos de tarjetas de aficionados posteriores a 2014 o servicios extranjeros que aún agreguen Crimea a las tarjetas rusas. Pero lo más probable es que no los encuentres.
Vayamos más allá. Vamos a Google, manejamos en "descargar temas geojson de la Federación Rusa", buscamos, descargamos el mapa de mydata.biz y ... Todo está hinchado con nosotros.
Fronteras flotantes. En algunos mapas, las aguas territoriales están incluidas en los temas. Debido al hecho de que el territorio de todos los sujetos que bordean el mar se incrementa en 24 km, el mapa parece "flotante", especialmente las regiones con la costa y las islas. Si no tienes pretensiones, entonces probablemente puedas usar esta tarjeta, pero para mi proyecto esto es categóricamente inaceptable.
Solución Busque más mapas que excluyan las aguas territoriales.
Adelante En las profundidades de Internet en un sitio abandonado, usted encontró mapas, como en Crimea, y no "flotó", descargó y ...
Los límites de los sujetos se topan entre sí.
Este problema a menudo se encuentra en las cartas de aficionado, los límites de los sujetos se topan entre sí y, debido a esto, es posible la visualización incorrecta de elementos. También puede aparecer debido a la compresión inadecuada o la simplificación de los mapas.
Los puntos rojos son la intersección de polígonos entre sí.
Esto no siempre muestra artefactos en la pantalla, pero con una gran cantidad de errores puede ocurrir la siguiente imagen:
Solución: busque mapas sin golpear polígonos entre sí.
Estamos buscando más allá. En algún lugar, por algún milagro, encuentras un buen mapa, con Crimea, sin aguas territoriales, sin golpear los vertederos entre sí y ...
Todo se congela. La tarjeta pesa 35mb debido a detalles excesivos, y las computadoras débiles comienzan a disminuir cuando se muestran.
Solución: busque un mapa con menos detalles o comprima el mapa. Para geojson recomiendo mapshaper.org.
Eso es todo, pasaste por nueve círculos del infierno, encontraste el mapa perfecto, lo descargaste y ... Parte de Chukotka estaba idealmente aislada del resto de Rusia.
Chukotka Chukotka Chukotka Vale la pena repetir esta palabra muchas veces, porque si eres un principiante, estarás atrapado con este problema durante mucho tiempo. No será fácil para usted comprender que esta no es una tarjeta rota, esto no es un error, y no es tan fácil de arreglar como cree a primera vista. No podrá cortar esta pieza y adherirse al resto de Rusia, no podrá transferir todos los objetos al centro sin errores, etc. Y si tiene éxito, serán las peores muletas, y no aprobamos tales métodos.
Chukotka en rodajas
No entraré en detalles, pero inmediatamente revelaré las cartas.
Esto no es un error. El problema es que, por defecto, en los servicios de mapas hay una proyección (sí, tendrá que comprender qué es una proyección y cuáles son) CRS84 que, en términos generales, el origen de coordenadas proviene del meridiano 180, es decir, el mapa comienza y termina en Chukotka Imagina que estás cortando y expandiendo el globo a lo largo de esta línea.
Desde el punto de vista de la proyección CRS84, todo se muestra correctamente.
La proyección es un tema enorme y complejo. No creo que sea necesario pasar una gran cantidad de tiempo estudiándolo, si solo necesita hacer un mapa interactivo en su proyecto. Además, no analizaré en detalle, pero solo contaré sobre esas proyecciones que ayudarán a mostrar correctamente el mapa de la Federación Rusa.
La proyección cónica conforme de Asia lambert devolverá a Chukotka a su lugar. Pero, según tengo entendido, esta es una proyección no estándar y muchos servicios, por ejemplo, http://geojson.io , no admiten una desviación del estándar.
Con la proyección de área igual cónica, todo funcionó para nosotros después de una pequeña revisión.
Después de colocar una proyección cónica, verá la siguiente imagen: Rusia cayó de lado y se ahogó a medias.
De nuevo, esto no es un error: el mapa se mostró correctamente, pero por defecto existe ese ángulo. Esto se resuelve con volteo trivial y zoom de la tarjeta:
<ComposableMap projection={() => geoConicEqualArea() .scale(690) .center([100, 100]) .parallels([40, 80]) .rotate([265].translate([130, 5]) }> <ZoomableGroup> <Geographies geography={map}> {(geographies, proj) => geographies.map(geo => ( <Geography projection={proj} geography={geo} /> )) } </Geographies> </ZoomableGroup> </ComposableMap>
Como resultado, obtienes la siguiente tarjeta:
... con lo que todo está bien, ella está sin existencias y hermosa. Casi. Sin embargo, quedó una "cicatriz de Chukchi" que no pudimos eliminar. No es particularmente notable y no daña mucho la composición. No encontramos la forma de eliminarlo y, para ser sincero, no lo buscamos, estábamos demasiado atormentados por errores anteriores y decidimos dejar todo como está.
Por lo tanto, hemos resuelto los errores típicos al diseñar un mapa interactivo. Si tuviéramos un artículo de este tipo hace un mes, ahorraría muchos nervios a nuestro equipo y, espero, también salvará los tuyos.
Examinamos los siguientes problemas:
- Crimea desaparecida
- Los temas incluyeron aguas territoriales
- Las fronteras de los sujetos se topan
- La tarjeta es demasiado pesada.
- Chukotka corta 180 meridianos
Nota del desarrollador del equipo
Otra dificultad fue encontrar un componente para representar mapas que no dependería del lado del cliente, como El mapa se representa en el servidor. Utilizamos el framework Next.js, que se basa en React, por lo que d3-geo simplemente no funcionó, fue necesario encontrar el componente React.
PD: El artículo fue escrito solo para que jóvenes y verdes no pasen 2-3 días atormentando con tarjetas y aprendan de los errores de los demás. No fue escrito por un programador, ni un geoanalista, ni un cartógrafo, sino por un proyecto simple, por lo que para todas las afirmaciones e imprecisiones sugiero escribir su artículo en el segmento del idioma ruso, donde explique en detalle cómo hacerlo, ya que no encontré fuentes normales de información.
Tarjetas:
A partir de junio de 2019, los mejores mapas rusos
Un gran banco de tarjetas de todo el mundo de calidad media.
Servicios:
Visualización de mapas en línea y una herramienta para comprimirlos
proyección
Proyeccion
Componente de representación de mapa de reacción