Estoy buscando una biblioteca de mapas personalizada, pero no para mostrar un área geográfica real, sino para mostrar un plano de planta personalizado. He estado buscando durante un tiempo, pero la mayoría de las soluciones que encontré son para áreas geográficas.
Me gustaría personalizar algunos niveles de zoom (probablemente 3 niveles) e idealmente estoy buscando una solución JavaScript, HTML5 (lienzo, SVG).
¿Alguien tiene alguna sugerencia?
Respuestas:
He estado haciendo mi propia aplicación de mapas usando mis propios mapas de imágenes. Nuestra universidad se mudó a un nuevo campus y estoy mapeando 7 pisos (interiores), con 5 niveles de zoom, a partir de mapas dibujados a mano.
¡Leaflet puede trabajar con mosaicos de mapas personalizados! He seguido esta guía (omarriott.com/aux/leaflet-js-non-geographical-imagery), solo que hice algunas pruebas y errores con los números de nivel de zoom para asegurarme de que el mapa apareciera (siguiendo la guía exactamente no trabaja para mi).
Hay un complemento llamado Leaflet Indoor pero se basa en geoJson, que no tenía. Todo lo que tengo son coordenadas de imagen personalizadas y mi propio Json personalizado. De todos modos, el folleto puede convertir las coordenadas de la imagen a lat lng (y viceversa) con los métodos de proyecto y proyecto.
Lo que hice para crear diferentes pisos fue usar el control de capa en su lugar. Por supuesto, lleva un tiempo descubrir la API y asegurarse de que todo funcione como debería. Por ejemplo, agrupé mis marcadores para cada piso y codifiqué una forma de representarlos bien en diferentes niveles de zoom. Y cargar un piso diferente requiere un controlador para cargar marcadores correctamente también.
Sé que Leaflet tiene un montón de ejemplos que dependen de mapas geográficos y puede dejar a personas como nosotros en la oscuridad, pero quiero asegurarles que es posible hacerlo para mapas personalizados. Necesita la imagen, colocarla en mosaico correctamente (con los nombres correctos), cargarla en un CDN como Amazon y luego usar la API de folleto.
fuente
Sin conocer su caso de uso, es posible que desee echar un vistazo a la biblioteca D3.js (Documentos controlados por datos) para la visualización de datos. Si bien no sé si admite "niveles de zoom" per se, pero sí admite mapas con zoom .
Eche un vistazo a sus muchos ejemplos aquí: https://github.com/mbostock/d3/wiki/Gallery
fuente
Trate el plano de planta como un área geográfica. A OpenLayers o Leaflet no les importa si las cosas que muestran son interiores o exteriores; siempre que pueda definir un sistema de coordenadas, estará bien.
fuente