Чем рисовать полигоны в вебе?

Question

[iklementiev]

Добрый день.



Есть координаты полигонов. Например:

#  X          Y<br>
1; 402139.3;  1538128.55<br>
2; 402144.83; 1538166.25<br>
3; 402116.7;  1538170.38<br>
4; 402111.09; 1538132.22<br>
1; 402139.3;  1538128.55<br>

Хочется по этим данным в веб проекте нарисовать полигоны. Данные в вебе получаю в виде jSON (можно заточиться под GeoJSON)



Есть следующие требования и пожелания:

1. Хочется рисовать с помощью JS (jQuery и т.п.)

2. Возможность обозначения точек полигона (вершин)

3. Возможность изменения масштаба

4. Работа с реальными координатами

5. Хочется простой, не громоздкий инструмент

6. Работа хотя бы в последних браузерах

7. Низший приоритет: возможность работы как без подложки, так и с подложкой (например Google Maps)



Спасибо.

Answer 1

[alisey]

SVG, например. Масштабируемо, быстро, встроенная поддержка.

jsbin.com/ovaxir/1/edit

Answer 2

[Сергей Протько]

raphaeljs.com/ например.

Answer 3

[SerDIDG]

Как то давненько я делал рисовалку map area на канвасе. Только что решил переделать ради интереса для похожих, на ваши, нужды.

artlark.ru/tools/poly_draw/
github.com/SerDIDG/Poly-Draw

Answer 4

[Pavel Isakov]

На картах можно рисовать вот этим leaflet.cloudmade.com/

Answer 5

[2m0nd]

у SharpMap вроде что то было для веба sharpmap.codeplex.com/ вроде в каком то их тестовом проекте даже по подложке то ли с бинга толи с гугла рисовал полигоны.

Answer 6

[Александр Скакунов]

У Google Maps есть встроенный механизм отрисовки polygon и polyline. Там даже анимацию можно делать.

developers.google.com/maps/documentation/javascript/overlays — мануал
developers.google.com/maps/documentation/utilities/polylineutility — тулза чтобы попробовать

Кстати, Google Maps поддерживают кодирование списка координат в строку. Я мерял объёмы данных — получается в 10 раз меньше данных для передачи по сети. Достигается это за счёт того, что буквы намного «ёмче» цифр. Алфавит больше = строки короче. Попробуйте.