¿Es posible en Leaflet o OpenLayers comparar dos mapas con una barra para deslizarse entre los dos?
Ejemplos incluyen:
http://www.esri.com/services/disaster-response/hurricanes/hurricane-sandy-the-aftermap- http://www.arcgis.com/apps/StorytellingSwipe/index.html?appid=c62112f6ba834227978d8f1cf2b6f5af
- http://www.abc.net.au/news/specials/qld-floods/ (no es un mapa)
Sé que es posible, aunque no sé cómo hacerlo. ¿Alguien tiene alguna idea? Ejemplos?
openlayers-2
web-mapping
leaflet
swipe
Alex Leith
fuente
fuente
Respuestas:
Lo que quieres hacer, generalmente se llama una herramienta 'Deslizar'.
No hay una herramienta o control incorporado para esto en OpenLayers, pero afortunadamente, hay un ejemplo aquí: Control de deslizamiento con Google y OSM basado en una clase personalizada.
Solo necesita incluir este archivo JavaScript en su aplicación.
La mayoría de las herramientas / controles de deslizamiento que he visto en línea, se basan en el simple clip CSS. Es muy sencillo integrar este tipo de control en su aplicación incluso sin parches externos.
fuente
El mango lo hace con el folleto. Mira un ejemplo aquí .
Por supuesto, puede ahorrar tiempo para codificarlo usted mismo y crear el mapa de forma gratuita con Mango.
fuente
Este es un ejemplo de folleto funcional que utiliza dos capas WMS y el folleto 0.5. Necesita un poco de ajuste, por ejemplo, las capas no se recortan durante el desplazamiento. Pero funciona bastante bien.
Ver aquí: https://github.com/gccgisteam/leaflet-examples/blob/master/leafletSwipe.html
fuente
Eche un vistazo a WMS Split for Leaflet.
fuente
Es posible con el folleto. Aquí lo que hice el mapa de deslizar con folleto y jquery.
fuente
Probablemente deberías buscar OpenLayers 3. Puedes mirar el código de ejemplos usando CTRL + U: El código tampoco parece demasiado complejo:
http://openlayers.org/en/v3.1.1/examples/layer-swipe.html
fuente
Estoy usando un buen Openlayers 3 y 4 extensiones de viglino. Puede encontrar los ejemplos de la herramienta Deslizar y mapas sincronizados aquí.
http://viglino.github.io/ol3-ext/examples/map.control.swipe.html
http://viglino.github.io/ol3-ext/examples/map.interaction.synchronize.html
Su repositorio de GitHub se encuentra aquí: https://github.com/Viglino/ol3-ext
Esos ejemplos están incluidos en el repositorio de GitHub.
fuente