javascript 如何创建适用于移动和桌面浏览器的平面图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18735718/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create floor plans that work nice with mobile and desktop browsers?
提问by Tom Wrigley
Want to create a dynamic floor plan map of an office to show occupancy and link up to meetings etc. I have some AutoCAD files on hand and been researching for ways to make this on a browser. It seems to me that SVG would be a good contender which supports most mobile and desktop browsers (no old version of IE please), but I doubt if there are ways to bind data to each object on the floor plan. I have searched for libraries like D3.js or Rapha?l and they seem to tbe the library I need. So my questions are:
想要创建一个办公室的动态平面图以显示占用情况并链接到会议等。我手头有一些 AutoCAD 文件，并且一直在研究如何在浏览器上制作它。在我看来，SVG 将是一个很好的竞争者，它支持大多数移动和桌面浏览器（请不要使用旧版本的 IE），但我怀疑是否有办法将数据绑定到平面图上的每个对象。我搜索过像 D3.js 或 Rapha?l 这样的库，它们似乎是我需要的库。所以我的问题是：
- Is there any way to convert an AutoCAD file to something like SVG, while the SVG would display the seats and rooms on the plan as individual objects?
- Which library (D3 or Rapha?l) would suit my needs? I have a MySQL database which can pump out occupancy and also the meeting data.
- As a stopgap measure during the development, do you guys think that exporting the CAD file to an image and use vintage hacks like HTML image map to show something basic is a good idea? I am thinking if doing this can become a fallback for those good old browsers.
- 有什么方法可以将 AutoCAD 文件转换为 SVG 之类的文件，而 SVG 会将平面上的座位和房间显示为单独的对象？
- 哪个库（D3 或 Rapha?l）适合我的需求？我有一个 MySQL 数据库，它可以提供占用率和会议数据。
- 作为开发过程中的权宜之计，你们是否认为将 CAD 文件导出为图像并使用诸如 HTML 图像映射之类的老式黑客来显示一些基本的东西是个好主意？我在想如果这样做可以成为那些好的旧浏览器的后备。
回答by Ben Hutchison
I built a floorplan applicationthat sounds similar to what you're creating. Feel free to look at the source code and create your own fork. Hopefully you can pull some inspiration from it.
我构建了一个听起来与您正在创建的类似的平面图应用程序。随意查看源代码并创建自己的分支。希望你能从中汲取一些灵感。
The code most relevant to SVG manipulation is Map.js, so you may want to start there. One of the map SVGs is stored in mv.svg.
与 SVG 操作最相关的代码是Map.js，因此您可能想从那里开始。地图SVG 之一存储在mv.svg 中。
Sadly, I can't point you to the live instance this is running on because it's on an internal HR server.
遗憾的是，我无法向您指出正在运行的实时实例，因为它位于内部 HR 服务器上。
Architecture notes
架构笔记
- walls and room names are stored in an SVG file.
- generated in Adobe Illustrator, which can import AutoCAD DWG
- SVG edited by hand to include a JavaScript array of seat coordinates
- on page load, server-side templating inserts the SVG into the HTML source
- otherwise, if SVG is loaded using an
<object>or<image>tag or CSSbackground-image, you won't have access to the SVG DOM through JavaScript
- otherwise, if SVG is loaded using an
- dynamic data (meetings, seats) are retrieved from a Mongo database and exposed through a JSON REST API
- a client-side JavaScript MVC application uses Backbone to insert the dynamic data into the SVG DOM and attach event handlers
- when a person's avatar is clicked, detailed person info is shown
- when the user types in a search box, the avatars in the SVG get CSS classes applied so avatar images that don't match the search are semi-transparent
- 墙壁和房间名称存储在 SVG 文件中。
- 在 Adobe Illustrator 中生成，可以导入 AutoCAD DWG
- 手动编辑的 SVG 以包含座位坐标的 JavaScript 数组
- 在页面加载时，服务器端模板将 SVG 插入到 HTML 源中
- 否则，如果使用
<object>or<image>标签或 CSS加载 SVGbackground-image，您将无法通过 JavaScript 访问 SVG DOM
- 否则，如果使用
- 从 Mongo 数据库中检索动态数据（会议、席位）并通过 JSON REST API 公开
- 客户端 JavaScript MVC 应用程序使用 Backbone 将动态数据插入 SVG DOM 并附加事件处理程序
- 当点击一个人的头像时，会显示详细的人信息
- 当用户在搜索框中键入时，SVG 中的头像会应用 CSS 类，因此与搜索不匹配的头像图像是半透明的
Database schema
数据库模式
The Mongo database has a peoplecollection, each of which contains a document of the following form:
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"
}
The only required field is fullname(and _id, but I let Mongo autogenerate that).
唯一需要的字段是fullname(and _id，但我让 Mongo 自动生成)。
Configuration
配置
You can configure the database connection and HTTP server settings by copying the provided config.json.exampleto config.jsonand making your changes in the new file.
您可以通过将提供的文件复制config.json.example到config.json新文件并在其中进行更改来配置数据库连接和 HTTP 服务器设置。
Screenshot
截屏
回答by Mandi
If you want something like a fallback for your floor plan map, you may try using some software to draw out the seats and rooms on your exported image, for example, iiCreator (http://www.iicreator.com) can import your floor plan image, and you can use tools to create the seats and rooms readily. It may not be as full-featured like the Floor plan system from Aldaviva, but it serves your purpose in the short term.
如果你想为你的平面图做一个后备，你可以尝试使用一些软件在你导出的图像上画出座位和房间，例如，iiCreator（http://www.iicreator.com）可以导入你的地板平面图，您可以使用工具轻松创建座位和房间。它可能不像 Aldaviva 的楼层平面图系统那样功能齐全，但它在短期内可以满足您的目的。
