【问题标题】:D3 visualization to create building / campus mapD3可视化创建建筑/校园地图
【发布时间】:2015-05-25 19:59:29
【问题描述】:

如何使用 D3 创建可以缩放并获取每个教室的上下文信息的建筑/学校地图。

我已经阅读了有关如何创建可缩放地理地图http://bl.ocks.org/mbostock/2206590 的示例,但在代码中,它使用了美国各州的 TopoJSON(或 GeoJSON)格式。

如何获取学校建筑的 GeoJSON 文件?

谢谢, 拉吉。

【问题讨论】:

  • 似乎 GeoJSON 对于单个建筑物来说将是巨大的矫枉过正。假设它是单层,为什么不直接使用普通的旧 SVG?毕竟,平面图(大部分)只是矩形。您的建筑物肯定不够大,无需担心地图投影。
  • GeoJSON 文件通常是从 shapefile 构建的,对吧?我怀疑你会有一个单一建筑物的 shapefile - 也同意@Stephen,这有点矫枉过正。此外,您的问题仍然是非常顶级的 - SO 通常不用于众包整个项目的草图。先尝试一些代码,遇到困难再回来。
  • 可能是 this 问题的副本。我同意 GeoJSON 可能有点矫枉过正,但是从 CAD 包到 QGIS 会有一个很好的工作流程来创建 GeoJSON,如果你有一个复杂的平面图,这肯定有一些优势。
  • 感谢 cmets。我将从 SVG 开始,也许还有 GeoJSON。我同意这是更高级的——我会弄脏我的手然后回来。
  • 有在线geojson编辑器,如geojson.io。您可以找到您的建筑物,对其进行映射,添加房间名称等属性,然后导出 geojson。

标签: d3.js topojson


【解决方案1】:

硬核geojson

有在线geojson编辑器,如geojson.io。您可以找到您的建筑物,对其进行映射,添加房间名称等属性,然后将其保存为 geojson 或 topojson 文件。

请注意,geojson.io 不允许无限缩放,因此您的绘图可能非常近似。

在您的 D3js 代码中,您必须自动关注您的 json 数据(形状)。在2nd half of this answerD3js callFocus 部分中解释了一个方便的工作示例。

诙谐的 SVG

使用 Inkscape 或其他一些矢量编辑器将您的建筑设计为 SVG / XML 文件会花费更长的时间,但最终会得到更好的结果。然后使用d3.xml(http://yourwebsite.org/file.xml, function(data){ ... })。不幸的是,我在这方面的专业知识太少,但如果在那个级别要求质量,我会采用这种方式。

【讨论】:

    猜你喜欢
    • 2012-07-18
    • 2012-01-19
    • 2017-12-22
    • 1970-01-01
    • 1970-01-01
    • 2013-11-20
    • 1970-01-01
    • 2012-07-09
    • 1970-01-01
    相关资源
    最近更新 更多