webew
Войти » Регистрация
 
JavaScript

Как сделать интерактивную карту на JS?

10 марта 2012, 0:50
Автор: rgbeast
Есть карта неба в виде gif-картинки (прилагается). Хочется, чтобы JS при наведении на логический пиксель показывал дополнительную информацию о нем (логический пиксель карты занимает несколько пикселей gif-картинки, но отображение неизвестно). Как можно такое реализовать?

а) Можно ли в JS получить цвет под курсором мыши?
б) Можно ли наложить две картинки - одну в виде приведенной карты, а другую, для которой в цвете закодирован номер логического пикселя (по которому можно из массива взять имя источника, его параметры и.т.д.)? Наложение дожно быть таким, что пользователь видел картинку №1, а JS при наведении мыши определял цвет пикселя картинки №2.



P.S. картинка из http://arxiv.org/abs/1201.3625
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
NO USERPIC

rgbeast

Нашел ответ на вопрос (а) в случае нарисованного на экране изображения:
http://stackoverflow.com/a/8796843

Для Firefox перед вызовом canvas.getImageData нужно добавить строчку (см. обсуждение на MozillaZine:
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
23.03.2012, 22:04
Ответить

1234ru

Хм..
Что-то в этом есть.

Но вообще, если честно, я не оч. понимаю, почему обязательно нужно определять номер логического пикселя, исходя из цвета, если наверняка его можно определить из координаты как таковой?
Ведь когда изображение строится, наверняка есть какие-то данные насчет того, где какой пиксель на изображении должен находиться.
Почему бы просто не воспользоваться этими данными?
То, что не убивает нас, делает нас инвалидами.
24.03.2012, 03:22
Ответить
NO USERPIC

rgbeast

Схема разбиения на логические пиксели HEALPIX - это разбиение сферы на кусочки одинаковой площади. Затем это превращается в плоскую картинку конформным преобразованием (т.н. Aitoff projection) - в результате весь шар отображается в одно "полушарие", но зато сохранется площадь и углы между линиями (в отличии от карты мира из двух полушарий). В принципе обратным преобразованием можно получить координаты на сфере (широту и долготу), но чтобы узнать номер логического пикселя, придется переписывать библиотеку HEALPIX с C на Javascript (там нетривиальные преобразования - это ясно из рисунков пикселизации с различной гранулированностью ). Поэтому возникла мысль покрасить каждый логический пиксель в цвет, соответствующий его номеру и преврарить в GIF. Тогда данный GIF будет готовой таблицей обратного отображения плоскости в номер логического пикселя на сфере (причем всегда правильной по построению - тут невозможно перепутать координаты или на границе получить деление на ноль).

Не хочется, чтобы JavaScript выполнял сложные математические вычисления (чтобы не сделать тут ошибки), а хочется использовать JS для отображения уже готовых табличных данных. Решение в моем посте фактически позволяет это сделать. Достаточно отобразить на странице две карты - настоящую и рядом вспомогательную для получения цвета. Другое решение - заранее подготовить массив x,y,Npix, но так как карта 880x400 пикселей, массив будет очень объемным и я не знаю насколько быстро JS будет с ним работать.
24.03.2012, 16:47
Ответить

1234ru

Цитата:
Другое решение - заранее подготовить массив x,y,Npix


Да, я примерно это и имел в виду.
Массив можно сделать одномерным, значениями элементов будут номера сущностей, относящихся к пикселям.
Можно договориться, как нумеровать пиксели - например, первая строка - пиксели с 0-го по 879-й, вторая строка - с 880-го по 1759-й и т.п.
По положению курсора мыши можно будет определить номер пикселя, а по нему - номер сущности.

Цитата:
так как карта 880x400 пикселей, массив будет очень объемным и я не знаю насколько быстро JS будет с ним работать.


Да, не очень быстро. Я проверил - JSON длиной 352000 элементов браузер ест в течение нескольких секунд (это уже после получения ответа). Но это, во-первых, на медленном компьютере. Во-вторых, может быть, несколько секунд - это не так много?
(само время обращения к отдельному элементу массива невелико).
То, что не убивает нас, делает нас инвалидами.
30.03.2012, 18:19
Ответить
NO USERPIC

rgbeast

Да, несколько секунд на загрузку не страшно, если обращение мгновенно. Спасибо за тест.
30.03.2012, 18:24
Ответить

1234ru

Тогда дело встало за массивом.
Имея его, можно решить поставленную задачу.
То, что не убивает нас, делает нас инвалидами.
30.03.2012, 18:27
Ответить

1234ru

upd: выяснилось (помогли на stackoverflow), что основное время выполнения, которое я наблюдал (несколько секунд) занимал именно HTTP-запрос к серверу за данными - массив из 880х400 чисел в формате JSON занимает 2.3Мб.
Сам разбор массива занял порядка 0.1с (на совсем не новом компьютере; проверялось в Firefox).
Это несколько лучше, чем если бы было наоборот, т.к. в таком случае нагрузка на процессор клиентского компьютера невысока.
С другой стороны, ускорить, получается, никак нельзя, т.к. узкое место - сеть.
То, что не убивает нас, делает нас инвалидами.
30.03.2012, 22:53
Ответить
Добавить комментарий
Отображение комментариев: Древовидное | Плоское
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100