如何创建适用于移动和桌面浏览器的平面图？

Question

想要创建办公室的动态平面图以显示占用情况并链接到会议等.我手头有一些AutoCAD文件,并一直在研究如何在浏览器上进行此操作.在我看来,SVG将是一个很好的竞争者,支持大多数移动和桌面浏览器(请不要旧的IE版本),但我怀疑是否有方法将数据绑定到平面图上的每个对象.我搜索过像D3.js或Raphaël这样的图书馆,他们似乎是我需要的图书馆.所以我的问题是:

1. 有没有办法将AutoCAD文件转换为类似SVG的东西,而SVG会将计划中的座位和房间显示为单个对象？
2. 哪个图书馆(D3或Raphaël)能满足我的需求？我有一个MySQL数据库,可以输出占用率和会议数据.
3. 作为开发过程中的权宜之计,您是否认为将CAD文件导出到图像并使用HTML图像映射等复古黑客来显示基本内容是一个好主意？我在想,如果这样做可以成为那些好老浏览器的后备.

Answer 1

我构建了一个与您正在创建的相似的平面图应用程序.随意查看源代码并创建自己的fork.希望你能从中汲取灵感.

与SVG操作最相关的代码是Map.js,因此您可能希望从那里开始.其中一个映射SVG存储在mv.svg中.

遗憾的是,我无法指出您正在运行的实例,因为它位于内部HR服务器上.

建筑笔记

• 墙和房间名称存储在SVG文件中.
  • 在Adobe Illustrator中生成,可以导入AutoCAD DWG
  • SVG手动编辑,包括一个JavaScript坐垫座阵列
• 在页面加载时,服务器端模板将SVG插入HTML源代码中
  • 否则,如果使用<object>或<image>标记或CSS 加载SVG background-image,您将无法通过JavaScript访问SVG DOM
• 动态数据(会议,席位)从Mongo数据库中检索并通过JSON REST API公开
• 客户端JavaScript MVC应用程序使用Backbone将动态数据插入SVG DOM并附加事件处理程序
  • 当点击某人的头像时,会显示详细的人物信息
  • 当用户在搜索框中键入时,SVG中的化身会应用CSS类,因此与搜索不匹配的头像图像是半透明的

数据库架构

Mongo数据库有一个people集合,每个集合都包含以下格式的文档:

{
    "_id" : ObjectId("5201db41f5f4be9ae57e37a9"),
    "fullname" : "Ben Hutchison",
    "desk" : 3,
    "office" : "mv",
    "email" : "ben",
    "title" : "Software Engineer, Graphic Designer",
    "tags" : [  "des",  "eng" ],
    "linkedInId" : 139463329,
    "mobilePhone" : "845-986-0123",
    "workPhone" : "408-550-2995"
}

唯一需要的字段是fullname(而且_id,我让Mongo自动生成).

组态

您可以通过将提供的内容复制config.json.example到config.json新文件并在新文件中进行更改来配置数据库连接和HTTP服务器设置.

截图