14

想要创建办公室的动态平面图以显示占用情况并链接到会议等。我手头有一些 AutoCAD 文件，并一直在研究如何在浏览器上制作它。在我看来，SVG 将是一个很好的竞争者，它支持大多数移动和桌面浏览器（请不要使用旧版本的 IE），但我怀疑是否有办法将数据绑定到平面图上的每个对象。我搜索了 D3.js 或 Raphaël 之类的库，它们似乎是我需要的库。所以我的问题是：

  1. 有什么方法可以将 AutoCAD 文件转换为 SVG 之类的文件，而 SVG 会将平面图上的座位和房间显示为单独的对象？
  2. 哪个库（D3 或 Raphaël）适合我的需要？我有一个 MySQL 数据库，它可以输出占用率和会议数据。
  3. 作为开发过程中的权宜之计，你们认为将 CAD 文件导出为图像并使用 HTML 图像地图等老式 hack 来显示基本内容是个好主意吗？我在想这样做是否可以成为那些好的旧浏览器的后备。
4

2 回答 2

31

我构建了一个与您正在创建的内容相似的平面图应用程序。随意查看源代码并创建自己的 fork。希望你能从中得到一些启发。

与 SVG 操作最相关的代码是Map.js，因此您可能希望从那里开始。地图 SVG 之一存储在mv.svg中。

遗憾的是，我无法将您指向正在运行的实时实例，因为它位于内部 HR 服务器上。

架构笔记

  • 墙壁和房间名称存储在 SVG 文件中。
    • 在 Adob​​e Illustrator 中生成，可以导入 AutoCAD DWG
    • 手动编辑的 SVG 以包含座位坐标的 JavaScript 数组
  • 在页面加载时，服务器端模板将 SVG 插入 HTML 源代码
    • 否则，如果使用<object>or<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 服务器设置。

截屏

截屏

于 2013-09-11T08:25:21.350 回答
1

如果你想为你的平面图做一些后备，你可以尝试使用一些软件在你导出的图像上画出座位和房间，例如，iiCreator ( http://www.iicreator.com ) 可以导入你的楼层计划图像，您可以使用工具轻松创建座位和房间。它可能不像 Aldaviva 的平面图系统那样功能齐全，但它在短期内可以满足您的目的。

于 2013-09-12T08:46:30.980 回答