Html HTML5 中的交互式平面图

Interactive Floor Plans in HTML5

提问by theduke

I have to develop interactive floor plan navigator and viewer for apartment buildings, which will succeed its Flash-based predecessor.

我必须为公寓楼开发交互式平面图导航器和查看器，这将继承其基于 Flash 的前身。

I am now in the process of evaluating techniques and technologies best suited to implement this in HTML5. I will have to support all common browsers (IE starting with 7).

我现在正在评估最适合在 HTML5 中实现这一点的技术和技术。我将不得不支持所有常见的浏览器（IE 从 7 开始）。

Requirements:

要求：

• The user is presented with several static outdoor views of the building, between which he can switch with a simple widget.
• They will be able to select a floor on this outside view. On mouseover (click for touch devices) the floor will be highlighted.
• Upon clicking on the floor you switch to a floor plan, which - again on mouseover/onclick - provides detailed information about the apartment.
• Some animations should be involved, but nothing too fancy.

• 用户可以看到建筑物的几个静态室外视图，他可以使用一个简单的小部件在这些视图之间进行切换。
• 他们将能够在这个外部视图中选择一个楼层。在鼠标悬停（点击触摸设备）时，地板将突出显示。
• 单击地板后，您会切换到平面图，该平面图 - 再次在鼠标悬停/点击时 - 提供有关公寓的详细信息。
• 应该涉及一些动画，但不要太花哨。

I have been thinking of the options for implementing this. I will also need a quick way of selecting polygons for the floors (overview) an the apartments (floor plan) to allow non-developers to create new buildings.

我一直在考虑实现这一点的选项。我还需要一种为楼层（概览）和公寓（平面图）选择多边形的快速方法，以允许非开发商创建新建筑。

The options I came up with:

我想出的选项：

1. Use plain images and image maps for the layovers.
2. Use canvas(utilizing Google's Javascript solution for browsers without support). Load the image in the canvas tag and dynamically create the layovers.
3. Use SVG

1. 使用普通图像和图像地图进行中途停留。
2. 使用画布（在不支持的情况下使用 Google 的 Javascript 浏览器解决方案）。在画布标签中加载图像并动态创建停留。
3. 使用 SVG

What is the best option for cross-browser compatability?

跨浏览器兼容性的最佳选择是什么？

回答by Simon Sarris

Either SVG or Canvas will suit your needs. You'll probably have an easier time developing this in SVG simply because of how much is already done for you.

SVG 或 Canvas 都可以满足您的需求。仅仅因为已经为您完成了多少工作，您可能会更轻松地在 SVG 中开发它。

Here are some other considerations:

以下是一些其他注意事项：

• Canvas works in all "modern" browsers, but not IE7/8
• SVG works in all modern browser, and VML (very close) is in IE7/8
• Text rendering in Canvas can look pretty different per-browser right now
• Canvas works in Android and iOS to an extent (minor things like text gradients still mess up)
• SVG does not work in android (at least it didn't a year ago. Anything change?) It does work in iOS
• The accessibility of SVG is FARbetter. Text is searchable, therefore SEO-friendly, blind-friendly, copy-and-paste friendly, etc. Interacting with the rest of the DOM is a lot more natural.
• Canvas performance is better, but you don't need that.

• Canvas 适用于所有“现代”浏览器，但不适用于 IE7/8
• SVG 适用于所有现代浏览器，VML（非常接近）适用于 IE7/8
• Canvas 中的文本渲染现在每个浏览器看起来都大不相同
• Canvas 在一定程度上适用于 Android 和 iOS（文本渐变之类的小事仍然混乱）
• SVG 在 android 中不起作用（至少一年前没有。有什么改变吗？）它在 iOS 中起作用
• SVG的可访问性FAR更好。文本是可搜索的，因此对 SEO 友好、盲人友好、复制和粘贴友好等。与 DOM 的其余部分交互要自然得多。
• 画布性能更好，但您不需要那样。

At this point they are pretty equal compatibility-wise, save for older versions of IE. You can get those to work with Canvas using the excanvas library, but it kinda sucks, especially if anything is going to be moving.

在这一点上，除了旧版本的 IE，它们在兼容性方面几乎相同。你可以使用 excanvas 库让它们与 Canvas 一起工作，但这有点糟糕，特别是如果有任何东西要移动的话。

I'd recommend SVG solely because you will be able to get off the ground developing it much much faster for a floor-plan type of app. Everything is already a DOM object. Events, mouse handling, etc, is already done for you.

我推荐 SVG 仅仅是因为您将能够更快地为平面图类型的应用程序开发它。一切都已经是一个 DOM 对象。事件、鼠标处理等已经为您完成。

But if you really want it to work on (older?) android phones, Canvas may be the better bet for now.

但是，如果您真的希望它在（较旧的？）Android 手机上运行，​​Canvas 目前可能是更好的选择。

回答by sled

I'm planning something similar for indoor navigation :)

我正在为室内导航计划类似的东西:)

I ended up using OpenLayers (http://openlayers.org/)

我最终使用了 OpenLayers ( http://openlayers.org/)

Actually OpenLayers was invented for GIS Stuff (Maps etc.) but you can easily define a X-Y-Z metric coordinate system and simply feed it with vector data.

实际上 OpenLayers 是为 GIS 东西（地图等）发明的，但您可以轻松定义 XYZ 公制坐标系，并简单地向其提供矢量数据。

The big benefit is that it comes with many features like drawing, different vector overlays, collision detection, distance measuring, tooltips, marks etc:

最大的好处是它具有许多功能，例如绘图、不同的矢量叠加、碰撞检测、距离测量、工具提示、标记等：

For OpenLayers 2.x (originally) see:

对于 OpenLayers 2.x（最初），请参阅：

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/draw-feature.html

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/draw-feature.html

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/transform-feature.html

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/transform-feature.html

For OpenLayers 3.x see:

对于 OpenLayers 3.x，请参见：

http://openlayers.org/en/v3.4.0/examples/

http://openlayers.org/en/v3.4.0/examples/

http://openlayers.org/en/v3.4.0/examples/draw-features.html

http://openlayers.org/en/v3.4.0/examples/draw-features.html

You can communicate over GeoJSON, GML etc. with the backend. We used PostGIS as backend to store the vector data. There's also a spatial extension for mysql (http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html).

您可以通过 GeoJSON、GML 等与后端进行通信。我们使用 PostGIS 作为后端来存储矢量数据。mysql 还有一个空间扩展（http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html）。

Just define a simple X-Y-Z coordinate system with a well chosen reference point :)

只需定义一个带有精心选择的参考点的简单 XYZ 坐标系 :)