Создание пользовательских вымышленных карт с D3.js

Question

Я обдумываю идею для побочного проекта и ищу совет, в каком направлении идти с точки зрения технологии. Я уже провел некоторые исследования, но все еще не совсем понимаю, какие есть реалистичные варианты.

Я хотел бы сделать интерактивную карту, основанную на вымышленном мире (например, Средиземье), включая фильтр временной шкалы и раздел сведений для получения дополнительной информации о событии или местоположении.

Желаемые особенности:

• карта слева
• панель сведений справа
• шкала времени / фильтр внизу
• территории
  • цвет для политической принадлежности
  • отображает детали в панели подробностей
  • этикетки
• этикетки для городов

Барьеры:

1. Получите чистое изображение карты для работы с
2. Изображение карты в промежуточном формате (svg, геойсон, топойсон?)
3. Показать карту на веб-странице, карту стиля, добавить анимацию и т. Д.

технологии

• SVG
  • Я почти уверен, что могу написать все это в SVG, используя события и границы. Я уже был в состоянии создать пути SVG из изображения, используя GIMP, поэтому преобразование карты в файл SVG кажется правдоподобным.
  • Проблема в том, чтобы сделать это таким образом, что я бы в конечном итоге выполнил всю работу трудным путем, когда, кажется, уже есть множество фреймворков для такого рода вещей.
• Kartograph
  • La Bella Italia является очень хорошим примером и послужит хорошей отправной точкой. Мне нравятся анимации торгового маршрута и оформление границ с фильтрами свечения.
  • Бонус в том, что я знаю, что могу сделать карту SVG, и это все, что нужно для запуска и запуска.
  • Моя проблема здесь заключается в том, что Kartograph не так богат платформой, как D3.js. Я не уверен, смогу ли я сделать двойное погружение и связать некоторые вещи D3 с событиями картографа. Если бы я мог, это могло бы быть решением.
• D3.js
  • Ползунки, анимация(наведение и выделение) и топойсон кажутся идеальными. Но главная проблема, которую я имею здесь, - это преобразование моего изображения в формат GeoJson. Из того, что я могу сказать, эти форматы строго для карт реального мира, используя долготу / широту.

Так что у вас есть это! Я надеюсь, что есть хорошие новости о том, как я могу преобразовать изображение моей карты в топойсон, чтобы я мог воспользоваться преимуществами D3.js. В противном случае, я полагаю, я мог бы просто попробовать картограф и связать события с элементами управления D3.

Мысли?

Answer 1

Сейчас я пишу магистерскую диссертацию, и у меня та же тема, что и у вас в эти дни. Я назвал свой проект Arda Maps. Не стесняйтесь задавать мне любые вопросы, если у вас есть вопросы по теологии.

Я использую следующие рамки / инструменты в моем проекте:

• QGIS
• JQuery
• D3.js
• GeoJSON / TopoJSON
• TimeGlider