svg - 使用 D3.js 制作自定义的虚构 map

标签 svg d3.js geojson topojson kartograph

我正在为一个副项目提出一个想法,并正在寻找关于在技术方面走向哪个方向的建议。我已经做了一些研究,但对于现实的选择是什么仍然相当困惑。

我想制作基于虚构世界(想想中土世界)的交互式 map ,包括时间线过滤器和详细信息部分,以获取有关事件或位置的更多信息。

所需功能:

  • 左侧 map
  • 右侧的详细信息 Pane
  • 底部的时间线 slider /过滤器
  • 领土
  • 政治派别颜色
  • 在详细信息 Pane 中显示详细信息
  • 标签
  • 城市标签

  • 跨栏:
  • 获取干净的 map 图像以使用
  • 将图像映射为中间格式(svg、geojson、topojson?)
  • 网页展示 map 、风格 map 、添加动画等

  • 技术
  • SVG
  • 我很确定我可以使用事件和边界在 SVG 中编写所有这些代码。我已经能够使用 GIMP 从图像创建 SVG 路径,因此将 map 转换为 SVG 文件似乎是合理的。
  • 这样做的问题是,当似乎已经有很多框架用于这种事情时,我最终会以艰苦的方式完成所有工作。
  • 绘图仪
  • La Bella Italia是一个很好的例子,可以作为一个很好的起点。我喜欢贸易路线动画和带有发光滤镜的边框样式。
  • 这里的好处是我知道我可以制作一个 svg map ,这就是启动和运行所需的一切。
  • 我的问题是,Kartograph 似乎不像 D3.js 那样丰富的平台。我不确定我是否可以将一些 D3 的东西与 kartograph 事件联系起来。如果可以,那可能是解决方案。
  • D3.js
  • sliders, animations (悬停和选择),并且 topojson 似乎是完美的。但我在这里遇到的主要问题是将我的图像转换为 GeoJson 格式。据我所知,这些格式严格用于真实世界地图,使用经度/纬度。

  • 所以你有它!我希望有一些关于如何将我的 map 图像转换为 topojson 的好消息,以便我可以享受 D3.js 的好处。如果没有,我想我可以尝试 kartograph 并将事件与 D3 控件联系起来。

    想法?

    最佳答案

    我目前正在写我的硕士论文,我的主题和你这些天一样。我调用我的项目Arda Maps .如果有技术问题,请随时问我。

    我在我的项目中使用以下框架/工具:

  • QGIS
  • jQuery
  • D3.js
  • GeoJSON/TopoJSON
  • 时间滑翔机
  • 关于svg - 使用 D3.js 制作自定义的虚构 map ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28487205/

    相关文章:

    html - 使用 CSS3 和 HTML5 的垂直文本?

    xcode - 在 Xcode 中以文本形式查看 .svg 文件?

    javascript - Google Maps Javascript API 显式访问 GeoJSON 功能属性

    MongoDB: "Malformed geo query"多边形上有 $geoIntersect

    android - 如何使用 react-native-svg 库加载本地 svg 文件

    javascript - D3 折线图/面积图可以处理无序数据吗?

    javascript - 为什么动画 d3 svg 线在 IE9 中不与轴偏移同步,但在 IE11 和 Chrome 中同步?

    javascript - d3 如何在文本后面的对象上触发事件

    javascript - 如何对 MultiLineString 进行排序?

    html - 一种使用 svg 生成内部径向阴影悬停图像的方法