Svg 使用D3.js制作自定义虚拟地图

我正在考虑一个附带项目的想法，并且正在寻求关于技术发展方向的建议。我已经做了一些研究，但对于现实的选择仍然相当困惑

我想根据一个虚构的世界（想想中土世界）制作一张互动地图，包括一个时间线过滤器和一个细节部分，以获取关于事件或地点的更多信息

所需功能：

• 左边的地图
• 右侧的详细信息窗格
• 底部的时间轴滑块/过滤器
• 领地
  • 政党色彩
  • 在详细信息窗格中显示详细信息
  • 标签
• 城市标签

障碍：

获取要使用的干净地图图像

将图像映射为中间格式（svg、geojson、topojson？）

在网页上显示地图、样式地图、添加动画等

技术

• SVG
  • 我非常确定我可以使用事件和边界在SVG中编写所有这些代码。我已经能够使用GIMP从图像创建SVG路径，因此将地图转换为SVG文件似乎是可行的
  • 这样做的问题是，当似乎已经有很多这样的框架时，我最终会以艰苦的方式完成所有的工作
• 卡托记录仪
  • 这是一个很好的例子，可以作为一个很好的起点。我喜欢贸易路线动画和带有辉光过滤器的边界样式
  • 这里的好处是，我知道我可以制作一个svg映射，这就是启动和运行所需的全部内容
  • 我的问题是Kartograph不像D3.js那样有丰富的平台。我不确定我是否能把D3和kartograph事件联系起来。如果可以的话，这可能就是解决办法
• D3.js
  • （悬停和选择）和topojson似乎是完美的。但我这里的主要问题是将图像转换为GeoJson格式。据我所知，这些格式严格适用于真实世界的地图，使用经度/纬度

好了，给你！我希望有一些好消息告诉我如何将我的地图图像转换成topojson，这样我就可以享受D3.js的好处。如果没有，我想我可以试试kartograph，然后用D3控件连接事件

---

想法？

我目前正在写我的硕士论文，我的主题和你这些天一样。我打电话给我的项目。如果有技术问题，请随时问我

我在项目中使用了以下框架/工具：

• QGIS
• JQuery
• D3.js
• GeoJSON/TopoJSON
• 时间滑翔机

---

在我看来，任何答案都将基于观点。你几乎可以肯定地用你概述的任何技术都可以做你想做的事情。我认为你只需要在一个.shp软件中手工设计你的中土世界，比如QGIS。然后使用

topojson

命令行将shp转换为topojson文件。然后，您可以获取一些现有的自动聚焦D3js代码，并对其进行一些修改以使其正常工作。注意：d3和topojson通常与矢量gis文件一起使用，很少与位图gis图像一起使用。