D3可视化创建建筑/校园地图

Question

D3可视化创建建筑/校园地图

d3.jstopojson

4

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

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

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

谢谢， Raj。

- Rajesh Jain

1

看起来 GeoJSON 对于单个建筑物来说有些过度了。假设它只有一个楼层，为什么不使用普通的 SVG 呢？毕竟，楼层平面图大多只是矩形。你的建筑物肯定不够大，需要担心地图投影问题。 - Stephen Thomas

1

GeoJSON文件通常是由shapefile构建的，对吗？我怀疑你是否有一个单个建筑物的shapefile - 同时也同意@Stephen的观点，这样做会过度。另外，你的问题还是非常高层次的 - SO通常不用于众包整个项目的草图设计。先尝试一些代码，当你遇到困难时再回来。 - goblin-esque

1

可能是这个问题的重复。我同意GeoJSON可能有些过度，但是从CAD软件到QGIS再创建GeoJSON会有一个不错的工作流程，特别是当你有一个复杂的楼层平面图时，它确实有一些优势。 - user1614080

1

感谢您的评论。我将从SVG和GeoJSON开始。我同意这更高层次--我将开始实践，然后再回来。 - Rajesh Jain

有一些在线的GeoJSON编辑器，例如geojson.io。你可以找到你所在的建筑物，标注它，添加属性比如房间名称，然后导出GeoJSON格式的文件。 - Hugolpz

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hugolpz · Accepted Answer

强大的GeoJSON

有一些在线的GeoJSON编辑器，例如geojson.io。你可以找到你的建筑物，在地图上标出它，添加属性（如房间名称），然后将其保存为GeoJSON或TopoJSON文件。

enter image description here

请注意，geojson.io不允许无限缩放，因此你的绘图可能会相当粗略。

在你的D3js代码中，你需要聚焦于你的JSON数据（形状）。在这个答案的后半部分中有一个方便的工作示例，其中包括"D3js调用"和"聚焦"部分。

机智的SVG

使用Inkscape或其他矢量编辑器将你的建筑设计成SVG/XML文件，可能需要更长的时间，但最终结果会更好。然后使用d3.xml(http://yourwebsite.org/file.xml, function(data){ ... })。不幸的是，我在这方面的专业知识太少，但如果需要高质量，我会选择这种方法。