javascript - example - svg map generator

Zoom y panning svg imágenes usando raphael.js o alguna otra biblioteca js

Question

Necesito un pequeño script que muestre un SVG (imagen vectorial) dentro de un marco que tenga 2 funciones;

1. La imagen se puede panoramizar (se mueve para ver diferentes partes de la imagen svg con el cursor) de forma similar a los mapas de Google.

2. La imagen SVG puede acercarse y alejarse también de forma similar a los mapas de Google, excepto que no será necesario cargar imágenes nuevas ya que la imagen es un vector.

Para una secuencia de comandos similar que he visto que funciona con formatos de imagen normales, consulte http://jibbering.com/routeplanner/

Answer 1

Derivé el SVGPan de Andrea en un plugin de Raphäel (con suerte) más amigable :)

Answer 2

En primer lugar, debe aprender a instalar una función que amplíe Raphael para admitir el zoom ... http://www.irunmywebsite.com/raphael/additionalhelp.html?q=addownmethodstocanvas

A continuación, desea implementar el complemento de ampliación de Wout ... http://github.com/wout/raphael-zoom

Answer 3

Puede probar las secuencias de comandos desde la página de prueba de IE9 http://ie.microsoft.com/testdrive/Graphics/42OrganizationChart/Default.xhtml Requiere un pequeño ajuste con ids, pero funcionó bien para mí.

Answer 4

Rafael es bueno, pero no lo suficientemente bueno.

Consulte esta página: http://code.google.com/p/svgpan/ . Hace exactamente lo que pediste.

Answer 5

Si alguien todavía está interesado: Acabo de encontrar esta implementación de Pan y Zoom para Rafael. Todavía un proyecto muy joven, pero lo suficientemente interesante, creo:

https://github.com/escobar5/raphael-pan-zoom

Demostración en línea aquí: http://htmlpreview.github.com/?https://raw.github.com/escobar5/raphael-pan-zoom/master/examples/complete-map/index.html

Answer 6

Terminé usando svg-pan-zoom que se deriva de SVGPan, pero permite hacer zoom / panorámica de un elemento svg arbitrario en tu HTML, y puedo agregar controles.

SVGPan funciona muy bien si su página completa es solo un SVG cargado (como el ejemplo de tigre), pero no si su svg está en algún lugar más profundo en el html.